Menú css3 adaptable para web

Un menú en una web es indispensable a la hora de hacer que el navegante encuentre informació relevante y nos conduzca a un lugar deseado por el programador .

Como no utilizar un menú que solo cuando lo necesitemos aparezca con un clic .

Esta barra de menú horizontal permanece escondido hasta que el usuario haga clic en un icono de menú, este a su vez lo hará aparecer.

El uso de CSS3, realiza de forma animada el efecto , La presentación del menú puede variar con los distintos dispositivos y tamaños de pantalla. El menú cambia de forma inteligente entre la barra de menú estándar, un menú ligeramente truncado

Es bastante funcional a la hora de presentación ante el usuario sientete libre de usar esto a tu modo cualquier duda la despejaré si dejan sus comentarios…!

Archivos a utilizar:

index.html

style.css

index.html entre <body> colocar las clases correspondientes:

<div class="iconicmenu">
<input type="checkbox" id="togglebox" />
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Css galeria</a></li>
<li><a href="#">CSS Libreria</a></li>
<li><a href="#">Jquery</a></li>
<li><a href="#">JavaScript</a></li>
<li><label for="togglebox"></label></li>
</ul>
<label class="toggler" for="togglebox">Menu</label>
</div>

Podrás colocar la cantidad de li que deseen que aparezca dentro del ul padre
style.css el estilo es el que realiza el efecto css3

.iconicmenu {
    position: relative;
    height: 45px;
    overflow: hidden;
    }

.iconicmenu, .iconicmenu * {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

.iconicmenu input[type="checkbox"] { 
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    }

.iconicmenu > label { 
    z-index: 1000;
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    float: left;
    top: 0;
    left: 0;
    background: white;
    text-indent: -1000000px;
    border: 6px solid black; 
    border-width: 6px 0;
    cursor: pointer;
    -moz-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in; 
    }

.iconicmenu > label::after { 
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 18%;
    top: 19%;
    left: 0;
    border: 6px solid black; 
    border-width: 6px 0;
    -moz-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in; 
    }

.iconicmenu ul { 
    margin: 0;
    padding: 0;
    position: absolute;
    margin-left: 40px;
    background: #eee;
    left: -100%; 
    height: 40px; 
    font: bold 14px Verdana;
    text-align: center;
    list-style: none;
    opacity: 0;
    -moz-border-radius: 0 5px 5px 0;
    -webkit-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
    -moz-perspective: 10000px;
    perspective: 10000px;
    -moz-transition: all 0.5s ease-in;
    -webkit-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in; 
    }

.iconicmenu li {
    display: inline;
    margin: 0;
    padding: 0;
    }

.iconicmenu ul label { 
    cursor: pointer;
    position: relative;
    height: 100%;
    text-align: center;
    }

.iconicmenu ul label::after { 
    content: "x";
    display: inline-block;
    line-height: 14px;
    color: white;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    width: 20px;
    height: 20px;
    background: black;
    font-size: 18px;
    margin: 5px;
    margin-top: 10px;
    -moz-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    }

.iconicmenu input[type="checkbox"]:checked ~ label, .iconicmenu ul label:hover::after {
    -moz-transform: rotatey(180deg);
    -ms-transform: rotatey(180deg);
    -webkit-transform: rotatey(180deg);
    transform: rotatey(180deg); 
    }

.iconicmenu > label:hover, .iconicmenu > label:hover::after, .iconicmenu input[type="checkbox"]:checked ~ label, .iconicmenu input[type="checkbox"]:checked ~ label::after {
    border-color: darkred;
    }

.iconicmenu input[type="checkbox"]:checked ~ ul {
    left: 8px; 
    opacity: 1;
    -moz-box-shadow: 1px 1px 5px gray;
    -webkit-box-shadow: 1px 1px 5px gray;
    box-shadow: 1px 1px 5px gray;
    }

.iconicmenu li a {
    display: block;
    float: left;
    text-align: center;
    text-decoration: none;
    color: black;
    margin: 0;
    padding: 10px;
    padding-right: 15px;
    height: 100%;
    }

.iconicmenu li a:hover {
    background: black;
    color: white;
    }

/* -- CSS Media Queries -- */

@media screen and (max-width: 580px) { 
    .iconicmenu input[type="checkbox"]:checked ~ label {
        display: none;
        }
    .iconicmenu input[type="checkbox"]:checked ~ ul {
        margin-left: 0;
        }
    }
 
@media screen and (max-width: 560px) { 
    .iconicmenu {
        overflow: visible;
        }
    .iconicmenu ul {
        height: auto;
        }
    .iconicmenu ul li {
        min-width: 200px;;
        display: block;
        }
    .iconicmenu ul li a {
        float: none;;
        text-align: left;
        }
    }



<!--[if lte IE 8]>

		.iconicmenu > label{
		border-width: 7px;
		background: #eee;
		}
		
		.iconicmenu:hover ul{
		    left: 8px; 
		}

<!--[endif]-->

Dentro del media Queries se realiza el efecto de cambio de proporción de pantalla pixeles menores dentro del navegador realiza variaciones de pantalla y comprobarás el efecto…

Navegadores:

Probado en google chrome.

Probado en google FF mozilla.

Espero es sirva en algún proyecto…

Demostración

 

Relacionado