A continuación mostraré un menú en css3, es un ejemplo muy practico y el código es sencillo de entender. Utiliza diseño responsive es decir que se acomoda a diferentes tipos de paginas, este menú personalmente me gusta mucho. Lo acomode según mi necesidad, los cambios son de acuerdo a lo que necesitemos en ese momento.
Bueno manos a la obra.
HTML
El Diseño del menú en CSS es el siguiente:
.animenu > ul:after { content: ""; display: table; clear: both; } body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } .animenu { font: bold 13px Arial, Helvetica; width: 1100px; text-align:center } .animenu * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .animenu ul { margin: 30px 0 0 250px; padding: 0; list-style: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .animenu li { position: relative; width:190px; } .animenu li:hover > ul { opacity: 1; visibility: visible; margin: 0; } .animenu li:hover > a { color: white; } .animenu input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } .animenu label { display: none; cursor: pointer; user-select: none; } .animenu > ul { border: 1px solid #040404; background-color: #111111; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(255, 255, 255, 0))); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset; } .animenu > ul > li { float: left; border-right: 1px solid #1e1e1e; -webkit-box-shadow: 1px 0 0 #444444; -moz-box-shadow: 1px 0 0 #444444; box-shadow: 1px 0 0 #444444; } .animenu > ul > li > a { float: left; padding: 1em 3em; text-transform: uppercase; } .animenu > ul a { color: #999999; text-decoration: none; text-shadow: 0 1px 0 #111111; text-align:center; } .animenu > ul ul { position: absolute; top: 100%; left: 0; z-index: 1; opacity: 0; visibility: hidden; margin: 2em 0 0 0; background-color: #373737; background-image: none; -webkit-transition-property: margin, opacity; -moz-transition-property: margin, opacity; -o-transition-property: margin, opacity; transition-property: margin, opacity; -webkit-transition-duration: .15s; -moz-transition-duration: .15s; -o-transition-duration: .15s; transition-duration: .15s; -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .animenu > ul ul li { display: block; -webkit-box-shadow: 0 1px 0 #1e1e1e, 0 2px 0 #515151; -moz-box-shadow: 0 1px 0 #1e1e1e, 0 2px 0 #515151; box-shadow: 0 1px 0 #1e1e1e, 0 2px 0 #515151; } .animenu > ul ul li:first-child > a { -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; -ms-border-radius: 3px 3px 0 0; -o-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } .animenu > ul ul li:first-child > a:after { content: ''; position: absolute; left: 4em; top: -12px; border: 6px solid transparent; border-bottom-color: inherit; } .animenu > ul ul li:last-child { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .animenu > ul ul li:last-child > a { -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; -ms-border-radius: 0 0 3px 3px; -o-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; } .animenu > ul ul a { padding: 1em; display: block; border-color: #373737; } .animenu > ul ul a:hover { background-color: #0186ba; border-color: #0186ba; } @media screen and (max-width: 480px) { .animenu > ul, .animenu > ul ul { visibility: visible; opacity: 1; display: none; } .animenu input[type=checkbox]:checked ~ label, .animenu input[type=checkbox] ~ label:hover { color: white; } .animenu label { border: 1px solid #040404; background-color: #111111; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(255, 255, 255, 0))); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset; color: #999999; text-shadow: 0 1px 0 #111111; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; text-transform: uppercase; position: relative; display: block; padding: 1em 3em; text-align:center; !important } .animenu label:before { position: absolute; left: 0.5em; top: 0.2em; content: "\2261"; font-size: 2em; } .animenu > ul { position: relative; border-color: #111111; margin: 0.5em 0 !important; padding: 0.25em; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background-color: #111111; background-image: none; } .animenu > ul:after { content: ''; position: absolute; left: 2em; top: -12px; border: 6px solid transparent; border-bottom-color: inherit; } .animenu > ul li { display: block; } .animenu > ul > li { float: none; border: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background-color: #111111; background-image: none; } .animenu > ul > li > a { float: none; display: block; padding: 1em; } .animenu > ul ul { position: static; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; background-color: #2b2b2b; background-image: none; margin: 0; -webkit-transition-property: none; -moz-transition-property: none; -o-transition-property: none; transition-property: none; } .animenu > ul ul li:first-child > a { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; } .animenu > ul ul li:first-child > a:after { content: none; } .animenu > ul ul li:last-child > a { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; } .animenu > ul ul a { padding-left: 2em; display: block; width: auto; } .animenu input[type=checkbox]:checked ~ ul { display: block; } .animenu input[type=checkbox]:checked ~ ul ul { display: block; } } @media screen and (max-width: 600px) { .animenu > ul > li > a { padding: 1em 2em; } }
Diseño tomado de: http://red-team-design.com/
EN LA WEB
Quedaría de esta forma:
Nota: Este diseño se acomodo a mis necesidades.
No hay comentarios:
Publicar un comentario