Bonjour à tous !
Je suis nouveau sur le forum mais ça fais déjà quelques mois que je regardes les tutos de ce merveilleux site !
Et donc voilà, je voudrais recommencer à 0 mon site et faire un design plus ou moins identique à l'interface Aero de Vista.
Pour info, j'en suis là : http://crackeur.fr.tc/n-21_design/.
Et comme vous pouvez le remarquer, le menu Windows se déroule à la perfection mais par contre, il ne veut pas s'enrouler dès qu'on ne le survole plus. On est obligé de réactualiser la page !
Et donc je voudrais savoir qu'est-ce qu'il me manque comme code pour que mon menu translucide puisse s'enrouler à sa place initiale.
Voici le bout de code en HTML :
Et la feuille de style CSS :
Je suis nouveau sur le forum mais ça fais déjà quelques mois que je regardes les tutos de ce merveilleux site !
Et donc voilà, je voudrais recommencer à 0 mon site et faire un design plus ou moins identique à l'interface Aero de Vista.
Pour info, j'en suis là : http://crackeur.fr.tc/n-21_design/.
Et comme vous pouvez le remarquer, le menu Windows se déroule à la perfection mais par contre, il ne veut pas s'enrouler dès qu'on ne le survole plus. On est obligé de réactualiser la page !
Et donc je voudrais savoir qu'est-ce qu'il me manque comme code pour que mon menu translucide puisse s'enrouler à sa place initiale.
Voici le bout de code en HTML :
...
<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>
</head>
<body>
<div id="barre_de_taches">
<div id="menu">
<dl>
<dt onmouseover="javascript:montre('smenu1');"><img src="images/bouton_demarrer.png" alt="Démarrer" name="bouton_demarrer" id="bouton_demarrer" /></dt>
<dd id="smenu1">
<ul>
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
<li><a href="#">Sous-Menu 1.4</a></li>
<li><a href="#">Sous-Menu 1.5</a></li>
<li><a href="#">Sous-Menu 1.6</a></li>
</ul>
</dd>
</dl>
</div>
</div>
...
Et la feuille de style CSS :
body {
margin: 0;
padding: 0;
background-image: url(images/wallpaper.jpg);
font: 80% verdana, arial, sans-serif;
}
#barre_de_taches {
position: fixed;
background-image: url(images/fond_barre_de_taches.png);
background-position: bottom;
background-repeat: repeat-x;
height: 800px;
bottom: 0px;
left: 0px;
width: 100%;
}
#bouton_demarrer {
position: fixed;
bottom: 0px;
left: 0px;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
}
#menu {
position: fixed;
bottom: 17px;
left: 5px;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 300px; /* Largeur du menu déroulant */
position: fixed;
}
#menu dt {
cursor: pointer;
}
#menu dd {
background-image: url(images/background_menu.png);
font-weight: bold;
position: absolute;
bottom: 1.5em;
width: 100%;
}
#menu li {
text-align: left;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover { /* Survol dans le menu */
background-image: url(images/background_menu_hover.png);
background-repeat: repeat-x;
}
a {text-decoration: none;
color: black;
color: #222;
}
