28172 sujets
CSS et mise en forme, CSS3
Merci pour votre réponse
J'aimerai bien ajouter un side-menu dans le submenu
SERVICES/CHAUFFAGE CENTRALE
voici le code html pour menu
et le css:
Merci d'avance
Modifié par britneycole (03 Aug 2015 - 12:07)
J'aimerai bien ajouter un side-menu dans le submenu
SERVICES/CHAUFFAGE CENTRALE
voici le code html pour menu
<div class="main2">
<nav class="menu">
<ul id="menu">
<li><a href="#!/accueil"><span class="over"></span><span class="txt1">Page d'accueil</span></a></li>
<li><a href="#!/apropos"><span class="over"></span><span class="txt1">À propos de nous</span></a></li>
<li class="with_ul"><a href="#!"><span class="over"></span><span class="txt1">Services</span></a>
<div class="submenu">
<ul>
<li><a href="#!/page_chauffage">Chauffage Centrale</a></li>
<li><a href="#!/page_SERVICES2">Sanitaire</a></li>
<li><a href="#!/page_SERVICES3">Salle de bain clé sur porte</a></li>
<li><a href="#!/page_SERVICES4">Ventilation</a></li>
<li><a href="#!/page_SERVICES5">Climatisation</a></li>
<li><a href="#!/page_SERVICES5">Dépannage</a></li>
</ul>
</div>
</li>
<li class="with_ul"><a href="#!"><span class="over"></span><span class="txt1">Entretien</span></a>
<div class="submenu">
<ul>
<li><a href="#!/pourquoilentretien">Pourquoi entretenir sa chaudiére</a></li>
<li><a href="#!/page_SERVICES">Réservez un entretien</a></li>
</ul>
<li><a href="#!/page_PROJECTS"><span class="over"></span><span class="txt1">Réalisations</span></a>
<div class="submenu">
<ul>
<li><a href="#!/page_SERVICES1">Chauffage Centrale</a></li>
<li><a href="#!/page_SERVICES2">Sanitaire</a></li>
<li><a href="#!/page_SERVICES3">Salle de bain clé sur porte</a></li>
<li><a href="#!/page_SERVICES4">Ventilation</a></li>
<li><a href="#!/page_SERVICES5">Climatisation</a></li>
<li><a href="#!/page_SERVICES5">Dépannage</a></li>
</ul>
</div>
</li>
<li><a href="#!/page_PARTNERS"><span class="over"></span><span class="txt1">Partenaires</span></a></li>
<li><a href="#!/page_CONTACTS"><span class="over"></span><span class="txt1">Contact</span></a></li>
<li class="last"></li>
</ul>
</nav>
<nav class="menu_splash">
<ul id="menu_splash">
<li class="nav1"><a href="#!/page_SERVICES1"><span class="over"><span class="txt1"></span></span></a></li>
<li class="nav2"><a href="#!/page_SERVICES2"><span class="over"><span class="txt1"></span></span></a></li>
<li class="nav3"><a href="#!/page_SERVICES3"><span class="over"><span class="txt1"></span></span></a></li>
<li class="nav4"><a href="#!/page_SERVICES4"><span class="over"><span class="txt1"></span></span></a></li>
<li class="nav5"><a href="#!/page_SERVICES5"><span class="over"><span class="txt1"></span></span></a></li>
</ul>
</nav>
<div class="px1"></div>
<div class="px2">
<div class="bg2"></div>
<div class="hl1"></div>
<div class="hl2"></div>
<div class="splash">
<a href="#" class="prev1"></a>
<a href="#" class="next1"></a>
<ul id="caption">
<li class="nav1">
<div class="txt1"></div>
<div class="txt2"></div>
</li>
<li class="nav2">
<div class="txt1"></div>
<div class="txt2"></div>
</li>
<li class="nav3">
<div class="txt1"> </div>
<div class="txt2"></div>
</li>
<li class="nav4">
<div class="txt1"> </div>
<div class="txt2"></div>
<li class="nav5)">
<div class="txt1"> </div>
<div class="txt2"></div>
</li>
</ul>
</div>
et le css:
/* ============================= main menu ====================== */
.menu { display:block; width:100%; height:55px; position:absolute; left:0; top:0px; z-index:10; text-align:center; white-space:nowrap;}
#menu { display:inline-block;}
#menu > li { display:inline-block;height:55px;padding-left:2px; position:relative; float:left;white-space:nowrap; background:url(../images/markers.png) 0 0 no-repeat;}
#menu > li.last{}
#menu > li > a{display:inline-block; height:55px; text-decoration:none; position:relative; padding:0 20px; overflow:hidden;}
#menu > li > a .over{display:block;position: absolute;width:100%; height:55px; left:0px; top:55px; z-index:10; background: url(../images/nav.png) left bottom repeat-x;}
#menu > li > a .txt1{ display:block; position: relative; width:100%; height:100%; left:0px; top:0px; z-index:5;font-family:'CODEBold';font-size:24px; line-height:60px; color:#c2ccdc; text-decoration:none; text-transform:none; text-shadow:1px 1px 1px #000; }
#menu > li > a:hover .over, #menu > li.sfHover > a .over{ top:0px;}
#menu > li.active > a .over{ top:55px;}
.submenu{ position:absolute; z-index:1; top:55px; left:2px;}
.submenu > ul{ padding:0px 0; }
.submenu ul > li{ display:block; width:100%; height:27px; position:relative; text-align:left; border-top:1px solid #1d5a78; border-bottom:1px solid #1e3652;}
.submenu ul > li > a{ display:block;height:100%;text-decoration:none; position: relative; font-family:'CodeLight';font-size:18px; line-height:27px; color:#c2ccdc; white-space:nowrap; padding:0 20px; text-transform:none; background:#244162;}
Merci d'avance
Modifié par britneycole (03 Aug 2015 - 12:07)
Ton site est en ligne ?
parce que voila ce que cela donne
http://codepen.io/anon/pen/rVoZgL
manque une partie ^^
parce que voila ce que cela donne
http://codepen.io/anon/pen/rVoZgL
manque une partie ^^
merci encore
non je le modife localement,si tu veux,je peux le mettre en ligne,
c'est quoi la partie manquante?
voila le trasnfert via ftp est fini
voila le lien vers le site malgré que je n'ai pas encore fini la modification
http://maghrebi.info/html5
un grand merci pour ton soutien
non je le modife localement,si tu veux,je peux le mettre en ligne,
c'est quoi la partie manquante?
voila le trasnfert via ftp est fini
voila le lien vers le site malgré que je n'ai pas encore fini la modification
http://maghrebi.info/html5
un grand merci pour ton soutien
En faite, c'est gérer d'une telle façon que cela devient très compliquer à "gérer"......
il faudrait que mettre ton sous-sous menu dans une div qui s'afficherai au survol du lien dans le sous menu parent.
et au passage, fait gaffe au responsive, Google sanctionne la non responsivité maintenant.
Modifié par JENCAL (03 Aug 2015 - 15:52)
il faudrait que mettre ton sous-sous menu dans une div qui s'afficherai au survol du lien dans le sous menu parent.
et au passage, fait gaffe au responsive, Google sanctionne la non responsivité maintenant.
Modifié par JENCAL (03 Aug 2015 - 15:52)