Class='has-sub'

Bonjour,

Je dois regarder de prés un code css et html et je ne parviens pas à comprendre l'utilité de cette ligne dans mon html, et à la retrouver dans mon css.

<li class='has-sub'><a href='#'><span>TPs Integweb</span></a>

Cette ligne ré-apparaît plusieurs fois dans cette div :

<div id='cssmenu'>
     <ul>
          <li class='active'><a href='index.html'><span>Accueil</span></a></li>
	  <li class='has-sub'><a href='#'><span>TPs Integweb</span></a>
		<ul>
		         <li class='has-sub'><a href='#'><span>TP1 Mise en page</span></a>
				<ul>
				       <li><a href='#'><span>Exo1</span></a></li>
				       <li><a href='#'><span>Exo2</span></a></li>
				       <li class='last'><a href='#'><span>Exo3</span></a></li>			            
			       </ul>
		        </li>
			<li class='has-sub'><a href='#'><span>TP2 Mise en forme</span></a>
				<ul>
				       <li><a href='#'><span>Exo1</span></a></li>
				       <li class='last'><a href='#'><span>Exo2</span></a></li>
				</ul>
			</li>
</ul>
		</li>
		<li><a href='#'><span>Me contacter</span></a></li>
		<li class='last'><a href='#'><span>Mes infos...</span></a></li>
	</ul>
</div> 

Modifié par elodieN (29 Oct 2014 - 11:41)

Bonjour,

La classe indique probablement que l'on est sur un item de menu qui possède des items de sous-menu.
Par contre l'intérêt de spécifier une classe, je ne sais pas.
div > ul > li > ul aurait suffit.

Le code provient de http://cssmenumaker.com, et a ensuite été modifié par mon prof d'intégration web.
Je vais me tourner vers lui pour comprendre son choix de spécifier une classe.

Je vous remercie pour votre réponse rapide.

De plus, j'aimerais avoir confirmation sur une autre classe :

<li class='last'><a href='#'><span>Exo3</span></a></li>

Le "last" indique bien la fin d'une liste ?

Je suis d'accord avec Raphi, tu peux aussi utiliser ce sélecteur : #cssmenu li ul

Dans ton code, la classe "last" a bien l'air d'indiquer la fin de liste mais ça on ne peut pas en être sûr : la nomenclature des classes est libre. Il faut voir quels sont les propriétés css qui sont définis pour cette classe.

	/* Le CSS associé au menu (cf.  http://cssmenumaker.com/builder/1071727)  
	retravaillé par JLH */
		

	#cssmenu ul {
	  margin: 0;
	  padding: 0;
	}
	
	#cssmenu li {
	  margin: 0;
	  padding: 0;
	}
	
	#cssmenu a {
	  margin: 0;
	  padding: 0;
	}
	
	#cssmenu ul {
	  list-style: none;
	}
	
	#cssmenu a {
	  text-decoration: none;
	}
	
	#cssmenu {
	  height: 50px;
	  background-color: #303030 ;
	  box-shadow: 3px 3px 3px black ;
	  width: auto;
		  border-radius: 8px;
	}
	
	#cssmenu > ul > li {
	  float: left;
	  margin-left: 15px;
	  position: relative;
	}
	
	#cssmenu > ul > li > a {
	  color: #c0c0c0;
	  font-family: Verdana, 'Lucida Grande';
	  font-size: 15px;
	  line-height: 50px;
	  padding: 15px 20px;
	  transition: color .15s;
	}
	
	#cssmenu > ul > li > a:hover {
	  color: red;
	}
	
	#cssmenu > ul > li > ul {
	  opacity: 0;
	  visibility: hidden;
	  padding: 16px 0 20px 0;
	  background-color: #fafafa;
	  z-index: 1;
	  text-align: left;
	  position: absolute;
	  top: 55px;
	  left: 50%;
	  margin-left: -90px;
	  width: 180px;
	  transition: all .3s .1s;
	  border-radius: 5px;
	  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
	}
	
	#cssmenu > ul > li:hover > ul {
	  opacity: 1;
	  top: 65px;
	  visibility: visible;
	}
	
	#cssmenu > ul > li > ul:before {
	  content: '';
	  display: block;
	  border-color: transparent transparent #fafafa transparent;
	  border-style: solid;
	  border-width: 10px;
	  position: absolute;
	  top: -20px;
	  left: 50%;
	  margin-left: -10px;
	}
	
	#cssmenu > ul ul > li {
	  position: relative;
	}
	
	#cssmenu ul ul a {
	  color: #323232;
	  font-family: Verdana, 'Lucida Grande';
	  font-size: 13px;
	  background-color: #fafafa;
	  padding: 5px 8px 7px 16px;
	  display: block;
	  transition: background-color 0.1s;
	}
	
	#cssmenu ul ul a:hover {
	  background-color: #f0f0f0;
	}
	
	#cssmenu ul ul ul {
	  visibility: hidden;
	  opacity: 0;
	  position: absolute;
	  top: -16px;
	  left: 206px;
	  padding: 16px 0 20px 0;
	  background-color: #fafafa;
	  text-align: left;
	  width: 180px;
	  transition: all .3s;
	  border-radius: 5px;
	  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
	}
	
	#cssmenu ul ul > li:hover > ul {
	  opacity: 1;
	  left: 190px;
	  visibility: visible;
	}
	
	#cssmenu ul ul a:hover {
	  background-color: #cc2c24;
	  color: #f0f0f0;
	}

Le problème est que je ne retrouve pas ces classes dans le css.

Effectivement, la classe "last" n'est pas présente et le dernier li n'a pas de css particulier.

Par contre, pour les sous menu (classe "has-sub"), le css est bien appliqué même si il ne passe pas par la classe, il s'agit des sélecteurs : #cssmenu > ul > li > ul, #cssmenu ul ul a, #cssmenu ul ul ul, ...

Si je peux me permettre :
- utilise des doubles quotes (") pour tes attributs dans ton HTML comme <div class="maClass">[...]</div>
- tu as des sélecteurs compliqués et redondants comme #cssmenu ul ul a:hover où le background est redéfinie en fin de css ou encre #cssmenu > ul ul > li où le li est déjà en position relative, ...

Bon après je n'ai pas tout regardé ^^

Le code n'est pas de moi mais de mon prof d'intégration web, donc il se peut qu'il code de cette façon pour nous le détailler. .