• ACCUEIL
  • blogger

    Menu déroulant

    Créer un menu déroulant simple

    Selon vos possibilités, votre niveau , vous pouvez réaliser de vrais menus plus ou moins sophistiqués. Toutefois il faudra obligatoirement travailler en mode HTML et modifier en partie le code des menus.
    Si cela vous semble trop complexe, vous pouvez :
    -via les liens et les  libellés, établir des menus plus simples (voir notre article)
    -créer ce menu déroulant assez simple  à configurer


    Plan
    1-Rappel des bases: notion de lien
    2-Concevoir un Menu "classique" déroulant très simple


    (démo : lien inactifs)


    1-Les bases : notion de lien
    Lors de l'édition d'un article ou d'une page, il est aisé de faire un lien à l 'aide du Menu "Associer"


    Ce lien pointe vers un article ou une page dont vous avez mémorisé l'adresse.

    En mode HTML, voici le code  : 


    Lien simple :
     <a href="adresse du lien">titre du lien</a>

     Pour obtenir :     cliquer ici
     il faut ce code :   cliquer <a href="http://blogavecblogger.blogspot.fr">ici</a>

    Lien s'ouvrant dans une nouvelle fenêtre
     <a href="adresse du lien" target="blank">titre du lien</a>

    Pour obtenir :      cliquer là et une nouvelle fenêtre s'ouvre
    il faut ce code  :  cliquer<a href="http://blogavecblogger.blogspot.fr" target="_blank"> là</a>
    et une nouvelle fenêtre s'ouvre

    2- Concevoir un Menu "classique" déroulant simple

    Vous devez avoir les compétences nécessaires pour cette réalisation qui nécessite d'adapter du code ou, du moins, bien respecter les consignes: vous n'avez pas droit à l'erreur (la moindre faute, oubli, ajout dans le code provoque  son dysfonctionnement)


    2-1 PRINCIPE : utiliser un gadget HTML
    -Récupérer et copier  le code
    -Allez sur  "Mise En Page" et , en dessous de l'entête de votre blog, cliquez sur "Ajouter Un Gadget"
    -Choisir  le gadget "HTML/JavaScript", collez le code du menu dans la fenêtre qui s'ouvre puis cliquez sur "Enregistrer".


    2-2 DEMO

    => Voir  cet exemple  

    COPIES ECRAN
    en page d'accueil s'affiche ce cadre

    qui se déroule pour afficher une "Liste Déroulante" qui regroupe les éléments constitutifs du menu




    2-3 CODE à copier/coller/adapter
    <script language="JavaScript">
    function ChangeUrl(formulaire)
       {
       if (formulaire.ListeUrl.selectedIndex != 0)
          {
         var url ;
         url = formulaire.ListeUrl.options[formulaire.ListeUrl.selectedIndex].value;
         window.open(url,'_blank');
           }
       }
    </script>
    <FORM >
    <SELECT NAME="ListeUrl" SIZE=1 onChange="ChangeUrl(this.form)"  >
    <OPTION SELECTED VALUE="">-Menu Déroulant De Liens-</option>
    <optgroup label="Groupe 1">
      <option value="Lien 1">Titre1</option>
      <option value="Lien 2">Titre 2</option>
    </optgroup>
    <optgroup label="Groupe 2">
      <option value="Lien 3">Titre 3</option>
      <option value="Lien 4">Titre 4</option>
    <option value="Lien 5">Titre 5</option>
    </optgroup>
    <optgroup label="Groupe 3">
    <option value="Lien 6">Titre 6</option>
      <option value="Lien 7">Titre 7</option>
    </optgroup>
    </SELECT>
    </FORM>

    2-4 CONFIGURATION  DU MENU 



    Ce code est à copier tel quel : il faudra uniquement changer ce qui est en couleur :
    -Le titre du menu : Menu déroulant de liens (titre de votre Menu)
    -Les groupes: Groupe 1 
    (titre d'un groupe de liens)
    -Les liens: lien 1  (
    (adresse URL de destination)
    -Le titre du lien: Titre 1  
    (titre du lien))


    => Vous devez faire les modifications nécessaires.

    Exemple de code finalisé pour 1 groupe
    -------------------------------------------------------------------------------------
    </optgroup>
    <optgroup label="ENTRAINEMENT">
    <option value="http://uia-echecs.blogspot.fr/2014/10/le-probleme-dechecs-du-jour.html" />Problèmes
    <option value="http://uia-echecs.blogspot.fr/2014/10/testez-votre-ouverture.html" />Tester votre ouverture
    <option value="http://uia-echecs.blogspot.fr/2014/10/comment-se-termine-ma-partie-les-finales.html" />Les finales
    </optgroup>
    ------------
    ------------------------------------------------------------------------------

    -Vous pouvez rajouter autant de liens que vous le désirez en recopiant la ligne : <option value="Lien X">Titre X</option>
    -Les options de chaque groupe sont incluses entre les balises <optgroup> et </optgroup>. -À l’intérieur d’un élément <select>, on peut inclure autant de groupes que l’on veut.-Le libellé de chaque groupe est donné dans l’attribut label de l’élément <optgroup>.


    Comment ajouter ce Menu Déroulant dans Blogger

    Copier le code de la liste de votre choix (sans ou avec regroupement d'éléments) et allez à :
    "Mise En Page" > "Ajouter un Gadget" > "HTML/JavaScript"
    collez le code dans la petite fenêtre qui s'ouvre, modifiez-le et enfin cliquez sur "Enregistrer".



    Source : http://theblogueur.blogspot.fr/2013/02/liste-deroulante-avec-liens-hypertexte.html