Convertire il menu WP in un menu a discesa per browser mobile

Question

Convertire il menu WP in un menu a discesa per browser mobile

2 dic 2012, 08:41:47

Visualizzazioni: 16.7K

Voti: 1

Sto lavorando a un progetto WordPress con un tema responsive.

Ho un menu di navigazione a singolo livello nella parte superiore del sito, che vorrei convertire in un tag Select Option per browser mobile (schermi piccoli) con opzioni per gli elementi di navigazione, molto più facili da selezionare nella versione mobile. Quindi il menu UL LI verrà sostituito con un tag Selection-Option per mobile.

Tuttavia, non riesco a capire come convertire il menu wp in un dropdown con select option.

Krunal

221

menu mobile responsive

Tutte le risposte alla domanda

Commenti

Sembra molto completo... Lo farò domani e ti aggiornerò. Grazie

Krunal

2 dic 2012 13:47:28

Se il tuo menu include elementi figli, il seguente codice funziona bene (in sostituzione del javascript precedente)

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"    : "Vai 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 mag 2013 22:46:34

usa semplicemente questo plugin. È meglio di un semplice menu a discesa

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

Ecco quello che ho messo insieme da diversi articoli/temi:

File da modificare:

functions.php

header.php

style.css

js (crea la cartella "js" nella directory principale del tema)

Il Javascript:

jQuery(function() {
      jQuery("<select />").appendTo("nav");
      jQuery("<option />", {
         "selected": "selected",
         "value"   : "",
         "text"    : "Vai 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();
      });    
     });

Salva come custom.js e posizionalo nella cartella js della directory del tema.

Il file functions.php:

Apri il file functions.php del tuo tema e individua il codice che carica gli stili o script esistenti e aggiungi questo all'init:

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

Aggiungi questa riga al file. Se il tuo tema non carica gli script, aggiungi questo al tuo 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');

Il file header.php:

Sostituisci/aggiungi l'attuale id o classe CSS di wp-nav come segue:

<nav>...Il codice di navigazione del tuo tema qui</nav>

Il CSS:

@media only screen and (min-width: 480px) {
/* == INTERMEDIO: Menu == */
#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: Fix per 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;
}
}

Modifica lo stile CSS a tuo piacimento.