8 oct. 2010

(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(http://3.bp.blogspot.com/_RpcwHx8W2XM/TLM-hnja5UI/AAAAAAAAAqE/Hai5u37oJ4o/s1600/down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
           $(this).siblings().css({backgroundImage:"url(http://2.bp.blogspot.com/_RpcwHx8W2XM/TLM-iLyzJuI/AAAAAAAAAqI/mFdXcaiAgxY/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(http://3.bp.blogspot.com/_RpcwHx8W2XM/TLM-hnja5UI/AAAAAAAAAqE/Hai5u37oJ4o/s1600/down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
         $(this).siblings().css({backgroundImage:"url(http://2.bp.blogspot.com/_RpcwHx8W2XM/TLM-iLyzJuI/AAAAAAAAAqI/mFdXcaiAgxY/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(http://2.bp.blogspot.com/_RpcwHx8W2XM/TLM-iLyzJuI/AAAAAAAAAqI/mFdXcaiAgxY/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;

18 commentaires:

  1. Bonjour, Super le script fonctionne parfaitement cela m'aide vachement que de faire des pages.

    Et en plus on à comme des sous-catégories :)

    Bref SUPER

    @+

    RépondreSupprimer
  2. Bonjour annak, c'est vrais que c'est un beau menu et surtout une excellente idée que ce menu défilant qui peut, qui plus est être modifié.
    J'ai été voir ta page test et moi je croit qu'il a un bel avenir devant lui même si j'en est vu peu encore dans le monde de blogger, du moins en langue francaise
    bonne soirée annK

    RépondreSupprimer
  3. Bonjour Annak j'espère que yu va bien.... j'ai une petite question modification css du blog "sur over blog" de ma maman ( http://mjgraveron.over-blog.com/ ) comment modifier ( dansligne css ) la couleur texte dans article //date publication, publier par... partagé,communauté etc...qui en rose en blanc ( FFFFFF ) merci passe une bonne après midi bizz à toi :)

    RépondreSupprimer
  4. Bonjour Jean-Michel :) oui, tout va bien.
    Pour tes modifications, il suffit de changer la couleur dans les lignes suivantes :
    .afterArticle, .afterPage {color: #D1567B; padding:3px 0px; width:100%; text-align: left; font-size: 11px; margin: 0px 0; padding-bottom: 10px; display: block;}
    .beforeArticle, .beforePage {padding:0px; margin:0px; width:100%; color:#D1567B; font-size: 11px; font-style: italic; line-height: 13px;}
    En test, ça fonctionne parfaitement.
    Bonne journée :)

    RépondreSupprimer
  5. Boujour Annak bin grand merci pour ton aide car j'ai cherché chez mes parents une bonne partie d'un dimanche (grrr :( ) vraiment merci bon week end gros bisous :)

    RépondreSupprimer
  6. Bonjour Annak, comment peut-on le mettre aligné, c'est à dire que les puces se suivent et non se superposent afin d'en faire un menu horizontal.?

    RépondreSupprimer
  7. Bonjour Annak, une solution pour moi, j'ai manipuler le script et réussi à le mettre horizontalement par contre la fermeture automatique ne se fait plus.

    RépondreSupprimer
  8. Bonjour Internaaze :) pour l'aligner, j'aurai placé chaque groupe de liens dans un tableau. En manipulant, tu n'as pas effacé un bout de code par erreur ?

    RépondreSupprimer
  9. non j'ai vérifié justement, l'alignement est réalisable mais la fermeture automatique lorsque l'on ouvre l’ascenseur juste à coté.

    RépondreSupprimer
  10. Un grand merci ! Une astuce vraiment pratique.

    RépondreSupprimer
  11. Bonjour,
    Le menu est très sympa. Merci.
    Mais pouvez-vous me dire où je dois mettre les codes : javascript, css, menu, etc... dans mon blog blogger. Je ne vois pas où les inclure ??
    Merci par avance pour votre aide.

    RépondreSupprimer
  12. Bonjour AnnaK, j'ai réussit à installer le menu avec succès, seulement quand j'ai créé un autre que j'ai placé dans la colonne à coté, les deux menus ont mal fonctionnés, ils se ferment très rapidement, help!!!!

    Merci de ton aide

    RépondreSupprimer
  13. Bonjour,

    Un script bien pratique et qui fonctionne parfaitement. J'ai fait quelques légères modif.
    http://lettredalsace.blogspot.fr/

    RépondreSupprimer
  14. Bonjour,
    Le menu est super sympa, bravo et merci !
    Cependant j'essaie de changer la couleur des liens et la couleur des liens en survol mais ça ne fonctionne pas.
    Pouvez-vous m'aider.
    Merci.
    Catherine

    RépondreSupprimer
  15. Salut !
    Tiptop ce menu,mais comme Lilou, j'ai voulu en insérer un 2ème, est-ce possible ??
    @+ !

    RépondreSupprimer
  16. J'ai trouvé une...bidouille par hasard.
    Créez votre 2ème menu, avant d'enregistrer votre code, passez le sous "Format RTF", revenez en HTML, enregistrez, et le tour est joué ! ;)

    (exemple => http://succutivore.blogspot.fr)

    RépondreSupprimer
  17. HTML facebook sur la page http://surlapage.fr/widget/facebook-slider

    RépondreSupprimer

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)