Menú horizontal Desplegable con CSS3

        Contenido Bloqueado. Para desbloquear el contenido y acceder a este tutorial de el menú horizontal CSS, presiona en el siguiente botón.

Menú horizontal Desplegable con CSS3

Buenas, siguiendo de el plan CSS3 en menúes, ahora con un nuevo tutorial similiar a la anterior entrada de CSS3, en la cual vimos el menú horizontal de navegación sin sub-li, bien aquí veremos otro menú horizontal con un diseño distinto y Desplegable con los estilos que nos sirve cssmenu en realidad esta muy bueno, se ha puesto entrada completa para este tutorial.

Utilizamos la etiqueta css98pmenu como id para el menú, incluimos en los estilos algunas transiciones para los sub-menús de la función desplegable haciendo quedar asombroso este.

Les dejare una demo en esta misma pagina, así se vera el resultado:

• Inicio
• Despliega
  • Sub-lista1
    • plista1
    • plista2
  • Sub-lista2
    • plista1
    • plista2
• descargas
• 998pow

Simplemente grandioso!, lo puedes tener solo sigue los siguientes pasos:

Muy simple gracias a 998pow pues bien ahora con los pasos de instalación.

Solo ve a blogger > Plantilla > Edición HTML y con ayuda de Ctrl+C busca la linea </b:skin> y justo debajo pega el siguiente codigo:


<style> #css98pmenu ul { margin: 0; padding: 0; } #css98pmenu li { margin: 0; padding: 0; } #css98pmenu a { margin: 0; padding: 0; } #css98pmenu ul { list-style: none; } #css98pmenu a { text-decoration: none; } #css98pmenu { height: 70px; background-color: #232323; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4); width: auto; } #css98pmenu > ul > li { float: left; margin-left: 15px; position: relative; } #css98pmenu > ul > li > a { color: #a0a0a0; font-family: Verdana, 'Lucida Grande'; font-size: 15px; line-height: 70px; padding: 15px 20px; -webkit-transition: color .15s; -moz-transition: color .15s; -o-transition: color .15s; transition: color .15s; } #css98pmenu > ul > li > a:hover { color: #ffffff; } #css98pmenu > ul > li > ul { opacity: 0; visibility: hidden; padding: 16px 0 20px 0; background-color: #fafafa; text-align: left; position: absolute; top: 55px; left: 50%; margin-left: -90px; width: 180px; -webkit-transition: all .3s .1s; -moz-transition: all .3s .1s; -o-transition: all .3s .1s; transition: all .3s .1s; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4); } #css98pmenu > ul > li:hover > ul { opacity: 1; top: 65px; visibility: visible; } #css98pmenu > ul > li > ul:before { content: ''; display: block; border-color: transparent transparent #fafafa transparent; border-style: solid; border-width: 10px; position: absolute; top: -20px; left: 50%; margin-left: -10px; } #css98pmenu > ul ul > li { position: relative; } #css98pmenu ul ul a { color: #323232; font-family: Verdana, 'Lucida Grande'; font-size: 13px; background-color: #fafafa; padding: 5px 8px 7px 16px; display: block; -webkit-transition: background-color 0.1s; -moz-transition: background-color 0.1s; -o-transition: background-color 0.1s; transition: background-color 0.1s; } #css98pmenu ul ul a:hover { background-color: #f0f0f0; } #css98pmenu ul ul ul { visibility: hidden; opacity: 0; position: absolute; top: -16px; left: 206px; padding: 16px 0 20px 0; background-color: #fafafa; text-align: left; width: 180px; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4); } #css98pmenu ul ul > li:hover > ul { opacity: 1; left: 190px; visibility: visible; } #css98pmenu ul ul a:hover { background-color: #cc2c24; color: #f0f0f0; } </style>
Fijamos el CSS de el menú, teniendo este solo nos faltaría el HTML la estructura "li" junto a "has-sub" que es la función desplegable.

El HTML con el listado común solo teniendo en cuenta su clase:
<div id='css98pmenu'>
La lista completa seria esta:
<div id="css98pmenu"> <ul> <li><a href="http://ow.ly/o9g8j'">Inicio</a></li> <li class="has-sub"><a href="http://www.blogger.com/blogger.g?blogID=8944139256652965380#">Despliega</a> <ul> <li class="has-sub"><a href="#">Sub-lista1</a> <ul> <li><a href="#">plista1</a></li> <li class="last"><a href="#">plista2</a></li> </ul> </li> <li class="has-sub"><a href="#">Sub-lista2</a> <ul> <li><a href="#">plista1</a></li> <li class="last"><a href="#">plista2</a></li> </ul> </li> </ul> </li> <li><a href="#">descargas</a></li> <li class="last"><a href="http://ow.ly/o9g8j">998pow</a></li> </ul> </div>

Con esto terminamos la instalación del menú, realmente sencillo! con pasos claros.
Nos apoyarías siguiéndonos en las redes sociales de el sitio, estando así al tanto de próximos tutoriales, ya saben habrá más del proyecto plan css3 en menúes estate atento.

¿Te gusto el tutorial? → Siguenos en nuestras redes sociales para más!. 

Comentar es Agradecer.

¡Compártelo!

Tweet