2) Le menu vertical caché > Aperçu <

Je préfère le citer car il et plus dur à expliquer, donc je préfère mettre des couleurs Wink

Code :

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>

<style type="text/css" media="screen">
<!--
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
width: 15em;
}
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
-->
</style>
<!-- FIN DU CSS -->



<dl id="menu">

<dt onclick="javascript:montre();"><a href="url-de-renvoi">Menu 1</a></dt>

<dt onclick="javascript:montre('smenu2');">Menu 2</dt>
<dd id="smenu2">
<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>
</ul>
</dd>

<dt onclick="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3">
<ul>
<li><a href="url-de-renvoi">Sous-Menu 3.1</a></li>
<li><a href="url-de-renvoi">Sous-Menu 3.1</a></li>
<li><a href="url-de-renvoi">Sous-Menu 3.1</a></li>
<li><a href="url-de-renvoi">Sous-Menu 3.1</a></li>
<li><a href="url-de-renvoi">Sous-Menu 3.1</a></li>
<li><a href="url-de-renvoi">Sous-Menu 3.1</a></li>
</ul>
</dd>

<dt onclick="javascript:montre('smenu4');">Menu 4</dt>
<dd id="smenu4">
<ul>
<li><a href="url-de-renvoi">Sous-Menu 4.1</a></li>
<li><a href="url-de-renvoi">Sous-Menu 4.1</a></li>
</ul>
</dd>
</dl>


Explication ( il est préférable de regarder l'aperçu disponible près du titre pour mieux comprendre Wink ) :

en rouge : ce sont les couleurs du menu, à remplacer par des codes hexadécimaux ( trouvables sur google Very Happy )
en bleu : les adresses de redirection lorsqu'on clique sur la case voulue
en violet : les noms des menus ( menu 1, menu 2 ... ) a changer par les catégories de votre forum
en orange les noms des sous-menus ( sous menu 2.1 ... ) à changer par les forums disponibles dans chacune des catégories

- Vous remarquerez que le menu 1 n'a pas de sous-menus et est un lien. c'est en fait un lien que vous pouvez utiliser comme redirection vers votre règlement par exemple.
- Vous pouvez dupliquer les blocs commençant par <dt onclick et finissant par </dd> autant de fois que vous avez de catégories, avant la balise </dl>
- Vous pouvez dupliquer les blocs de sous menus encadrés par <li> et </li> autant de fois que vous avez de forums, avant la balise </ul>

- Ce type de menu de Navigation rapide est idéal inséré dans un bloc du portail ( à gauche par exemple ) il est discret et esthétique ( pensez à adapter les couleurs à votre thème Wink )


Dernière édition par Alexarbitre le Dim 23 Mar - 10:06, édité 1 fois

Astuce: Installation d'un menu déroulant pour une navigation rapide:


Introduction:

J'ai remarqué que sur plusieurs forums, on pouvait sélectionner dans un menu déroulant une catégorie ou un forum précis, et nous étions directement redirigés vers cette catégorie et ce forum.
On peut appeler ça la " Navigation rapide ".
Certaines personnes avaient demandé sur le FdF comment on faisait ce genre de chose. D'autres doivent se poser la même question.

Question --> Réponse Wink

Je vais donc vous mettre quelques scripts ici pour intégrer une " Navigation rapide " à votre forum.

1) Le menu déroulant de base > Aperçu <

C'est le menu le plus courant et le plus simple. En voici le code :

Code:
<form>
<select style="width: 268px" onchange="location = this.options
[this.selectedIndex].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>
</form>


Explication et mise en place :

Pour chaque choix vous avez cette option :

<option value="url1-de-renvoi">
choix 1
</option>


- Vous mettez à la place de url1-de-renvoi l'adresse vers laquelle l'utilisateur sera redirigé si il sélectionne le choix 1 ( choix 1 est à modifier en mettant le nom de la catégorie qui apparaîtra dans la liste )
- Vous pouvez dupliquer le bloc cité autant de fois que vous voulez, mais avant la balise </select>

Où le mettre:

Vous pouvez l"insérer dans n'importe quel endroit qui accepte le HTML. Cependant, dans la majorité des cas, vous souhaitez le mettre dans une catégorie. Pour cela: Panneau d'Administration >> Général >> Catégories et forums.
Il vous suffit de modifier une catégorie existante en l'éditant () et insérez le code de votre menu déroulant.



Dernière édition par Alexarbitre le Dim 23 Mar - 10:06, édité 2 fois