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 :
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
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
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
-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/adapteren 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
<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
-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>.
-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
"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".
