web-dev-qa-db-fra.com

Comment créer un menu déroulant comme dans le thème vingt onze?

J'aime beaucoup la solution du menu déroulant de vingt onze thèmes:

http://twentyelevendemo.wordpress.com/

et voudrait en créer un similaire mais je ne peux pas comprendre comment cela fonctionne, ou est-ce basé sur du code existant pour les menus déroulants?

Existe-t-il un code source pouvant être utilisé ou quelqu'un peut-il expliquer le principe qui le sous-tend?

Je sais qu'Internet regorge de solutions js et non-js, j'en ai même fabriquées moi-même, mais rien ne se rapproche de ce menu, l'aide est donc appréciée :)

theme-twenty-tendropdowntheme-twenty-eleven
3
CodeVirtuoso

Je faisais exactement cela récemment. Vous ne savez pas à quel point vous êtes avancé et vous connaissez peut-être déjà certaines de ces choses.

J'ai trouvé cette vidéo pour être très bon (+ c'est la deuxième partie)

Je pense que l’une des pièces originales de la recherche effectuée était this

Je pense que Twenty Eleven utilise également le plugin superfish jquery

Comme l'a dit l'autre affiche, vous pouvez trouver le code vingt-onze lui-même quelque part dans les fichiers de thème.

1
byronyasgur

Voici un extrait de code que j'utilise pour démarrer mes projets:

La première étape consiste à ajouter du code au fichier functions.php. C'est ce qui permettra la navigation personnalisée WordPress. Les contrôles seront dans Apparence> Menu une fois que vous avez terminé. Code pour functions.php: 

<?php
add_action( 'init', 'register_my_menus' );
function register_my_menus() {
register_nav_menus(
array(
    'main' => __( 'main' ),
    'secondary-menu' => __( 'Secondary Menu' ),
    ));
}
?>

Le code ci-dessus permet deux menus. Je vais vous montrer comment en ajouter un, et si vous le souhaitez, vous pouvez utiliser la même méthode pour en ajouter un deuxième où vous le souhaitez.

L'étape suivante consiste à ajouter le code au fichier header.php. Notez ci-dessus que le premier menu du tableau est appelé principal. C'est ce que nous allons utiliser pour placer le menu dans le header.php.

Voici le code pour le header.php: 

<div id="menu" class="menu-center">
    <?php wp_nav_menu( array( 'theme_location' => 'main' ) ); ?>
</div>

Cela devrait être placé dans votre <div id="header"> div (ce n'est pas obligatoire, mais c'est l'endroit le plus courant pour le code.

La dernière étape consiste à ajouter du code CSS au style du menu et à le rendre "déroulant" au lieu d’un ensemble de liens à plusieurs niveaux.

Le code CSS: 

ul.menu,ul.menu ul,ul.menu li,ul.menu a {
display:block;
margin:0;
padding:0;
}

ul.menu ul {
display:none;
}
ul.menu li:hover {
z-index:999;
}
ul.menu li:hover > ul {
display:block;
position:absolute;
float:left;
}
ul.menu li {
float:left;
width:auto;
}
ul.menu ul li {
float:left;
width:190px;
}
ul.menu ul li ul {
float:left;
width:190px;
position:absolute;
left:100%;
top:0;
}
ul.menu-ver,ul.menu-ver ul {
width:14em;
}

div.menu-center ul.menu {
float:left;
position:relative;
left:50%;
}

div.menu-center ul.menu li {
position:relative;
left:-50%;
}

div.menu-center ul.menu li li {
left:auto;
}


ul.menu li a {
border-bottom:1px outset ghostwhite;
}

ul.menu li a {
padding:8px 12px 10px;
}

ul.menu li a:link,ul.menu li a:hover,ul.menu li a:visited,ul.menu li a:active {
text-decoration:none;
border-bottom:1px outset black;
}


ul.menu li {
background: #45484d;
background: -moz-linear-gradient(top, #45484d 0%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000));
background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%);
background: -o-linear-gradient(top, #45484d 0%,#000000 100%);
background: -ms-linear-gradient(top, #45484d 0%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 );
background: linear-gradient(top, #45484d 0%,#000000 100%);
}
.menu-center {
float:right;
margin-right:95px;
}

ul.menu li a{
color:ghostwhite;
}
ul.menu li a:hover {
background: #efefef;
background: -moz-linear-gradient(top, #efefef 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #efefef 0%,#ffffff 100%);
background: -o-linear-gradient(top, #efefef 0%,#ffffff 100%);
background: -ms-linear-gradient(top, #efefef 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#ffffff',GradientType=0 );
background: linear-gradient(top, #efefef 0%,#ffffff 100%);
color:black;
}

Vous pouvez jouer avec les CSS pour l’ajuster à votre guise, mais cela devrait vous aider à démarrer.

Édité pour la compatibilité WordPress 3.3:

Après la mise à jour vers la dernière version de WordPress (v3.3), il apparaît que le menu ne fonctionnera pas si votre thème utilise le hook after_setup_theme et que vous utilisez le hook "init" pour enregistrer le menu.

Le correctif:

Pour cet exemple, je vais utiliser le nom yourtheme comme nom_fonction .

Exemple de fichier functions.php:

<?php
if ( ! isset( $content_width ) )
$content_width = 610;
add_action( 'after_setup_theme', 'yourtheme_setup' );
if ( ! function_exists( 'yourtheme_setup' ) ):
function yourtheme_setup() {
  // Adds styles the visual editor (editor-style.css)
  add_editor_style();
  add_theme_support( 'automatic-feed-links' );
  //Register Custom Menu's
    register_nav_menus(
      array(
        'main' => 'main',
        'secondary' => 'secondary',
        )
      );  
  // Add Post Thumbs and Custom Image Sizes
  add_theme_support( 'post-thumbnails', array( 'post' ) );
  // Add support for a variety of post formats
  add_theme_support( 'post-formats', array( 'aside', 'link', 'gallery', 'status', 'quote', 'image' ));
  }
endif; // yourtheme_setup
/**
 * Start the rest of your functions.php file code...
 * 
 */
?>

Consultez le fichier functions.php de TwentyTen Themes pour voir les autres fonctions à inclure dans le hook after_theme_setup.

4
Jeremy Jared