Convertir menú de WordPress a un desplegable para móviles

Question

Convertir menú de WordPress a un desplegable para móviles

2 dic 2012, 08:41:47

Vistas: 16.7K

Votos: 1

Estoy trabajando en un proyecto de WordPress con un tema responsive.

Tengo un menú de navegación de un solo nivel en la parte superior del sitio, que quiero convertir en una etiqueta Select Option para navegadores móviles (pantallas pequeñas) con opciones para los elementos de navegación, lo que es más fácil de seleccionar en el sitio móvil. Así que el menú UL LI será reemplazado por una etiqueta Selection-Option para móviles.

Sin embargo, no puedo averiguar cómo cambiar el menú de WordPress a un dropdown de select option.

Krunal

221

menús mobile responsive

Todas las respuestas a la pregunta

Comentarios

Parece muy completo... Lo haré mañana y te actualizaré. Gracias

Krunal

2 dic 2012 13:47:28

Si tu menú incluye elementos hijos, el siguiente código funciona bien (en lugar del javascript anterior):

jQuery(document).ready(function(){
   jQuery('ul:first').attr("id", "MENUID");
   jQuery("ul#MENUID > li:has(ul)").addClass("hasChildren");
   jQuery("ul#MENUID > li:has(ul) > ul > li > a").addClass("isChild"); 
});

jQuery(function() {
    jQuery("<select />").appendTo("nav");
    jQuery("<option />", {
       "selected": "selected",
       "value"   : "",
       "text"    : "Ir a...",
    }).appendTo("nav select");

    jQuery("nav a").each(function() {
       var el = jQuery(this);
       jQuery("<option />", {
           "value"   : el.attr("href"),
           "text"    : el.text(),
           "class"   : el.attr("class")
       }).appendTo("nav select");
    });

    jQuery("nav select").change(function() {
      window.location = jQuery(this).find("option:selected").val();
    });    
 });

 jQuery(document).ready(function() {
   jQuery("nav select option").each(function() {
     var el = jQuery(this);
     if(el.hasClass("isChild")){
       jQuery(el.prepend("- "))
     }
 });
});

Nathanial Hesse

11

3 may 2013 22:46:34

simplemente usa este plugin. Es mejor que un simple menú desplegable

https://wordpress.org/plugins/wp-responsive-menu/

Nirmal Ram

110

5 mar 2014 09:58:31

Jeremy Jared 3.36K · Accepted Answer · 2012-12-02T09:53:49Z

Aquí está lo que he recopilado de diferentes artículos/temas:

Archivos a modificar:

functions.php

header.php

style.css

js (crear carpeta "js" en el directorio raíz del tema)

El Javascript:

jQuery(function() {
      jQuery("<select />").appendTo("nav");
      jQuery("<option />", {
         "selected": "selected",
         "value"   : "",
         "text"    : "Ir a..."
      }).appendTo("nav select");
      jQuery("nav a").each(function() {
       var el = jQuery(this);
       jQuery("<option />", {
           "value"   : el.attr("href"),
           "text"    : el.text()
       }).appendTo("nav select");
      });
      jQuery("nav select").change(function() {
        window.location = jQuery(this).find("option:selected").val();
      });    
     });

Guardar como custom.js y colocar en la carpeta js del directorio del tema.

El archivo functions.php:

Abre tu archivo functions.php del tema y localiza el código que encola los estilos o scripts existentes y añade esto al init:

wp_enqueue_script( 'my_customnav_script', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ) )

Añade esta línea. Si tu tema no tiene sistema de encolado, añade esto a tu archivo functions.php:

function add_themescript(){
  if(!is_admin()){
    wp_enqueue_script( 'my_customnav_script', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ) );
    }
  }
  add_action('init','add_themescript');

El archivo header.php:

Reemplaza/añade el id o clase css actual de wp-nav de la siguiente manera:

<nav>...Aquí el código de navegación de tu tema</nav>

El CSS:

@media only screen and (min-width: 480px) {
/* == INTERMEDIO: Menú == */
#navigation-wrapper, nav ul a, nav ul {
width:75%;
font-size:82%;
}
nav ul {
width:90%;
}
nav a, .next-post a{
float:left;
margin:0 1%;
padding:5px 1%;
margin-bottom:0;
}
nav li:first-child a{
margin-left:0;
}
nav li:last-child  a{
margin-right:0;
}
/* == INTERMEDIO: Correcciones para IE == */
nav ul li{
display:inline;
}
}
nav{
width:100%;
float:left;
background:#e44d26;
margin-bottom:9px;
padding:5px 0px 5px 0px;
}
nav select {
display: none;
}
@media (max-width: 960px) {
nav ul     {
display: none;
}
nav select {
display: inline-block;
}
}

Ajusta los estilos CSS según tus preferencias.