Créer un menu accordéon simple

Menu accordéon simple

Voila comment créer un menu accordéon pour Blogger, mais c'est un peu difficile à faire et à comprendre le fonctionne.
Donc, dans cette article, je vais vous montrer une façon simple de créer le menu l'accordéon, et je vais essayer de vous expliquez comment cela fonctionne. J'espère que vous trouverez utile et vous pouvez créer votre propre base de menus à ce sujet.

En premièrement, il s'agit de la structure HTML du menu :

<div id="first" class="menu_list"> <!--Code for menu starts here-->

        <p class="menu_head">Header-1</p>

        <div class="menu_body">

        <a href="#">Link-1</a>

         <a href="#">Link-2</a>

         <a href="#">Link-3</a>   

        </div>

        <p class="menu_head">Header-2</p>

        <div class="menu_body">

            <a href="#">Link-1</a>

         <a href="#">Link-2</a>

         <a href="#">Link-3</a>   

        </div>

        <p class="menu_head">Header-3</p>

        <div class="menu_body">

          <a href="#">Link-1</a>

         <a href="#">Link-2</a>

         <a href="#">Link-3</a>           

       </div>

  </div>  <!--Code for menu ends here-->

La première div with id=”first” est l'élément de menu à envelopper.

avec la tête du menu "classe" moyenne-têtes de menu ou de gros articles, lorsque la souris cliquez sur nous sur ces point important, les petits objets se déroulant.

< div > avec la classe "menu_body" est l'élément qui Enveloppez les petits dans le menu.

< a > éléments sont de petits éléments dans le menu.

C'est la structure du menu.

Maintenant nous avons besoin de le décorer avec un peu de CSS

<style type="text/css">

body {

    margin: 10px auto;

    font: 75%/120% Verdana,Arial, Helvetica, sans-serif;

}

.menu_list {   

    width: 150px;

}

.menu_head {

    padding: 5px 10px;

    cursor: pointer;

    position: relative;

    margin:1px;

    font-weight:bold;

    background: #eef4d3 url(â�¦..left.png) center right no-repeat;

}

.menu_body {

    display:none;

}

.menu_body a{

  display:block;

  color:#006699;

  background-color:#EFEFEF;

  padding-left:10px;

  font-weight:bold;

  text-decoration:none;

}

.menu_body a:hover{

  color: #000000;

  text-decoration:underline;

  }

</style>

Dans le code CSS ci-dessus :

Body définira la police et le style pour tous.

. Menu_list définir la taille de l'élément avec class = "menu_list" est 150px de largeur.

. Style menu_head ensemble de l'élément avec la classe "menu_head" (articles de grande taille) dans le menu

. Menu_body A et menu_body a: hover définir le style des balises < a > qui sont couverts par élément avec classs "menu_body"

. Menu_body (display: none) permet de masquer l'élément avec id "menu_body" (l'écharpe élément de petits objets). Nous le cacher en premier et l'afficher lorsque clic de souris ou souris sur l'élément de menu Lare.

Maintenant, pour le faire fonctionner, nous avons besoin d'un code jQuery:

<script type="text/javascript" language="javascript" src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function()

{

    //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked

    $("#first p.menu_head").click(function()

    {

        $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");

           $(this).siblings().css({backgroundImage:"url(left.png)"});

    });

   

});

</script>

Le <script type="text/javascript" language="javascript" src="jquery.js"></script> mettra en œuvre le cadre jquery dans le fichier. Après cela, nous pouvons utiliser les fonctions de Jquery.
Dans le script suivant:


$("#first p.menu_head").click(function() ; définir une fontion qui ne fonctionnent que lorsque la page est chargée intégralement.

$(document).ready(function() :  définir une fontion que seul le travail quand un
élément de la classe "menu_head" qui est couverte par élément avec id "première" est cliqué.
(Ou on peut dire, cette ligne définit une fonction qui ne fonctionne que si un élément important dans le menu est cliqué)

La ligne suivante:

$(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");

           $(this).siblings().css({backgroundImage:"url(left.png)"});

$(this) Voici la signification des gros article dans le menu qui est cliqué (élément p avec la classe "menu_head» et couvertes par élément avec id "première", comme nous l'avons mentionné ci-dessus)

. css({backgroundImage:"url(down.png)"}) :  définir l'image d'arrière-plan du point de grands "down.png" (ou ajouter la flèche vers le bas l'élément important de menu)

.next("div.menu_body") : cette ligne se trouve l'élément le plus proche div avec classe "menu_body" au poste important dans le menu (ou on peut dire trouver le film le plus proche élément item petits dans le menu), et sélectionnez-le.

.slideDown(500) se déroulant petit article dans le menu. Cette action aura lieu dans 500 millisecondes

.siblings("div.menu_body") : trouver tous les autres élément div avec classe "menu_body" et les sélectionner.

.slideUp("slow") : glisser vers le haut tous les autres élément div avec classe "menu_body" qui se trouvent dans. Frères et sœurs («div.menu_body"). La vitesse de glissement n'est pas assez rapide.

$(this).siblings().css({backgroundImage:"url(left.png)"}) : cette ligne trouverez tous les autre élément important dans le menu (élément p avec la classe "menu_head" comme on dit ci-dessus) et mis en fond pour les "left.png" (flèche vers la gauche).

Si vous souhaitez glisser vers le haut et le bas du menu lorsque la souris sur la place de cliquer, il suffit de remplacer
    $("#first p.menu_head").click(function()

Avec

  $("#first p.menu_head").mouseover(function()


Pour ajouter ce menu à Blogger, tout d'abord, nous devons ajouter le CSS à votre template, après cela, ajouter de la structure HTML et le dernier est Jquery.

C'est tout pour le menu accordéon, je pense que c'est très simple quand on sait comment ça marche.
Regarder la Demo