5568 sujets

Sémantique web et HTML

Comment faire pour ajouter un sous menu à un menu existant ???

Bonjour

je cherche comment faire pour ajouter un sous menu à mon menu horizontal existant sans casser le theme, en plus vu que je suis a peine exigeant j'aimerais le faire en html5 et css3 avec des icones incrusté(dans le style de ce que l'on peut faire avec le logiciel de création HTML5 Menu).

alors voila le topo (juste pour prévenir, je demande de l'aide car je suis une burne en css)

le menu actuel est très simple voila le code:


<header>
        <div class="container">
          <div class="header-box">
            <div class="left">
              <div class="right">
                    <nav>
							<ul>
								<li class="current"><a href="index.html">Accueil</a></li>
								<li><a href="hosting.html">Hosting</a></li>
								<li><a href="domaine.html">Domaine</a></li>
								<li><a href="solutions.html">Solutions</a></li>
								<li><a href="support.html">Support</a></li>
								<li><a href="contacts.html">Contacts</a></li>
							</ul>
		     </nav>


L'adresse de la page c'est hoster-du-net.com

C'est un template que j'ai trouvé sur la toile.

J'ai un exemple de code si besoin à adapter, dans tout les cas j'ai besoin qu'on m'aide sur ce coup la.

Merci d'avance
Salut,

Dans le <li> qui contient le menu à dérouler, tu laisses le lien cliquable de l'intitulé (qui redirigera vers une page qui contiendra dans son CONTENU tous les liens du sous menu (au cas ou javascript serait désactivé).

Tu ajoutes dans ce même <li> une liste <ul> et le nombre d'éléments <li> nécessaires pour les liens du sous menu. Et dans ces <li> tu ajoutes tes liens et leurs icones.

Tu stylise la liste <ul> enfant différemment de la liste <ul> parent, ainsi que pour les <li> des <ul> enfants et parents.

Tu ajoutes du javascript pour gérer le comportement du menu.
Salut

Bon je viens de creer mon menu avec html5 menu, maintenant il faut l'adapter pour qu'il entre dans mon entête sans tout casser (la ça se corse)

voila la bête, j'ai uploadé tout les fichiers nescessaire


<ul id="css3menu1" class="topmenu">
	<li class="topfirst"><a href="index.html" target="_blank" title="ACCUEIL" style="height:50px;line-height:50px;">ACCUEIL</a></li>
	<li class="topmenu"><a href="hosting.html" target="_blank" title="HEBERGEMENT" style="height:50px;line-height:50px;"><span>HEBERGEMENT</span></a>
	<ul>
		<li><a href="hosting.html" target="_blank" title="Hébergement mutualisé"><img src="CSS3 Menu2_files/css3menu1/web-hosting-32px-png.png" alt="Hébergement mutualisé"/>Hébergement mutualisé</a></li>
		<li><a href="#" target="_blank" title="Serveur privé virtuel - VPS"><img src="CSS3 Menu2_files/css3menu1/data-center-32px-png.png" alt="Serveur privé virtuel - VPS"/>Serveur privé virtuel - VPS</a></li>
		<li><a href="#" target="_blank" title="Serveur dédié"><img src="CSS3 Menu2_files/css3menu1/dedicated-server-32px-png.png" alt="Serveur dédié"/>Serveur dédié</a></li>
	</ul>

	</li>
	<li class="topmenu"><a href="domaine.html" target="_blank" title="DOMAINE" style="height:50px;line-height:50px;">DOMAINE</a></li>
	<li class="topmenu"><a href="solutions.html" target="_blank" title="SOLUTIONS" style="height:50px;line-height:50px;">SOLUTIONS</a></li>
	<li class="topmenu"><a href="support.html" target="_blank" title="SUPPORT" style="height:50px;line-height:50px;">SUPPORT</a></li>
	<li class="toplast"><a href="contacts.html" target="_blank" title="Contacts" style="height:50px;line-height:50px;">Contacts</a></li>
</ul>


J'ai essayé de le mettre à la place de l'autre, mais ça aurait été trop facile.ça ne va pas, il faut certainement modifier le fichier css existant.
Modifié par seboseboss (15 Jun 2011 - 11:16)
Salut,

Ton code est extrêmement lourd :

- Pourquoi ajouter des target="_blank" partout, alors qu'il s'agit du même site ? Même un lien vers un autre site ne justifie pas vraiment d'ouvrir une nouvelle fenêtre.

- Pourquoi ajouter des classes à tous tes <li> ? En ajouter au premier et au dernier pour les styliser différemment des intermédiaires, je peux comprendre. En revanche, les intermédiaires sont facile à cibler par défaut. Et les <li> du deuxième niveau de menu, peuvent être ciblés indépendamment par la hiérarchie parents/enfants de la structure HTML :

ul { placer ici les style de la liste du menu de niveau 1 }
ul li { placer ici les style des éléments de liste du menu de niveau 1 }
ul li ul { placer ici les style de la liste du menu de niveau 2 }
ul li ul li { placer ici les style des éléments de liste du menu de niveau 2 }

- Pourquoi ajouter un alt à ton icône, qui reprend l'intitulé exact du lien qui la suit ? Dans une synthèse vocale, l'utilisateur entendra deux fois l'intitulé de chaque lien. Etant uniquement décorative, son attribut alt doit être laissé vide. Si elle était le seul élément cliquable du lien, alors elle devrait en comporter l'intitulé, mais ce n'est pas le cas ici.
Modifié par Mikachu (15 Jun 2011 - 12:07)
salut

Merci pour tout tes conseils, a vrai dire c'est le logiciel qui fait le montage html css, voila pourquoi il y a des choses qui servent à rien, mais je peut modifier donc ça roule.

J'utilise ce logiciel car la programmation n'est pas mon domaine, mais je peut faire les modifs.

je fais les modifs et je te montre aprés, cette fois je vais redémarrer de zero.
Juste pour info voila le fichier css du menu:


ul#css3menu1,ul#css3menu1 ul{
	margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menu1 ul{
	display:none;position:absolute;left:0;top:100%;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;padding:0 10px 10px;background-color:#424542;border-width:2px;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#FFF;}
ul#css3menu1 li:hover>*{
	display:block;}
ul#css3menu1 li:hover{
	position:relative;}
ul#css3menu1 ul ul{
	position:absolute;left:100%;top:0;}
ul#css3menu1{
	display:block;font-size:0;float:left;}
ul#css3menu1 li{
	display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1>li,ul#css3menu1 li{
	margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
	outline-style:none;}
ul#css3menu1 a,ul#css3menu1 a.pressed{
	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:20px Arial;color:#ffffff;text-shadow:#FFF 0 0 1px;cursor:pointer;}
ul#css3menu1 ul li{
	float:none;margin:10px 0 0;}
ul#css3menu1 ul a{
	text-align:left;padding:4px;background-color:#424542;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:17px Tahoma;color:#ffffff;text-decoration:none;text-shadow:#FFF 0 0 0;}
ul#css3menu1 li:hover>a{
	background-color:#000000;border-color:#C0C0C0;border-style:solid;font:20px Arial;color:#6ba603;text-decoration:none;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;}
ul#css3menu1 img{
	border:none;vertical-align:middle;margin-right:10px;}
ul#css3menu1 img.over{
	display:none;}
ul#css3menu1 li:hover > a img.def{
	display:none;}
ul#css3menu1 li:hover > a img.over{
	display:inline;}
ul#css3menu1 li a.pressed img.over{
	display:inline;}
ul#css3menu1 li a.pressed img.def{
	display:none;}
ul#css3menu1 span{
	display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 a{
	padding:10px;background-color:#090909;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;color:#ffffff;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menu1 li:hover>a,ul#css3menu1 li>a.pressed{
	background-color:#000000;background-image:url("mainbk.png");background-position:0 100px;border-style:solid;border-color:#C0C0C0;color:#6ba603;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li>a.pressed{
	background-color:#424542;background-image:none;font:17px Tahoma;color:#6ba603;text-decoration:none;text-shadow:#FFF 0 0 0;}
ul#css3menu1 li.topfirst>a{
	height:18px;line-height:18px;border-width:0;border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}
ul#css3menu1 li.topfirst:hover>a,ul#css3menu1 li.topfirst>a.pressed{
	line-height:18px;}
ul#css3menu1 li.topmenu>a{
	height:18px;line-height:18px;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu>a.pressed{
	line-height:18px;}
ul#css3menu1 li.toplast>a{
	height:18px;line-height:18px;border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;}
ul#css3menu1 li.toplast:hover>a,ul#css3menu1 li.toplast>a.pressed{
	line-height:18px;}
J'ai encore un autre problème, sur les essais que j'ai fait mon sous menu est caché, il ne passe pas par dessus mais par derrière l'image qui se trouve en dessous du menu, pour info c'est du js qui affiche cette image
seboseboss a écrit :
J'utilise ce logiciel car la programmation n'est pas mon domaine, mais je peut faire les modifs.

J'ai envie de dire que dans ce genre de cas il faut faire appel à des gens dont c'est le domaine. Et je ne parle pas d'une demande d'aide sur un forum, mais bien de faire appel à un prestataire pro. (Je crois comprendre, d'après le contenu de ce menu, qu'il s'agit d'un site à vocation professionnelle et pas un site perso.)
Sujet clos
Aller à