Menú horizontal de navegación con CSS

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

Menú horizontal de navegación con CSS3

Buenas, vengo con el seguimiento de lo que hable en el tutorial pasado, sobre el plan CSS3 de los menúes, decidí ocultar el sidebar en esta entrada, ahora bien el menú de este tutorial muy diferente al anterior este es horizontal y no tiene la función desplegable, para mi opinión no la necesitaría por el gran diseño que posee, el menú lo reconoceremos por css98pmenu todos los los estilos tendrán intercalados 98p o 98pw. 

Les platicare un poco sobre este, como bien sabemos es puro CSS, el diseño se base en background-image más no en background-color, por lo que debí adaptarlo ya que de por si el defecto era ejemplo: (color.png) la función desplegable fue eliminada debido al mismo diseño de el menú. 

Sin más preámbulos les dejare una previa de este menú:

• Inicio
• lista2
• lista3
• 998pow

Sin duda este llega a mi top 10 de tutoriales, como vieron un gran menú que puedes añadir ya a tu web o blog.

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> /* Menu CSS */#css98pmenu, #css98pmenu ul, #css98pmenu ul li, #css98pmenu ul li a { padding: 0; margin: 0; line-height: 1; font-family: 'Capriola', sans-serif; } #css98pmenu:before, #css98pmenu:after, #css98pmenu > ul:before, #css98pmenu > ul:after { content: ''; display: table; } #css98pmenu:after, #css98pmenu > ul:after { clear: both; } #css98pmenu { zoom: 1; height: 69px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgADV7pAAeclX94-cTbrkAnUMeiiNCKCx1qIPxxNN8P6raGCAURpokfHXVAZRSXnm03CMpzUXcTYkJa_E3KelKK7rhzzofaFk1HYDLgdY-aovZLLEKgFotR8a115WTiSB9SB76fuIeZBDA/s320/bottom-bg.png) repeat-x center bottom; border-radius: 2px; width: auto; } #css98pmenu ul { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcVIg8r1PsGSVtFa_TQoHXm0ArpQHZYCbQ62tJ6rFOaqD9JVkJjmpcGHULF27rfJSxlF4hhrI8YSkO_U5BlLmVc5HdZWB3wtp7PLSn3nrtvTmMQpNQqxkAdmEOEgwxyJ3o50jTSlcDRmc/s320/nav-bg.png) repeat-x 0px 4px; height: 69px; } #css98pmenu ul li { float: left; list-style: none; } #css98pmenu ul li a { display: block; height: 37px; padding: 22px 30px 0; margin: 4px 2px 0; border-radius: 2px 2px 0 0; text-decoration: none; font-size: 15px; color: white; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75); font-weight: 400; opacity: .9; } #css98pmenu ul li:first-child a { margin: 4px 2px 0 0; } #css98pmenu ul li a:hover, #css98pmenu ul li.active a { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcWsG5-_apIWLEf72f0udLiij5vpQmq0XpMTLtHlRL4CbgurYpDv1to4yJiW2Hkg7MxK6FW0ymWvlo5KuQMML5enioNcxc__YFGv4V9fVoJoKuRyJSFVE8Md9HLsA9RwwhCON1v2Hqy2c/s320/color.png) center bottom; display: block; height: 37px; margin-top: 0px; padding-top: 26px; color: #4e2f11; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.35); opacity: 1; } </style>
Fijamos el CSS de el menú, teniendo este solo nos faltaría el HTML la estructura "li" ya que el paso de insertar las imágenes ya lo concrete.

El HTML con el listado común solo teniendo en cuenta su clase:


<div id='css98pmenu'>

La lista completa seria:

<div id='css98pmenu'> <ul> <li class='active'><a href='http://ow.ly/o9g8j'><span>inicio</span></a></li> <li><a href='#'><span>lista2</span></a></li> <li><a href='#'><span>lista3</span></a></li> <li class='last'><a href='http://ow.ly/o9g8j'><span>998pow</span></a></li> </ul> </div>
Con esto terminamos la instalación del menú, realmente sencillo! con pasos claros.
Les doy los derechos del menú a cssmenu la adaptación fue por Daniel Galindo Paolini, mi persona, la adaptación consistió en incorporar las imágenes, añadir las lineas de style y las clases.
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