1 Aide menu déroulant 11/11/2011, 13:10
pierre31
(Membre)
Bonjours, j'ai installer le menu déroulant se trouvant sur ce forum, mais j'aimerai mettre des image a la place de l'écriture!
Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous
En bleu la partie que tu ajoutes à autant de sous-menus que tu as et qui dans le HTML doivent concorder.function montre(id)
{
var d = document.getElementById(id);
d.style.display='block';
}
function cache()
{
document.getElementById('smenu1').style.display='none';
}
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr><td align="center">
<div id="menu">
<dl onmouseover="javascript:montre('smenu1');" onmouseout="javascript:cache()">
<dt><img src="http://i44.servimg.com/u/f44/14/64/74/74/sansre10.png" alt="blabla" /></dt>
<dd id="smenu1">
<ul>
<li><a href="http://url-votre-forum.com/index.htm"><img src="http://i44.servimg.com/u/f44/14/64/74/74/sansre11.png" alt="blabla" /></a></li>
</ul>
</dd>
</dl>
</div>
</td></tr></table>
#menu {
height: 133px;
width: auto;
margin: 0 auto;
}
#menu dl {
position: relative;
float: left;
width: 13%;
margin: 0 auto;
}
#menu dt {
display: block;
top: 0px;
left: 0px;
width: 95px;
height: 26px;
margin: 0 3px 2px 0px;
cursor: pointer;
z-index: 1;
}
#menu dt:hover {
/*proprietes du hover sur la partie titre*/
}
dd, ul, li {
padding: 0px;
margin: 0px;
}
#menu dd {
display: none;
}
#menu li {
display: block;
}
#menu li a img {
width: 95px;
height: 25px;
margin: 0 0 26px 0px;
z-index: 1;
}
#menu li a img:hover {
/*proprietes du hover sur la partie sous menus*/
}
<td align="{MENU_POSITION}"{MENU_NOWRAP}><table border="0" cellpadding="0" cellspacing="0" align="center">
<tbody><tr>
<td align="center"> <div id="menu">
<dl onmouseover="javascript:montre('smenu1');" onmouseout="javascript:cache()">
<dt>Accueil</dt>
<dd id="smenu1">
<ul>
<li><a href="http://discutions-en-france.forumgratuit.org/">Forum</a></li>
<li><a href="http://discutions-en-france.forumgratuit.org/" target="_blank">FAQ</a></li>
<li><a href="http://discutions-en-france.forumgratuit.org/">Search</a></li>
</ul>
</dd>
</dl>
<dl onmouseover="javascript:montre('smenu2');" onmouseout="javascript:cache()">
<dt>Membres</dt>
<dd id="smenu2">
<ul>
<li><a href="http://discutions-en-france.forumgratuit.org/memberlist.forum" target="_blank">Membres</a></li>
<li><a href="http://discutions-en-france.forumgratuit.org/groupcp.forum" target="_blank">Groupes</a></li>
</ul>
</dd>
</dl>
<dl onmouseover="javascript:montre('smenu3');" onmouseout="javascript:cache()">
<dt>Profil</dt>
<dd id="smenu3">
<ul>
<li><a href="http://discutions-en-france.forumgratuit.org/profile.forum?mode=editprofile">Infos</a></li>
<li><a href="http://discutions-en-france.forumgratuit.org/profile.forum?mode=editprofile&page_profil=preferences" target="_blank">Preferences</a></li>
<li><a href="http://discutions-en-france.forumgratuit.org/profile.forum?mode=editprofile&page_profil=avatars" target="_blank">Avatar</a></li>
<li><a href="http://discutions-en-france.forumgratuit.org/search.forum?search_id=watchsearch">Sujets srveillés</a></li>
<li><a href="http://discutions-en-france.forumgratuit.org/search.forum?search_id=egosearch">Mes favoris</a></li>
</ul>
</dd>
</dl>
<dl onmouseover="javascript:montre('smenu4');" onmouseout="javascript:cache()">
<dt>Messagerie</dt>
<dd id="smenu4">
<ul>
<li><a href="http://discutions-en-france.forumgratuit.org/msg.forum?folder=inbox" target="_blank">Boite de réception</a></li>
<li><a href="http://discutions-en-france.forumgratuit.org/msg.forum?folder=sentbox" target="_blank">Messages envoyés</a></li>
<li><a href="http://discutions-en-france.forumgratuit.org/msg.forum?folder=outbox" target="_blank">boite d'envoi</a></li>
</ul>
</dd>
</dl>
<dl onmouseover="javascript:montre('smenu5');" onmouseout="javascript:cache()">
<dt>Logs</dt>
<dd id="smenu5">
<ul>
<li><a href=http://discutions-en-france.forumgratuit.org/login.forum?connexion">connection</a></li>
<li><a href="http://discutions-en-france.forumgratuit.org/login.forum?logout=true">déconnection</a></li>
<li><a href="http://discutions-en-france.forumgratuit.org/profile.forum?mode=register">Senregistrer</a></li>
</ul>
</dd>
</dl>
</div>
</td></tr></tbody></table>
#menu { height: 190px;
}
#menu dl {
float: left;
width: 9em; height: 0em;
}
#menu dt {
cursor: pointer;
text-align: center;
color: #1212E8;
background: ##CECECE url('http://url_image.png') top left repeat-x;
border: ? ? #F00909;
padding: left;left//
margin-right: 5px;
z-index: 3;
}
#menu dt:hover {à vous de voir !;
}
dd, ul, li {
padding: 2px;
margin: 2x;
}
#menu dd {
z-index: 4;
background: #color url('http://url-image.png') top left repeat-x;
display: none;
border: 2px 2 #E81212;
padding: 2px 2px 2px 2px;
margin: -1px 2px 34px 2px;left//
}
#menu li {
padding: 2px 2px 2px 2px;
}
#menu li a {
color: #F00909;
text-align: center;
display: block;
height: 12%;
}
#menu li a:hover
function montre(id)
{
var d = document.getElementById(id);
d.style.display='block';
}
function cache()
{
document.getElementById('smenu1').style.display='none';
document.getElementById('smenu2').style.display='none';
document.getElementById('smenu3').style.display='none';
document.getElementById('smenu4').style.display='none';
document.getElementById('smenu5').style.display='none';
document.getElementById('smenu6').style.display='none';
}
Sujets similaires
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum