Comment utiliser wp_nav_menu pour créer un menu déroulant de sélection?

Question

Comment utiliser wp_nav_menu pour créer un menu déroulant de sélection?

- 22
- 46192 2011-09-01
J'utilise ce qui suit dans lafonction wp_nav_menu pour créer unmenu déroulant de sélectionoù chaque élément demenuest une option dans la liste déroulante de sélection ...

'items_wrap' => '<select>%3$s</select>' 'before' => '<option value="">' 'after' => '</option>'

Comment ajouter la valeur du lien dans la déclaration 'before'?Y a-t-il unemeilleurefaçon deprocéder?Je connais wp_dropdown_pages ,mais celane fonctionnepas carje souhaite que les utilisateurspuissentcontrôler lemenu depuis lapage "Menus".
I'm using the following inside the wp_nav_menu function to create a select dropdown menu where each menu item is an option in the select dropdown...

'items_wrap' => '<select>%3$s</select>' 'before' => '<option value="">' 'after' => '</option>'

How do I add the link value in the 'before' declaration? Is there a better way to go about this? I know about wp_dropdown_pages, but that doesn't work because I want users to be able to control the menu from the "Menus" page.
dropdown select menus

3 réponses

votes

0

2016-03-03

J'aitrouvé cela utile:

Vouspouvez suivretoutes les réponsespour simplifier lemenu déroulant du code CSS.

Ajouter une classe parentpour les éléments qui ont un sous-menu
ajouter la classe depth (profondeur0,profondeur1,profondeur2 ...)

ajoutez àfunction.php votrethème

La classe

 class DD_Wolker_Menu extends Walker_Nav_Menu {
    function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ){
        $GLOBALS['dd_children'] = ( isset($children_elements[$element->ID]) )? 1:0;
        $GLOBALS['dd_depth'] = (int) $depth;
        parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
    }
}
add_filter('nav_menu_css_class','add_parent_css',10,2);
function  add_parent_css($classes, $item){
     global  $dd_depth, $dd_children;
     $classes[] = 'depth'.$dd_depth;
     if($dd_children)
         $classes[] = 'parent';
    return $classes;
}

maintenant dans header.php

 wp_nav_menu( array( 'container_class' => '','container' => '',  'menu' => 'header-menu', 'walker'=> new DD_Wolker_Menu ) );

header-menu remplacépar lenom de votremenu

Unexemple de code CSSpeut être le

 #menu-header-menu{
    margin: 0;
    padding: 0;
}
#menu-header-menu  ul{

}

#menu-header-menu> li{
    display: inline;
    margin-left: 1.618em;
}
#menu-header-menu  li{
    list-style: none;
}
#menu-header-menu  li a{
    text-decoration: none;
    font-size:  1em;
    font-family:    'Lato',Helvetica,Arial,sans-serif ;
    letter-spacing: 1px;
}
#menu-header-menu li.parent::after{
    content:'+';
}

#menu-header-menu  .sub-menu {
   display: none;
   position: absolute;
   background-color: #fff;
}

#menu-header-menu  li:hover>.sub-menu{
    display: inline;
    width: auto;
    height: auto;
    border: solid 1px #BBBBBB;
    z-index: +1;
}

où #menu-header-menu -identifie la liste ULprincipale (vous devez également lamettre àjour)

I have found that useful:

You can follow any responses to simplify css code dropdovn menu.

Add a class parent for items that have a submenu
add depth class (depth0 , depth1, depth2 ...)

add to function.php your theme

class DD_Wolker_Menu extends Walker_Nav_Menu {
    function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ){
        $GLOBALS['dd_children'] = ( isset($children_elements[$element->ID]) )? 1:0;
        $GLOBALS['dd_depth'] = (int) $depth;
        parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
    }
}
add_filter('nav_menu_css_class','add_parent_css',10,2);
function  add_parent_css($classes, $item){
     global  $dd_depth, $dd_children;
     $classes[] = 'depth'.$dd_depth;
     if($dd_children)
         $classes[] = 'parent';
    return $classes;
}

now in header.php

wp_nav_menu( array( 'container_class' => '','container' => '',  'menu' => 'header-menu', 'walker'=> new DD_Wolker_Menu ) );

header-menu replaced by the name of your menu

CSS example code may be the

#menu-header-menu{
    margin: 0;
    padding: 0;
}
#menu-header-menu  ul{

}

#menu-header-menu> li{
    display: inline;
    margin-left: 1.618em;
}
#menu-header-menu  li{
    list-style: none;
}
#menu-header-menu  li a{
    text-decoration: none;
    font-size:  1em;
    font-family:    'Lato',Helvetica,Arial,sans-serif ;
    letter-spacing: 1px;
}
#menu-header-menu li.parent::after{
    content:'+';
}

#menu-header-menu  .sub-menu {
   display: none;
   position: absolute;
   background-color: #fff;
}

#menu-header-menu  li:hover>.sub-menu{
    display: inline;
    width: auto;
    height: auto;
    border: solid 1px #BBBBBB;
    z-index: +1;
}

where #menu-header-menu - id the main UL list (you need to update that as well)

- -1
- 2012-08-02
Leplugin
Dropdown Menus répond à la question:wp_nav_menune peutpas être utilisépour créer unmenu déroulant de sélection,alors que lepluginfournit unefonction astucieuse dropdown_menu() quifait letravail admirablement.

Dropdown Menus plugin does answer the question: wp_nav_menu can't be used to create select menu dropdown, whereas plugin provides nifty dropdown_menu() function that does the job admirably.

onetrickpony · Accepted Answer · 2011-09-01

25

2011-09-01

Vousne pouvezpasfaire cela avec wp_nav_menu,carilgénère des éléments de listeet vousgénérerez unbalisageinvalide avec votre code.

Essayezplutôt d'utiliser wp_get_nav_menu_items () .

Une solution rapidepour unmenu déroulant avec unmarcheurpersonnalisé:

La classe

 class Walker_Nav_Menu_Dropdown extends Walker_Nav_Menu{

    // don't output children opening tag (`<ul>`)
    public function start_lvl(&$output, $depth){}

    // don't output children closing tag    
    public function end_lvl(&$output, $depth){}

    public function start_el(&$output, $item, $depth, $args){

      // add spacing to the title based on the current depth
      $item->title = str_repeat("&nbsp;", $depth * 4) . $item->title;

      // call the prototype and replace the <li> tag
      // from the generated markup...
      parent::start_el(&$output, $item, $depth, $args);
      $output = str_replace('<li', '<option', $output);
    }

    // replace closing </li> with the closing option tag
    public function end_el(&$output, $item, $depth){
      $output .= "</option>\n";
    }
}

Dans vosmodèles,utilisez-le comme ceci:

 wp_nav_menu(array(
  'theme_location' => 'primary', // your theme location here
  'walker'         => new Walker_Nav_Menu_Dropdown(),
  'items_wrap'     => '<select>%3$s</select>',
));

You can't do this with wp_nav_menu, because it outputs list items, and you'll generate invalid markup with your code.

Try using wp_get_nav_menu_items() instead.

A quick solution for a drop down menu with a custom walker:

class Walker_Nav_Menu_Dropdown extends Walker_Nav_Menu{

    // don't output children opening tag (`<ul>`)
    public function start_lvl(&$output, $depth){}

    // don't output children closing tag    
    public function end_lvl(&$output, $depth){}

    public function start_el(&$output, $item, $depth, $args){

      // add spacing to the title based on the current depth
      $item->title = str_repeat("&nbsp;", $depth * 4) . $item->title;

      // call the prototype and replace the <li> tag
      // from the generated markup...
      parent::start_el(&$output, $item, $depth, $args);
      $output = str_replace('<li', '<option', $output);
    }

    // replace closing </li> with the closing option tag
    public function end_el(&$output, $item, $depth){
      $output .= "</option>\n";
    }
}

In your templates use it like this:

wp_nav_menu(array(
  'theme_location' => 'primary', // your theme location here
  'walker'         => new Walker_Nav_Menu_Dropdown(),
  'items_wrap'     => '<select>%3$s</select>',
));

Enfait,lorsque vous utilisez lapartie "items_wrap",cela supprime les éléments de la liste,donc lebalisageest correct.Je vais vérifier le lien cependant.Merci!

Actually, when using the "items_wrap" part, that removes the list items, so the markup is ok. I'll check out the link though. Thanks!
- 1
- 2011-09-01
- Chris Molitor
oui,mais celane gèrepas les «
»imbriqués :)
yes, but that doesn't handle the nested `
`s :)
- 0
- 2011-09-01
- onetrickpony
C'est vrai :-)

It actually does :-)
- 0
- 2011-09-01
- Chris Molitor
Selon la [source] (http://core.trac.wordpress.org/browser/branches/3.2/wp-includes/nav-menu-template.php#L17),cen'estpas le cas,sauf si vous utilisez unmarcheurpersonnalisé ...

According to the [source](http://core.trac.wordpress.org/browser/branches/3.2/wp-includes/nav-menu-template.php#L17) it doesn't, unless you're using a custom walker...
- 1
- 2011-09-01
- onetrickpony
Celafonctionne-t-il ounon?

Does this work or not?
- 0
- 2011-12-13
- chrisjlee
@OneTrickPony - comment suggéreriez-vous d'implémenter unbouton de sélection avec cetteméthode?

@OneTrickPony - how would you suggest implementing a select button with this method?
- 0
- 2012-02-27
- Travis Northcutt
Vousne savezpas ce que vousentendezparbouton de sélection?Un lien avec unmenu déroulant?

Not sure what do you mean by select button? A link with a dropdown menu?
- 0
- 2012-02-28
- onetrickpony
Ce queje veux dire,c'est qu'en utilisant ce code,laboîte de sélection apparaît,mais rienne sepasse lorsque vous sélectionnez un élément.Commentimplémenteriez-vous unbouton quienvoie l'utilisateur à lapage/à l'élément demenu sélectionné?Capture d'écran: http://f.cl.ly/items/3T3t250Y04031J2o2L1l/Image%202012-03-06%20at%201.30.03%20PM.png

What I mean is, using this code, the select box shows up, but nothing happens when you select an item. How would you implement a button that sends the user to the selected page/menu item? Screenshot: http://f.cl.ly/items/3T3t250Y04031J2o2L1l/Image%202012-03-06%20at%201.30.03%20PM.png
- 0
- 2012-03-06
- Travis Northcutt
soit avecjavascript,en utilisant l'événement [onchange] (http://stackoverflow.com/a/5150421/376947),soitencapsulez-le dans unformulaireet ajoutez unbouton d'envoi,et gérez vous-même la redirectionpendant letraitement duformulaire

either with javascript, using the [onchange](http://stackoverflow.com/a/5150421/376947) event, or wrap it in a form and add a submit button, and handle the redirection yourself during form processing
- 0
- 2012-03-08
- onetrickpony
Lemarcheurfonctionne-t-il??Iln'affichepas la liste déroulante avec lethèmepar défaut

Does the walker work?? It doesn't show dropdown box with default theme
- 0
- 2012-06-16
- tamilsweet
Oui,çamarche.Fonctionne àpartir du 24novembre 2012. Coupezet collez lapartie "wp_nav_menu (array (..." dans votrethème,où vous voulez que la liste déroulante apparaisse. NE la laissez PAS dans lefichierfunctions.php. Si vous lefaites,la liste déroulantefinirapar apparaître lorsquefunctions.phpest appeléet ilpeut donc apparaîtreen haut du contenu réel,ce quin'estpas souhaitable. Copiez simplement lafonction dans lefichierfunctions.phpet copiez wp_nav_menu où vous voulez qu'il apparaisse,enregistrez les deuxfichiers& recharger lapage. Cela devrait lefaire. Etj'utilise la version WP3 +,alors assurez-vous demettre àjour votre version WP. Celapeut NE PASfonctionner sur une versionplus ancienne.

Yes, it does work. Working as of Nov 24, 2012. Cut & paste the "wp_nav_menu(array( ..." part in you theme, where you want the dropdown to appear. DO NOT leave it in functions.php file. If you do, the dropdown will end up appearing when functions.php is called & so it may appear at the top of the actual content, which is undesirable. So simply copy the function to functions.php file & copy wp_nav_menu where you want it to appear, save both files & reload page. That should do it. And I am using WP3+ version, so make sure you update your WP version. It may NOT work on older version.
- 0
- 2012-11-24
- Devner
J'ai dû remplacer ce "parent :: start_el ($ output,$item,$ depth,$ args);"pour ce "parent :: start_el (& $ output,$item,$ depth,$ args);"pour lefairefonctionner.

I had to replace this "parent::start_el($output, $item, $depth, $args);" for this "parent::start_el(&$output, $item, $depth, $args);" to get it working.
- 0
- 2014-09-11
- dlopezgonzalez