Problème menue déroulant

[gardienneore]

Bonsoir à tous !

J'y suis depuis 18h quasiment 2h !
Je ne connais rien au codage et tout ce qui s'en suit (mais je veux apprendre )
Je suis donc tomber sur le tuto https://forum.forumactif.com/t314485-installation-d-un-menu-deroulant#2739428.
Je voulais donc installer le menu deroulant horizontale avec une apparition des sous-menu au survol

J'ai donc fais copier coller du CSS dans la partie CSS, le java dans le java et le HTML dans le HTML , quand je vais des prévisualiser pour le HTML il y a bien quelque chose , mais quand je valide et je vais sur mon forum rien ne se passe, rien n'a bouger d'un milimètre

Donc qu'est ce qui manque pour que cela soit affiché sur mon forum ? Je dois cocher une case dans le PA que j'ai oublier ou ?

Merci beaucoup!

[Scipion]

Bonsoir

Essayez de vérifier l'activation du Html sur le forum en vous aidant du tutoriel FA suivant :

Activation du HTML

Cordialement

[gardienneore]

Oui j'ai déjà lu ça aussi ça n'a pas remédier a mon probleme , j'ai lu aussi les differentes questions posé sur le forum a propos du menue déroulant ( pour montrer que j'ai quand meme chercher et essayer de comprendre pourquoi ça ne marchait pas :/ )

[Scipion]

Voilà ce que nous allons faire, dans un premier temps je vous suggère de relire attentivement le tutoriel afin de voir si vous êtes passé à côté de quelque chose, c'est très courant lorsque l'utilisateur n'est pas un habitué de ce type d'installation.

Si le problème persiste, à ce moment là mettez ici entre balises code, les différents codes que vous avez installés en précisant pour chacun l'emplacement.

Cordialement

[gardienneore]

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;}

Donc ça j'ai mis dans la feuille de style CSS

Code:

<div id="menu">
<dl>
<dt>Replier</dt>
</dl>
 
<dl>
<dt>Menu 1</dt>
<dd  style="display;">
<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 la partie HTML ( créer une nouvelle page HTML)

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");}); });

Et le javascript dans la partie gestion des codes java..

[gardienneore]

Après il y a une introduction dans le tuto
je l'ai relu plusieurs fois mais j'ai rien fait enfin j'ai pas l'impression que quelque chose est a faire avec intro ?

[Scipion]

Pour le code Html, supprimez la page créée à cet effet, puis vous allez sur votre panneau d'administration (PA) >> Affichage >> Généralités >> Message sur la page d'accueil :

Contenu du message : installez le code suivant

Code:

<div id="menu">
<dl>
<dt>Replier</dt>
</dl>
 
<dl>
<dt>Menu 1</dt>
<dd  style="display;">
<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>

Enregistrez.

Cordialement

[gardienneore]

A oui d'accord !
En effet maintenant ça marche ! J'ai le menue dans la page d'accueil.
Je vais me contenter de ça pour l'instant vu que je débute mais est ce qu'il est possible de pouvoir faire un menu deroulant qui soit visible a chaque page du forum?
C'est à dire que je vois ça par exemple a la place des icones " onglet " '"messages" " Profil " ect...

[Scipion]

Désolé, mais dans les conditions actuelles il n'est pas possible d'afficher le menu tel qu'il est sur toutes les pages. Je viens de faire une série de tests non concluants.

Cordialement

[gardienneore]

D'accord merci quand même !
C'est vraiment très sympa de prendre le temps d'expliquer!

[Arlem]

Bonsoir,

Si c'est possible, si vous êtes en phpbb2, il suffit de le mettre dans le template Overall_header (onglet Affichage => Général).