Bonjour jai utilisé le tuto alsacreation pour réaliser un menu horizontal (merci Alsa au passage pour vos tutos qui excellent dans la praticité et la simplicité) et j'y ai apporté quelques modifs mais souhaiterais supprimer un problème et ajouter encore un petit +
Le problème: lors du chargement de la page, Tous les sous menus sont affichés sur la page jusqu'à la fin du chargement. C'est vraiment pas beau et ça manque de finition. Existe t'il une solution autre que de forcer l'affichage d'une bande blanche pour masquer?
Amélioration: Je souhaiterais mettre la couleur du menu actif de la même couleur que le sous menu.
La page est en ligne mais ne souhaite pas faire de lien pour les spiders.
l'adresse -> cjts-immobilier.com
Le code:
La feuille de style:
Merci pour votre aide et n'hésitez pas si vous avez des remarques.
Modifié par chooky (07 Jul 2005 - 16:31)
Le problème: lors du chargement de la page, Tous les sous menus sont affichés sur la page jusqu'à la fin du chargement. C'est vraiment pas beau et ça manque de finition. Existe t'il une solution autre que de forcer l'affichage d'une bande blanche pour masquer?
Amélioration: Je souhaiterais mettre la couleur du menu actif de la même couleur que le sous menu.
La page est en ligne mais ne souhaite pas faire de lien pour les spiders.
l'adresse -> cjts-immobilier.com
Le code:
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<d1><dt onmouseover="montre('smenu1');"><a href="#"> </a></dt>
<dd id="smenu1">
<ul>
<li><a href="#"> </a></li>
</ul>
</dd>
</dl>
<d1><dt onmouseover="montre('smenu2');"><a href="http://www.cjts-immobilier.com" title="Accueil du site">Acceuil</a></dt>
<dd id="smenu2">
<ul>
<li><a href="#"> </a></li>
</ul>
</dd>
</dl>
<d1><dt onmouseover="montre('smenu3');"><a href="http://www.cjts-immobilier.com/location_saint_martin.html" title="Location villa">Location</a></dt>
<dd id="smenu3">
<ul>
<li><a href="#">villa</a></li>
<li><a href="#">appartement</a></li>
<li><a href="#">studio</a></li>
</ul>
</dd>
</dl>
<d1>
<dt onmouseover="montre('smenu4');"><a href="http://www.cjts-immobilier.com" title="Accueil du site">Vente</a></dt>
<dd id="smenu4">
<ul>
<li><a href="#">Villa</a></li>
<li><a href="#">Appartement</a></li>
<li><a href="#">Fond de commerce</a></li>
</ul>
</dd>
</dl>
<d1>
<dt onmouseover="montre('smenu5');"><a href="http://www.cjts-immobilier.com/location_saint_martin.html" title="Location villa">Informations</a></dt>
<dd id="smenu5">
<ul>
<li><a href="#">Saint Martin</a></li>
<li><a href="#">Société</a></li>
<li><a href="#">Juridique</a></li>
</ul>
</dd>
</dl>
<d1>
<dt onmouseover="montre('smenu6');"><a href="http://www.cjts-immobilier.com/contact_agence.html" title="Contacter l'agence">Contact</a></dt>
<dd id="smenu6">
<ul>
</ul>
</dd>
</dl>
</div>
La feuille de style:
div#menu2 {
height: 30px;
width: 770px;
background-image: url(images/bg_menu2.jpg);
background-repeat: no-repeat;
display: block;
}
#menu2 dt a {
height: 30px;
width: 110px;
line-height: 30px;
color: #41ACCB;
font-family: "Trebuchet MS";
font-size: 16px;
text-decoration: none;
font-weight: bold;
float: left;
text-align: center;
}
#menu2 dl {
float: left;
margin:0;
padding:0;
}
ul#menu2 {
margin:0;
padding:0;
}
#menu2 li {
display: inline;
}
#menu2 li a {
display: inline;
height: 50px;
line-height: 30px;
color: #CC33FF;
font-family: "Trebuchet MS";
font-size: 14px;
text-decoration: none;
font-weight: bold;
padding: 20px;
width: 90px;
}
#smenu1 { position: absolute; left: 0px; top: 0px; }
#smenu2 { position: absolute; left: 0px; top: 0px; }
#smenu3 { position: absolute; left: 270px; top: 215px; }
#smenu4 { position: absolute; left: 280px; top: 215px; }
#smenu5 { position: absolute; left: 350px; top: 215px; }
#smenu6 { position: absolute; left: 0px; top: 10px; }
dt, dl, dd, ul, li {
list-style-type: none;
margin: 0 10px 0 0;
padding: 0;
}
Merci pour votre aide et n'hésitez pas si vous avez des remarques.
Modifié par chooky (07 Jul 2005 - 16:31)