jueves, 22 de agosto de 2013

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ú:


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:



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:




La lista completa seria:


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!


    0 comments :

    Blogger Template by Daniel Galindo
    })();