Comunidad de diseño web y desarrollo en internet online

Personalizar wp_nav_menu() en Wordpress

Citar            
MensajeEscrito el 04 Jul 2015 04:56 pm
Buenas... Necesitaría saber como configurar wp_nav_menu() para ..

1. Meter código html dentro del ul de la navegación.
2. Añadir clases a los li

Os adjunto el código

Código :

      <!-- Esta es la función que estaba creando  -->

      <?php wp_nav_menu(array(
            'theme_location'=>'nav-top',
            'menu'=>'nav-top',
            'container'=>'nav',      
            'container_class'=>'container90 navTop',
            'menu_class'=>'horizontalList wrapper90',
            

            ));
      ?>

      <!-- Esta es la navegacion que quiero crear con la función -->

      <nav class="container90 navTop">
         <ol class="horizontalList wrapper90">

            <!-- Este es un elemento que he creado para hacer responsive
            la navegacion sólo con css y nada de javascript -->
            <!-- Este es uno de los PROBLEMAS -->

            <label for="checkboxNavTop" class="btnNavTop">
               <li class="icon-menu hidden "></li>
            </label>
            <input type="checkbox"   id="checkboxNavTop"class="checkNavTop hidden  ">
            
            <!-- ===================================================== -->

            <li class="itemPrimary"><a href="index.php">INICIO</a></li>
            <li class="itemPrimary"><a href="empresa.php">EMPRESA</a></li>
            <li class="itemPrimary"><a href="servicios.php">SERVICIOS</a></li>
            <li class="itemPrimary">PRODUCTOS
               <div class="MenuSecundary">

                  <ul class="colMenuSecundary">
                     <img src="<?php bloginfo('template_directory');?>/img/navtop/secundaryMenu/img1.jpg" alt="" class="imgMenuSecundary">
                     <img src="<?php bloginfo('template_directory');?>/img/navtop/secundaryMenu/img2.jpg" alt="" class="imgMenuSecundary">
                  </ul>
                  <ul class="colMenuSecundary">
                     <li class="itemMenuSecundary "><a href="sillas.php">Sillas</a></li>
                     <li class="itemMenuSecundary"><a href="sillones.php">Sillones</a></li>
                     <li class="itemMenuSecundary"><a href="modulos.php">Módulos</a></li>
                     <li class="itemMenuSecundary"><a href="modulos.php">Mesas</a></li>
                     <li class="itemMenuSecundary"><a href="taburetes.php">Taburetes</a></li>
                     <li class="itemMenuSecundary"><a href="rotomoldeo.php">Rotomoldeo</a></li>
                  </ul>
                  <ul class="colMenuSecundary">
                     <li class="itemMenuSecundary"><a href="tumbonas.php">Tumbonas</a></li>
                     <li class="itemMenuSecundary"><a href="parasoles.php">Parasoles</a></li>
                     <li class="itemMenuSecundary"><a href="complementos.php">Complementos</a></li>
                     <li class="itemMenuSecundary"><a href="taburetes.php">Tableros</a></li>
                     <li class="itemMenuSecundary"><a href="armazones.php">Armazones</a></li>
                  </ul>
               </div>   
            </li>
            <li class="itemPrimary"><a href="contacto.php">CONTACTO</a></li>
            
         </ol>
      </nav>
   

Por sergiocastilla

40 de clabLevel



 

chrome
Citar            
MensajeEscrito el 16 Ago 2015 03:40 am
Bien. lo de meter HTML dentro de un <ul> en esa función wordpress, CREO, que no se puede...
pero lo del <li> ya es algo mas fácil.. para añadir la clase "itemPrimary".. ve a tu archivo css y usa algo como esto

Código :

ul.miClase > li{
   propidedad: valor;
}


con eso te puede funcionar sin afectar los otros elementos dentro de ese <ul>

para añadir clases a los submenus ya puede ser otra cosa... pueden existir otras maneras, pero yo, usaria jquery con el siguiente codigo

Código :

$('ul.miClase > li.miClase > ul > li').addClass( "clase-submenu" );


Esto tienes que colocarlo antes de la etiqueta <body>

Avisame si te funciona. Saludos.

Por franqgeek

48 de clabLevel



Genero:Masculino  

Desarrollador Web

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.