Création de sous menus webacappella

Fermé
-
Messages postés
6083
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
30 juillet 2021
-
Bonjour,

Je cherche désespérément la démarche afin de construire un menu déroulant à partir d'un menu déjà existant sur webacappella.
Explications :
J'ai un menu existant (Accueil, Activités, Actualités etc) mais je souhaite ajouter des sous-menus à ceux-ci afin d'obtenir la chose suivante : Accueil (comme menu) et en sous menu : qui sommes-nous ? / Le projet associatif / La plaquette

C'est la première fois que je travaille sur webacappella et découvre donc petit à petit les fonctionnalités, quelqu'un peut-il expliquer clairement la démarche ?

Merci par avance !

1 réponse

Messages postés
6083
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
30 juillet 2021
1 452
Bonjour,

Je ne sais pas si Webacapella propose de créer et de personnaliser une feuille de style CSS, si c'est le cas, c'est dans cette feuille de style qu'il faut agir.

Il faut aussi adapter ton menu en fonction de ce que tu veux faire et de ta feuille de style.

Voici un exemple pour un menu déroulant très simple, juste pour que tu comprennes le principe, ne l'utilise pas tel quel, je ne l'ai pas testé (d'autant plus que CCM rajoute automatiquement rel="nofollow noopener noreferrer" target="_blank" aux liens).

La feuille de style :

/*MENU DEROULANT*/
div#menuDeroulant ul ul {display: none; position: absolute; left: 1px; top: -1px; margin:0px; padding: 0px; border: 1px solid #C0C1C3;}
div#menuDeroulant li {list-style-type: none; position: relative; width: 100px; background-color: #FFFFFF; padding: 4px; margin: 0px}
div#menuDeroulant li:hover {background-color: #C0C1C3;font-weight:bold;}
div#menuDeroulant li:hover ul.niveau2 {display: block}
/*FIN DU MENU DEROULANT*/



Le menu :

<div id="menuDeroulant">
<ul class="niveau1">
  <li><a href="index.html" rel="nofollow noopener noreferrer" target="_blank">Accueil</a>
    <ul class="niveau2">
      <li><a href="presentation.html" rel="nofollow noopener noreferrer" target="_blank">Qui sommes nous</a></li>
      <li><a href="projet.html" rel="nofollow noopener noreferrer" target="_blank">Le projet associatif</a></li>
      <li><a href="plaquette.html" rel="nofollow noopener noreferrer" target="_blank">La plaquette</a></li>  
    </ul>
  </li>
       <li><a href="activite.html" rel="nofollow noopener noreferrer" target="_blank">Activite</a></li>                              
       <li><a href="actualite.html" rel="nofollow noopener noreferrer" target="_blank">Actualite</a></li>   
</ul>
</div> 


Si tu cherches un peu sur le Web, tu en trouveras beaucoup d'autres, plus sophistiqués.

Courage, le bout du tunnel n'est pas loin, il suffit de se retourner.