(Blogger) Afficher un menu coulissant

Voici un menu coulissant aux bords arrondis. Son installation nécessite la possibilité de mettre du javascript sur le blog, ce qui est le cas des blogs Blogger. Il n'est pas très difficile à installer et assez joli.

Ayant plusieurs programmes en javascript sur la page, j'ai dû mettre le menu sur un page différente pour qu'il fonctionne parfaitement : Le menu coulissant.

Voici les codes à copier et à coller en HTML, à la suite :

Le code javascript

<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
    $("#firstpane p.menu_head").click(function()
    {
        $(this).css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqtJjXl7YWb5sWVfC4pM2twc3mXkdNbcDl3dSFMOUoFregDh1mqYuF3uC-fA_k1hNSLSCWOJKkj9CvMHfZomuVwEd268Feh1f7V1yxlwvG6FYd8pBlT8X7p0KWDLaOj0v9446ywn4wBt4/s1600/down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
           $(this).siblings().css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Mp2JYqsz5z47iVpKJf6hwdhnsLQCVroJVmyQzKZN7btzt_eqk66LMaKbxZjtCiB683ROBt9o4Urp9qLGTH4_j_ib6-yoOMGS5YITYnhKpVp0X_x1UlHXU2G0VHonp24wUKWCu4oMaA0/s1600/left.png)"});
    });
    //slides the element with class "menu_body" when mouse is over the paragraph
    $("#secondpane p.menu_head").mouseover(function()
    {
         $(this).css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqtJjXl7YWb5sWVfC4pM2twc3mXkdNbcDl3dSFMOUoFregDh1mqYuF3uC-fA_k1hNSLSCWOJKkj9CvMHfZomuVwEd268Feh1f7V1yxlwvG6FYd8pBlT8X7p0KWDLaOj0v9446ywn4wBt4/s1600/down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
         $(this).siblings().css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Mp2JYqsz5z47iVpKJf6hwdhnsLQCVroJVmyQzKZN7btzt_eqk66LMaKbxZjtCiB683ROBt9o4Urp9qLGTH4_j_ib6-yoOMGS5YITYnhKpVp0X_x1UlHXU2G0VHonp24wUKWCu4oMaA0/s1600/left.png)"});
    });
});
</script>

Le CSS

<style type="text/css">
.menu_list {width: 260px;}
.menu_head {padding: 5px 10px;cursor: pointer;position: relative;    margin:1px;font-weight:bold;color:black;background: #C4C4AD url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Mp2JYqsz5z47iVpKJf6hwdhnsLQCVroJVmyQzKZN7btzt_eqk66LMaKbxZjtCiB683ROBt9o4Urp9qLGTH4_j_ib6-yoOMGS5YITYnhKpVp0X_x1UlHXU2G0VHonp24wUKWCu4oMaA0/s1600/left.png) center right no-repeat;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-goog-ms-border-top-left-radius: 10px;
-goog-ms-border-top-right-radius: 10px;
-goog-ms-border-bottom-left-radius: 10px;
-goog-ms-border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;}
.menu_body {display:none;}
.menu_body a{ display:block;color:#767468;background-color:#FAF8F1;
  padding-left:30px; text-decoration:none;}
.menu_body a:hover{ color: #000000; text-decoration:underline;}
</style>

Le menu

<div style="float:left" >
  <div id="firstpane" class="menu_list">
        <p class="menu_head">TITRE 1</p>
        <div class="menu_body">
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
        </div>
        <p class="menu_head">TITRE 2</p>
        <div class="menu_body">
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
        </div>
          </div>
</div>

Passons à la personnalisation du contenu du menu.

Les titres

<p class="menu_head">TITRE 1</p>
<p class="menu_head">TITRE 2</p>

et les liens

<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>

Si vous désirez ajouter un étage, vous rajoutez le groupe suivant :

 <p class="menu_head">TITRE</p>
        <div class="menu_body">
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
        </div>

Et maintenant, personnalisons le CSS :

La largeur du menu

.menu_list {width: 260px;}

La couleur de la police de l'entête

color:black;

La couleur du fond de l'entête 

#C4C4AD

La couleur des liens 

color:#767468;

La couleur du fond des liens 

background-color:#FAF8F1;

La couleur des liens au survol 

color: #000000;