Creación de un menú wordpress con CSS | Adrenalina

Creación de un menú wordpress con CSS

Publicado Por | 28 enero , 2014 | Desarrollo Web, Diseño web | No Comments
css_para_wordpress

El sistema de menús de WordPress es grande: es flexible y permite a los usuarios personalizar fácilmente el diseño de sus menús, incluyendo menús desplegables de varios niveles. Hay una gran cantidad de temas con bonitos menús desplegables, algunos que incluso se alimentan con CSS puro. ¿Alguna vez ha pensado cómo hacerlo con CSS solo?

Este tutorial no va a cubrir la forma de crear una hermoso menú, sino más bien de cómo crear el código CSS de base que se necesita para hacer uno que sea bonito, y también funcional. Vamos a crear un CSS multinivel puro.

Así que vamos hacer la estructura CSS necesario para hacer un menú parecido a este.

menu1

Configuración de nuestro menú

Lo primero que tenemos que hacer es configurar nuestro menú para que podamos apuntar con nuestro código de CSS, independientemente de si un menú de navegación se muestra o  no en las páginas predeterminadas. Para ello, hacemos servir la función wp_nav_menu()  que estará envuelto con un DIV con un id que lo llamaremos main-nav. Tenga en cuenta, el ID puede ser lo que quieras, pero voy a utilizar “#main-nav” a lo largo de este post.

 

<div id="main-nav">
<?php wp_nav_menu(array('theme_location' => 'main_nav', 
'container' => '')); ?>
</div>

Ahora bien, esto no es del todo necesario porque podríamos simplemente especificar un elemento contenedor para la funcion wp_nav_menu(), pero es más fácil que hacer esto y ofrece un poco más de control a la hora de peinar el menú.

He configurado el parámetro de “container” para que esté vacío porque no quiero que el menú de navegación cree un DIV, o cualquier otro tipo de etiqueta.

La estructura de menú de la página por defecto es la siguiente:

<div>
      <ul>
         <li><a href="#">Menu Item</a></li>
         <li><a href="#">Menu Item</a>
              <ul>
                 <li><a href="#">Sub Menu Item</a></li>
                 <li><a href="#">Sub Menu Item</a>
                    <ul>
                       <li><a href="#">Sub Sub Menu Item</a></li>
                       <li><a href="#">Sub Sub Menu Item</a></li>
                    </ul>
                 </li>
             </ul>
          </li>
          <li><a href="#">Menu Item</a></li>
      </ul>
</div>

Menú Básico con CSS

Lo primero que queremos hacer con nuestro CSS es configurar la estructura de menú de nivel superior, vamos a hacer los submenús en un momento. Estoy usando selectores muy generales. Técnicamente sería más eficiente para apuntar a los elementos de menú con los nombres de clases, pero como yo estoy tratando de asegurarme de que mi CSS funciona tanto para el menú de páginas por defecto y la función wp_nav_menu(), usó los selectores HTML generales.

#main-nav      {
        height: 30px; /* configura a la altura 
que desea para su menú */
        margin: 0 0 10px; /* darle un poco de 
espacio*/
}
#main-nav ul   {
        margin: 0; padding: 0; }
#main-nav li   {
        display: block;
        float: left;
        line-height: 30px; /* Esto ha de ser igual 
al #main-nav height */
        height: 30px; /* Esto ha de ser igual 
al #main-nav height */
        margin: 0; padding: 0; /* only needed 
if you don't have a reset */
        position: relative; /* esto es necesario 
con el fin de posicionar los submenús */
}
#main-nav li a {
        display: block;
        height: 30px;
        line-height: 30px;
        padding: 0 15px;
}
#main-nav .current-menu-item a, #main-nav .current_page_item a, #main-nav 
a:hover {
        color: #000;
        background: #ccc;
}

Esta configuración CSS sitúa sus elementos de menú de nivel superior en una fila horizontal, con cada uno de los enlaces que están en “bloque”, se puede hacer clic en el espacio alrededor del enlace, no sólo el texto, esencialmente, hace que los botones de los vínculos, no sólo sean enlaces de texto. Observe también en la última sección que he usado tanto “.current-menu-item” y “.current_page_item”, esto es porque el menú de páginas por defecto y la función wp_nav_menu() asignan diferentes nombres de clase a la página. También he incluido link hover de la lista de selectores en la última sección.

Después de añadir algunos de sus propio CSS, el menú podría ser algo como esto:

menu 

Ahora es el momento de entrar en el estilo del primer nivel de submenús. El segundo nivel (y cualquier nivel) va a ser muy similar a la de este primer nivel del submenú, pero con un par de diferencias.

#main-nav ul ul { /* esto va dirigido a todos los submenús */
        display: none; /* ocultar todos los submenús de la vista */
        position: absolute;
        top: 30px; /* esto debe ser la misma altura que el menú de 
nivel superior - height + padding + borders */
}
#main-nav ul ul li { /* esto va dirigido a todos los submenús */
        float: none; /* sobreescribir menu hasta arriba */
        width: 150px; /* establece el ancho que desea para sus 
submenús. Esto debe coincidir con el valor que pusimos abajo */
}
#main-nav ul ul li a {
        padding: 5px 10px; /* dar a nuestros enlaces del submenú 
un bonito boton */
}

Eso es todo por el estilo submenú básico, aunque aviso que todavía no hemos hecho nada para mostrar los submenús cuando el ratón pase por encima del menú principal. Para hacer eso, tenemos que usar a:hover, así:

#main-nav ul li:hover > ul {
        display: block; /* mostrar submenú cuando el ratón pase 
por encima del menú principal */
}

En primer lugar, he puesto el :hover en el LI y no en la etiqueta A, esto se debe a la etiqueta UL que es un child de la etiqueta LI, y no el vínculo del anclaje. En segundo lugar, tomar nota del hecho de que uso “>” inmediatamente después de :hover. Esto se debe a que sólo deseo seleccionar el submenú.

Después de añadir algunos de sus propio CSS, el menú podría ser algo como esto:

menu1

Ahora es el momento de añadir un par más estilos para cuidar de cualquier submenús de segundo y tercer nivel.

#main-nav ul ul li ul {
        left: 150px; /*  esto debe coincidir con el ancho del menú 
de arriba -- width + padding + borders */
        top: 0; /* esto asegura que el submenú comience 
en consonancia con el menú superior */
}

Hemos terminado. Ahora tenemos un sistema de menú completo con menús desplegables escritos completamente en CSS. No jQuery. Y, por último, los menús ya podían verse así, una vez que se ha agregado el CSS de diseño:

menu2

Una de las mejores cosas de una estructura CSS como ésta es que funciona perfectamente, incluso cuando se habilita animaciones jQuery en ella, sin necesidad de ningún estilo distinto. Lo único que queda por hacer desde aquí es el embellecimiento de su menú. Agregue unos bordes bonitos, colores de fondo o gradientes.

Autor: francis

Estudiamos y analizamos su negocio en profundidad, definimos objetivos y planteamos la estrategia de marketing más adecuada centrándonos en conseguir cada uno de los objetivos propuestos. Solicita Presupuesto Ahora

Uso de cookies

En este sitio web utilizamos cookies propias y de terceros para mejorar nuestros servicios, para que usted tenga la mejor experiencia de usuario y analizar su visita. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.