Sorte de menu déroulant ?

[kuro-revolt]

Bonjouuur!
Je suis à la recherche d'un code depuis un moment sans réussir à le trouver... Peut être est-ce parce que je lui donne le mauvais nom - ou bien je sais plus chercher, c'possible aussi XD - Pour moi, c'est une sorte de menu déroulant, et voila, ça donne ça:



Spoiler:


Quelqu'un saurait m'aider please? ;o;
Merci d'avance à celui qui se donnera cette peine!

[Invité]

Bonjour,

Le tutoriel du FdF: https://forum.forumactif.com/t186834-scripts-installation-menu-deroulant.

Faites 3 documents:
le script, le CSS et le menu.

Document 1: le script, il ne faut pas y toucher.

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>

Document 2: la partie CSS gère le style des onglet et le contenu ( a personnaliser):

Code:

<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 dl {
    float: left;
    width: 150px;
}
#menu dt {
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px;
    -webkit-border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    color: #000000;
    text-align: center;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    background: #ccc;
    border: 1px solid gray;
    margin: 0px;olid gray;
    margin: 0px;
}
#menu dt:hover{
    border-bottom: none!important;
}

#menu dd {
    display: none;
    border: 1px solid gray;
    border-top: none!important;}

#menu li {
    text-align: center;
    background: #ccc;
}

#menu li a, #menu dt a {
    color: #000;
    text-decoration: none;
    display: block;
    height: 100%;
    border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
    color: #000000;
    text-align: center;
    width: 150px;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    background: #ccc;
    margin: 0px;
}
#site {
    position: absolute;
    z-index: 1;
    top : 70px;
    left : 10px;
    color: #000;
    background-color: #ccc;
    padding: 5px;
    border: 1px solid gray;
}
-->
</style>


Document 3: le menu en lui même. Il y a beaucoup de choses à compléter dans cette partie.

Code:

<div id="menu">
<dl>         
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd id="smenu1">
<ul>
<li><a href="">Sous-Menu 1.1</a></li>
<li><a href="">Sous-Menu 1.2</a></li>
<li><a href="">Sous-Menu 1.3</a></li>
<li><a href="">Sous-Menu 1.4</a></li>
<li><a href="">Sous-Menu 1.5</a></li>
<li><a href="">Sous-Menu 1.6</a></li>

</ul>
</dd>
</dl>
   
   
<dl>   
<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
<dd id="smenu2">
<ul>
<li><a href="">Sous-Menu 2.1</a></li>
<li><a href="">Sous-Menu 2.2</a></li>
<li><a href="">Sous-Menu 2.3</a></li>
<li><a href="">Sous-Menu 2.4</a></li>

</ul>
</dd>

</dl>

   
<dl>   
<dt onmouseover="javascript:montre('smenu3');">[color=orange]Menu 3</dt>
<dd id="smenu3">
<ul>
<li><a href="">Sous-Menu 3.1</a></li>
<li><a href="">Sous-Menu 3.2</a></li>
<li><a href="">Sous-Menu 3.3</a></li>

<li><a href="">Sous-Menu 3.4</a></li>
<li><a href="">Sous-Menu 3.5</a></li>
</ul>
</dd>
</dl>

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

<li><a href="">Sous-Menu 4.3</a></li>
</ul>
</dd>
</dl>
   

</div>

Pour ôter un onglet, on enlève:

Code:

<dl>         
<dt onmouseover="javascript:montre('smenu1');">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 rajouter un onglet, on prend le même code et on le colle à la fin avant le "/div"
Pour ôter un sous-menu on enlève:

Code:

<li><a href="">nom de la page</a></li>

Pour ajouter un sous-menu on prend le même code et on le colle avant le "/ul"
Pour que les onglets changent au clic et non au survol, on remplace "onmouseover" par "onclick".

Une fois toutes le modifications faites, réunissez vos 3 documents en un seul en les mettant dans l'ordre suivant: le script puis le CSS et enfin le menu. Copiez l'ensemble de ce document et rendez-vous sur votre forum pour le placer ou vous le souaitez.

Pour le placer sous la barre de navigation, dans la rubrique Général cliquez sur Overall_header.
Cherchez ceci:

Code:

td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>

Collez votre code complet après le "</table>" , attention à ne rien supprimer! Enregistrez le template puis publiez-le.

Pour le placer dans la page d'accueil, panneau d'admin' > Affichage généralité, collez le code complet dans le message d'accueil.

Vous pouvez aussi le mettre dans une page HTML.

Cordialement.

[kuro-revolt]

Ça marche en version phpBB3 or not? J'ai vu qu'il fallait accéder aux templates... En tout cas je vous remercie quand même *o* Je vais tenter ça!