web-dev-qa-db-fra.com

Convertir WP Menu vers un navigateur déroulant pour mobile

Je travaille sur un projet wp avec le thème responsive.

J'ai un menu de navigation à un seul niveau en haut du site que je souhaite changer en balise Sélectionner une option pour les navigateurs mobiles (petits écrans) avec des options pour les éléments de navigation qui sont beaucoup plus faciles à sélectionner dans un site mobile. Ainsi, le menu UL LI sera remplacé par une balise Selection- Option pour mobile.

Cependant, je suis incapable de comprendre comment changer le menu wp en une liste déroulante d'options de sélection.

menusmobileresponsive
1
Krunal

Voici ce que j'ai rassemblé à partir de différents articles/thèmes:

fichiers à modifier:

functions.php

header.php

style.css

js (créer le dossier "js" dans le répertoire racine du thème)

Le Javascript: 

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

enregistrez sous custom.js et placez-le dans le dossier js du répertoire du thème.

Le fichier functions.php:

Ouvrez votre fichier themes functions.php et localisez le code qui met en file d'attente tous les styles ou scripts existants et ajoutez ceci à l'init:

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

. ajoutez cette ligne à Si votre thème ne se met pas en file d'attente, ajoutez ceci à votre fichier 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');

Le fichier header.php:

Remplacez/ajoutez l'id ou la classe css wp-nav actuelle comme suit:

<nav>...Your themes navigation code here</nav>

Le CSS: 

@media only screen and (min-width: 480px) {
/* == INTERMEDIATE: 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;
}
/* == INTERMEDIATE: IE Fixes == */
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;
}
}

Ajustez le style css à votre convenance.

1
Jeremy Jared

Si votre menu comprend des enfants, le code suivant fonctionne bien (à la place du javascript ci-dessus)

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"    : "Go to...",
    }).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("- "))
     }
 });
});
1
Nathanial Hesse

utilisez simplement ce plugin. C'est mieux qu'un simple menu déroulant

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

0
Nirmal Ram