Création de sous menus webacappella

Fermé
Claire.T - 19 janv. 2017 à 10:11
dugenou Messages postés 6083 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 - 19 janv. 2017 à 14:28
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 !
A voir également:

1 réponse

dugenou Messages postés 6083 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 454
Modifié par dugenou le 19/01/2017 à 14:55
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.
0