Installation d'un menu déroulant

[Staff]

Installer un menu déroulant

Les menus déroulants peuvent être utilisés dans divers but: liste de partenaires, navigation rapide, etc. Ils se placent en général dans le message sur la page d'accueil, mais ils peuvent être installés à d'autres endroits comme les templates pour personnaliser la navigation où dans un widget. Code HTML du menu déroulant (simple) Code: <select style="width: 268px;" onchange="location = this.value">   <option selected="selected">Navigation rapide</option>   <option value="url1-de-renvoi">choix 1</option>   <option value="url2-de-renvoi">choix 2</option>   <option value="url3-de-renvoi">choix 3</option>   <option value="url4-de-renvoi">choix 4</option> </select> La ligne ci-dessous permet de choisir un nom qui sera affiché par défaut dans le menu. Code: <option selected="selected">Navigation rapide</option> La ligne ci-dessous correspond à un choix, vous devez personnaliser les liens URL de renvoi (mettre l'adresse de la page) et le choix (mettre le nom de la page, par exemple). Pour chaque choix, dupliquez cette ligne autant de fois que nécessaire avant la balise </select>. Code: <option value="url-de-renvoi">choix </option> Menu vertical Code HTML Code: <div id="menu"> <dl> <dt>Replier</dt> </dl>   <dl> <dt>Menu 1</dt> <dd  style="display:none;"> <ul> <li><a href="url-de-renvoi">Sous-Menu 1.1</a></li> <li><a href="url-de-renvoi">Sous-Menu 1.2</a></li> <li><a href="url-de-renvoi">Sous-Menu 1.3</a></li> </ul> </dd> </dl>   <dl> <dt>Menu 2</dt> <dd  style="display:none;"> <ul> <li><a href="url-de-renvoi">Sous-Menu 2.1</a></li> <li><a href="url-de-renvoi">Sous-Menu 2.2</a></li> <li><a href="url-de-renvoi">Sous-Menu 2.3</a></li> <li><a href="url-de-renvoi">Sous-Menu 2.4</a></li> <li><a href="url-de-renvoi">Sous-Menu 2.5</a></li> <li><a href="url-de-renvoi">Sous-Menu 2.6</a></li> </ul> </dd> </dl>   <dl> <dt>Menu 3</dt> <dd  style="display:none;"> <ul> <li><a href="url-de-renvoi">Sous-Menu 3.1</a></li> <li><a href="url-de-renvoi">Sous-Menu 3.2</a></li> </ul> </dd> </dl> </div> Dans le code HTML, pour ajouter un menu on place avant le </div> : Code: <dl>  <dt>Nom de l'onglet</dt> <dd id="smenu1"> <ul> <li><a href="http://adresse-de-la-page-1">nom de la page 1</a></li> <li><a href="http://adresse-de-la-page-2">nom de la page 2</a></li> <li><a href="http://adresse-de-la-page-3">nom de la page 3</a></li> <li><a href="http://adresse-de-la-page-4">nom de la page 4</a></li> <li><a href="http://adresse-de-la-page-5">nom de la page 5</a></li> </ul> </dd> </dl> Pour ajouter un sous-menu on place : <li><a href="adresse de la page">nom de la page</a></li> avant le </ul>. Insertion du script Javascript Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "Menu vertical" et pour placement "Sur toutes les pages" (plus d'informations sur la gestion des scripts). Pour une apparition des sous-menu au survol Code: $(function(){ $("#menu dl").hover(function(){$("#menu dl dd").slideUp("500");$(this).find("dd").stop(true,true).slideDown("500");},function(){$(this).find("dd").slideUp("500");}); }); N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications. Pour une apparition des sous-menus au clic Code: $(function(){ $("#menu dl").click(function(){$("#menu dl dd").slideUp("500");$(this).find("dd").stop(true,true).slideDown("500");},function(){$(this).find("dd").slideUp("500");}); }); N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications. Insertion du code CSS Le code CSS permet de personnaliser les couleurs et les dimensions du menu. Panneau d'administration  Affichage  Images et Couleurs - couleurs (Onglet Feuille de style CSS) Code: #menu ul { margin: 0; padding: 0; list-style-type: none; }   #menu dl { width: 150px; margin: 1px; padding: 0; list-style-type: none;}   #menu dt { cursor: pointer; margin: 2px 0;; height: 20px; line-height: 20px; text-align: center; font-weight: bold; border: 1px solid gray; background: #ccc; margin: 0; padding: 0; list-style-type: none;}   #menu dd { border: 1px solid gray; margin: 0; padding: 0; list-style-type: none;}   #menu li { text-align: center; background: #fff; margin: 0; padding: 0; list-style-type: none;}   #menu li a, #menu dt a { color: #000; text-decoration: none; display: block; height: 100%; margin: 0; padding: 0; list-style-type: none;}   #menu li a:hover, #menu dt a:hover { background: #eee; margin: 0; padding: 0; list-style-type: none;} N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications. Menu horizontal Code HTML Code: <div id="menu"> <dl> <dt>Replier</dt> </dl>   <dl> <dt>Menu 1</dt> <dd  style="display:none;"> <ul> <li><a href="url-de-renvoi">Sous-Menu 1.1</a></li> <li><a href="url-de-renvoi">Sous-Menu 1.2</a></li> <li><a href="url-de-renvoi">Sous-Menu 1.3</a></li> </ul> </dd> </dl>   <dl> <dt>Menu 2</dt> <dd  style="display:none;"> <ul> <li><a href="url-de-renvoi">Sous-Menu 2.1</a></li> <li><a href="url-de-renvoi">Sous-Menu 2.2</a></li> <li><a href="url-de-renvoi">Sous-Menu 2.3</a></li> <li><a href="url-de-renvoi">Sous-Menu 2.4</a></li> <li><a href="url-de-renvoi">Sous-Menu 2.5</a></li> <li><a href="url-de-renvoi">Sous-Menu 2.6</a></li> </ul> </dd> </dl>   <dl> <dt>Menu 3</dt> <dd  style="display:none;"> <ul> <li><a href="url-de-renvoi">Sous-Menu 3.1</a></li> <li><a href="url-de-renvoi">Sous-Menu 3.2</a></li> </ul> </dd> </dl> </div> Dans le code HTML, pour ajouter un menu on place avant le </div> : Code: <dl>  <dt>Nom de l'onglet</dt> <dd id="smenu1"> <ul> <li><a href="http://adresse-de-la-page-1">nom de la page 1</a></li> <li><a href="http://adresse-de-la-page-2">nom de la page 2</a></li> <li><a href="http://adresse-de-la-page-3">nom de la page 3</a></li> <li><a href="http://adresse-de-la-page-4">nom de la page 4</a></li> <li><a href="http://adresse-de-la-page-5">nom de la page 5</a></li> </ul> </dd> </dl> Pour ajouter un sous-menu on place : <li><a href="adresse de la page">nom de la page</a></li> avant le </ul>. Insertion du script Javascript Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "Menu horizontal" et pour placement "Sur toutes les pages" (plus d'informations sur la gestion des scripts). Pour une apparition des sous-menu au survol Code: $(function(){ $("#menu dl").hover(function(){$("#menu dl dd").slideUp("500");$(this).find("dd").stop(true,true).slideDown("500");},function(){$(this).find("dd").slideUp("500");}); }); N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications. Pour une apparition des sous-menus au clic Code: $(function(){ $("#menu dl").click(function(){$("#menu dl dd").slideUp("500");$(this).find("dd").stop(true,true).slideDown("500");},function(){$(this).find("dd").slideUp("500");}); }); N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications. Insertion du code CSS Le code CSS permet de personnaliser les couleurs et les dimensions du menu. Panneau d'administration  Affichage  Images et Couleurs - couleurs (Onglet Feuille de style CSS) Code: /*liste des menus*/ #menu ul{padding: 0px;     list-style-type: none; margin: 0px; }   /*positionnement des menus*/ #menu dl {     float: left;     width: 150px;}   /*menus*/ #menu dt {     color: blue;     text-align: center;     cursor: pointer;     font-weight: bold;     background: #ccc;     border: 1px solid black;     margin: 0px;}   /*menus au survol*/ #menu dt:hover{     border-bottom: none!important;}   /*liste des sous-menus*/ #menu dd {     display: none;     border: 1px solid gray;     border-top: none!important;     background: #ccc;     margin: 0px;     padding: 0px;     list-style-type: none;}   #menu li {     text-align: center;     background: grey;     margin: 0px;     padding: 0px;     list-style-type: none;}   /* liens des sous-menus*/ #menu li a, #menu dt a {     color: black;     background: #ccc;     text-decoration: none;     display: block;     height: 100%;     border: 0 none;     margin: 0px;     padding: 0px;     list-style-type: none;}   /*liens des sous-menus au survol*/ #menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {     color: white;     text-align: center;     width: 150px;     cursor: pointer;     font-weight: bold;     background: gray;     margin: 0px;     padding: 0px;     list-style-type: none;} N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications.

Cette astuce a été rédigée par le staff de Forumactif, d'après une astuce de Alexarbitre. Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI.