web-dev-qa-db-fra.com

Masquer et afficher les sous-pages de menu

Je suis désolé si cela n’est pas clair, mais j’utilise Wordpress traduit, je traduis donc certains noms.

J'ai des pages dans le menu et quand je clique sur un élément, il va à cette page. Mais j'ai besoin de f. e. Élément de page comportant des sous-pages SubItem1 et SubItem2. Donc, dans le menu, l'élément serait affiché, puis je clique sur l'élément; il ne crée pas de lien vers une page, mais affiche plutôt les éléments suivants:

  • Article
    • SubItem1
    • SubItem2

À partir de là, si je clique sur Sous-élément, je vais accéder à une page. Je peux mettre plus haut mais ça ne fait rien.

Y a-t-il un bidouillage, un truc pour ça? Ou peut-être un plugin? Je connais peu jQuery, cela pourrait donc aussi aider.

Et qu'en est-il de cela avec Archive? Première exposition 2011 et 2012 puis si je clique sur une année qui obtient des mois pour cette année et après cela, je reçois des archives pour le mois/année exact.

Merci, j'espère que c'est clair ce que je veux :)

Edit Ceci est dans ma barre latérale:

<!-- Pages -->
<div id="navigation">
  <li id="sb-pages">
    <h2>Stránky</h2>
        <ul>
    <?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
        </ul>
    </li>
 </div>

Voici ce qui est créé en HTML lorsque la page est rendue:

  <!-- Pages -->
<div id="navigation">
  <li id="sb-pages">

    <h2>Stranky</h2>
        <ul>
    <li class="page_item page-item-37 current_page_item"><a href="http://www.hasicisvitavka.cz/">Uvod</a></li>
    <li class="page_item page-item-12"><a href="http://www.hasicisvitavka.cz/historie/">Historie</a></li>
    <li class="page_item page-item-32"><a href="http://www.hasicisvitavka.cz/technika/">Technika soucasna</a></li>
    .
    .
    .
        </ul>
    </li>
 </div>
menusnavigation
2
Bibo

Je pense que vous demandez comment créer un menu avec des menus déroulants cliquables plutôt que commutables. Voici donc un exemple très simple de ce que je pense que vous voulez: http://jsfiddle.net/pk5Bx/

HTML

<div id="navigation">
    <ul>
        <li class="current_page_parent"><a href="#">Top level 1</a>
            <ul>
                <li><a href="#">Submenu 1</a></li>
                <li><a href="#">Submenu 2</a></li>
            </ul>
        </li>
        <li class="current_page_parent"><a href="#">Top level 2</a>
            <ul>
                <li><a href="#">Submenu 1</a></li>
                <li><a href="#">Submenu 2</a></li>
            </ul>
        </li>
    </ul> 
</div>​​​​​

Javascript/jQuery

 $(function() {
     $("#navigation .current_page_parent").click(function(){
         $(this).children('ul').toggle();
     })
 });​

CSS

#navigation ul li {
    display: inline-block;
}    
#navigation ul ul {
    display: none;
}​

EDIT

Utilisation de HTML similaire à celui que wp_list_pages() génère.

2
developdaly

J'ai fait quelque chose de similaire uniquement avec CSS. La seule différence est qu'en cliquant sur l'élément de menu parent, vous voyez la page parent. Voir ici: http://mbccopnetwork.org/mbccop-projects

Dans mon cas, ce n'était pas un problème, car vous pouvez y lister les descriptions des sous-pages ou simplement dire quelque chose comme: "s'il vous plaît, sélectionnez une sous-page". D'autre part, vous ajoutez seulement quelques lignes au fichier CSS et vous avez terminé - pas de JavaScript.

Si vous l'aimez, je peux vous fournir le code CSS (cela fonctionne avec la liste de pages/catégories WP standard).

0
Tomas M.

Je pense que vous feriez mieux d'utiliser jQuery pour cela. vous pouvez trouver l'exemple que j'ai créé pour vous ici .

0
Hamed Momeni