5546 sujets

Sémantique web et HTML

Comment ajouter des sous menu

Bonsoir a tous
ce site est vraiment super et surtout l entraide
j ai un petit soucis avec ce morceau de code
je souhaiterais ajouter un sous menu en dessous de blog par exemple
un tout grand merci pour l aide
<nav class="navigation">
      <a href="#" class="navbar-logo">Logo</a>
      <div class="navbar-right">
        <a href="#">About</a>
        <a href="#">Blog</a>
        <a href="#">Contact</a>
      </div>
    </nav>

Modifié par flexi2202 (23 Nov 2020 - 23:13)
Modérateur
Bonjour,

Quand on a besoin de sous-menus, on utilise souvent des <ul> et <li>.

Par exemple (à adapter) :
<nav class="navigation">
	<ul>
		<li class="navbar-logo"><a href="#">Logo</a></li>
		<li class="navbar-right"><a href="#">About</a></li>
		<li class="navbar-right">Blog
			<ul class="nav-sub-blog">
				<li><a href="#">SubBlog1</a></li>
				<li><a href="#">SubBlog2</a></li>
			</ul>
		</li>
		<li class="navbar-right"><a href="#">Contact</a></li>
	</ul>
</nav>

Amicalement,
Modifié par parsimonhi (24 Nov 2020 - 09:25)
Modérateur
Bonjour,

Qu'est-ce qui ne fonctionne pas ?

Tu veux non seulement un sous-menu, mais qu'il soit aussi déroulant ? C'est quoi le besoin ? Smiley smile

Amicalement,
bonjour

merci pour la réponse
sur le lien que je viens de poster https://codepen.io/casuru/pen/RPMyyp
je souhaiterais avoir un menu accordéon
de about et contact qui puisse s ouvrir au passage de la souris
avec par exemple en sous menu sabout1 , sabout2 et scontact1,scontcat2

donc avoir ceci mais en accordéon
about blog contact
sabout1 scontact1
sbout2 scontact2
Modérateur
Bonjour,

Bon, comme t'as commencé avec des <div>, je continue avec des <div> (pour éviter de devoir retoucher tout ton css), mais ce serait mieux avec des <ul> et des <li>. Donc, l'idée c'est qu'on rajoute les sous-menus dans le html et qu'on les cache avec le css via un .main-item .sub-items {display:none;}. Et si on fait un hover sur l'un des menu-items principaux, on affiche son sous-menu via un .main-item:hover .sub-items {display:block;}. Le reste, c'est de la décoration (à finir).

Par ailleurs, selon moi ce n'est en général pas terrible de faire des menus déroulants qui se déclenchent sur un hover (mais bon, c'est un autre débat Smiley cligne ).

Le html :
    <nav class="navigation">
      <a href="#" class="navbar-logo">Logo</a>
      <div class="navbar-right">
        <div class="main-item">
          <a>About</a>
          <div class="sub-items">
            <a href="#">About1</a>
            <a href="#">About2</a>
          </div>
        </div>
        <div class="main-item">
          <a href="#">Blog</a>
        </div>
        <div class="main-item">
          <a>Contact</a>
          <div class="sub-items">
            <a href="#">Contact1</a>
            <a href="#">Contact2</a>
          </div>
        </div>
      </div>
    </nav>


Le css à ajouter :
.main-item
{
  display:inline-block;
  vertical-align:top;
  position:relative;
}
.main-item .sub-items
{
  display:none;
}
.sub-items a
{
  display:block;
}
.main-item:hover .sub-items
{
  display:block;
  position:absolute;
}

Amicalement,
Meilleure solution
Sujet clos
Aller à