Installation d'un menu déroulant

Voir le sujet précédent Voir le sujet suivant Aller en bas

Astuce Installation d'un menu déroulant

Message par Isolde le Lun 12 Sep 2011 - 21:41

Menu déroulant


Introduction

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 d'accueil
Panneau d'administration Affichage Généralités
ou dans un widget personnalisé
Panneau d'administration Modules Gestion des widgets du forum


Menu déroulant simple.



►Le code:
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>
►Explications:
La ligne ci-dessous permet de choisir un nom qui sera affiché par défaut dans le menu.
<option selected="selected">Navigation rapide</option>
La ligne ci-dessous correspond à un choix, vous devez personnaliser les urls 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>.
<option value="url-de-renvoi">choix </option>

Menu vertical



►Les codes:
Exclamation Ce menu est un peu complexe à réaliser Exclamation

►Le 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>

►Le code Javascript
Panneau d'administration Modules Gestion des codes Javascript
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");}); });
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");}); });

►Le code CSS:
Panneau d'administration Affichage Couleurs 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;}
►Explications:
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>

Le code CSS permet de personnaliser les couleurs et les dimensions du menu.

Menu horizontal.



►Les codes.
Exclamation Ce menu est un peu complexe à réaliser Exclamation
Les codes HTML et Javascript sont les mêmes que pour le menu vertical. Il n'y a que le code CSS qui change.
►Le code 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;}


Isolde
Invité


Isolde a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum