... j'ai donc fini par mettre les mains dans la lessive Ajax et j'aimerai réaliser ce type de navigation :
http://sandbox.leigeber.com/dropdown/dropdown.html
code expliqué : http://www.leigeber.com/2008/04/sliding-ja...-dropdown-menu/
mais n'étant pas super calée en prog je n'arrive pas à résoudre un problème d'affichage d'image
pour le fond des boutons... (je voudrais un rendu comme ici : http://www.cabinet-blay.fr )
Voici la CSS :
CODE
body {margin:25px;}
* {padding:0; margin:0}
.dropdown {float:left;/*padding-right:5px*/}
.dropdown dt {width:159px;/*border:0px solid #9ac1c9;padding:8px;*/ background:url("images/fds_btn.jpeg"); font:13px Arial; color:#f9f0d3; font-weight:bold; cursor:pointer; }
.dropdown dt:hover {background:url('images/fds_btn.jpeg');font:13px Arial; font-color:#f9f0d3; font-weight:bold; }
.dropdown dd {position:absolute; overflow:hidden; width:159px; display:none; font:12px Arial; font-color:#f9f0d3; font-weight:bold; background:#b6b15f; z-index:200; opacity:0}
.dropdown ul {width:159px; /*border:2px solid #9ac1c9;*/ list-style:none; border-top:none}
.dropdown li {display:inline}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:3px; color:#f9f0d3; text-decoration:none; background:#7e7948; width:159px}
.dropdown a:hover {background:url('images/fds_btn.jpeg'); /*color:#f9f0d3*/}
.dropdown .underline {/*border-bottom:1px */solid #b9d6dc}
* {padding:0; margin:0}
.dropdown {float:left;/*padding-right:5px*/}
.dropdown dt {width:159px;/*border:0px solid #9ac1c9;padding:8px;*/ background:url("images/fds_btn.jpeg"); font:13px Arial; color:#f9f0d3; font-weight:bold; cursor:pointer; }
.dropdown dt:hover {background:url('images/fds_btn.jpeg');font:13px Arial; font-color:#f9f0d3; font-weight:bold; }
.dropdown dd {position:absolute; overflow:hidden; width:159px; display:none; font:12px Arial; font-color:#f9f0d3; font-weight:bold; background:#b6b15f; z-index:200; opacity:0}
.dropdown ul {width:159px; /*border:2px solid #9ac1c9;*/ list-style:none; border-top:none}
.dropdown li {display:inline}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:3px; color:#f9f0d3; text-decoration:none; background:#7e7948; width:159px}
.dropdown a:hover {background:url('images/fds_btn.jpeg'); /*color:#f9f0d3*/}
.dropdown .underline {/*border-bottom:1px */solid #b9d6dc}
et le html :
CODE
<html>
<body>
<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">L'AGENCE</dt>
<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
<ul>
<li><a href="#" class="underline">Son histoire</a></li>
<li><a href="#" class="underline">Son équipe</a></li>
<li><a href="#" class="underline">La Roche de Glun</a></li>
</ul>
</dd>
</dl>
<dl class="dropdown">
<dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)">SES SERVICES</dt>
<dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
<ul>
<li><a href="#" class="underline">Vous êtes propriétaire</a></li>
<li><a href="#" class="underline">Vous cherchez un bien</a></li>
</ul>
</dd>
</dl>
<dl class="dropdown">
<dt id="three-ddheader" onmouseover="ddMenu('three',1)" onmouseout="ddMenu('three',-1)">CONTACT</dt>
<dd id="three-ddcontent" onmouseover="cancelHide('three')" onmouseout="ddMenu('three',-1)">
<ul>
<li><a href="#" class="underline">Plan d'accès</a></li>
<li><a href="#" class="underline">Nous contacter</a></li>
</ul>
</dd>
</dl>
<dl class="dropdown">
<dt id="four-ddheader" onmouseover="ddMenu('four',1)" onmouseout="ddMenu('four',-1)">INFORMATIONS</dt>
<dd id="four-ddcontent" onmouseover="cancelHide('four')" onmouseout="ddMenu('four',-1)">
<ul>
<li><a href="#" class="underline">Liens utiles</a></li>
<li><a href="#" class="underline">Mentions légales</a></li>
<li><a href="#" class="underline">Accès réservé</a></li>
</ul>
</dd>
</dl>
<div style="clear:both" />
Nulla ultrices, dolor quis ullamcorper eleifend, pede tortor dignissim lorem, in condimentum diam mi ut risus. Vivamus ligula dui, viverra et, suscipit ac, scelerisque adipiscing, orci. Sed a nisi. Donec dui. Maecenas erat mauris, molestie nec, suscipit vel, scelerisque sit amet, tortor. Nunc egestas aliquam sapien. Proin ante pede, placerat id, eleifend id, pellentesque posuere, odio. Nulla facilisi. Curabitur tincidunt convallis sapien. Maecenas vehicula sodales neque. Vivamus sed elit vitae dui vulputate molestie. Nulla facilisi. Praesent molestie risus ut odio.
</body>
</html>
<body>
<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">L'AGENCE</dt>
<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
<ul>
<li><a href="#" class="underline">Son histoire</a></li>
<li><a href="#" class="underline">Son équipe</a></li>
<li><a href="#" class="underline">La Roche de Glun</a></li>
</ul>
</dd>
</dl>
<dl class="dropdown">
<dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)">SES SERVICES</dt>
<dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
<ul>
<li><a href="#" class="underline">Vous êtes propriétaire</a></li>
<li><a href="#" class="underline">Vous cherchez un bien</a></li>
</ul>
</dd>
</dl>
<dl class="dropdown">
<dt id="three-ddheader" onmouseover="ddMenu('three',1)" onmouseout="ddMenu('three',-1)">CONTACT</dt>
<dd id="three-ddcontent" onmouseover="cancelHide('three')" onmouseout="ddMenu('three',-1)">
<ul>
<li><a href="#" class="underline">Plan d'accès</a></li>
<li><a href="#" class="underline">Nous contacter</a></li>
</ul>
</dd>
</dl>
<dl class="dropdown">
<dt id="four-ddheader" onmouseover="ddMenu('four',1)" onmouseout="ddMenu('four',-1)">INFORMATIONS</dt>
<dd id="four-ddcontent" onmouseover="cancelHide('four')" onmouseout="ddMenu('four',-1)">
<ul>
<li><a href="#" class="underline">Liens utiles</a></li>
<li><a href="#" class="underline">Mentions légales</a></li>
<li><a href="#" class="underline">Accès réservé</a></li>
</ul>
</dd>
</dl>
<div style="clear:both" />
Nulla ultrices, dolor quis ullamcorper eleifend, pede tortor dignissim lorem, in condimentum diam mi ut risus. Vivamus ligula dui, viverra et, suscipit ac, scelerisque adipiscing, orci. Sed a nisi. Donec dui. Maecenas erat mauris, molestie nec, suscipit vel, scelerisque sit amet, tortor. Nunc egestas aliquam sapien. Proin ante pede, placerat id, eleifend id, pellentesque posuere, odio. Nulla facilisi. Curabitur tincidunt convallis sapien. Maecenas vehicula sodales neque. Vivamus sed elit vitae dui vulputate molestie. Nulla facilisi. Praesent molestie risus ut odio.
</body>
</html>
Si vous avez quelques indices du pourquoi mon image ne s'affiche pas, n'hésitez pas à m'expliquer
Mille merci !
