Bonsoir,
encore moi!!!
cette fois c'est un soucis avec un menu déroulant quand on clic dessus.
le soucis j'arrive pas à agrandir le block du menu en largeur, et aussi le fait que lorsque la description dans le menu est plus grande que le block(en hauteur) le block s'agrandise automatiquement sans motre sour le menu de dessous.
Voila, je vous joint le code, si quelqu'un peut m'aider!!!
code 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';}
}
//-->
Code CSS:que j'ai eu sur alsacreations
/* padding 20=écartement entre les menus */
dl, dt, dd, ul, li {
margin: 0;
padding: 20;
list-style-type: none;
height: auto;
width: 200px;
}
/* left= écartement du sous menu par rapport à la bordure */
#menu {
/* placement du menu, à modifier selon vos besoins */
margin-right:auto;
top: 0;
left: 5;
height: auto;
width: 200px;
}
dl#menu {
width: 15em;
height: auto;
width: 160px;
}
dl#menu dt {
cursor: pointer;
margin: 2px 0;
;
height: 20px;
line-height: 20px;
text-align: left;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
width: 160px;
}
dl#menu dd {
border: 1px solid gray;
}
dl#menu li {
text-align: left;
background: #fff;
}
dl#menu li a, dl#menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
dl#menu li a:hover, dl#menu dt a:hover {
background: #eee;
}
#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: #222;
}
#mentions a:hover{text-decoration: underline;
}
code html:
<td width="189" valign="top" bgcolor="#FFFFFF">
<table border="0" cellspacing="0" cellpadding="0" width="189" id="navigation">
<dl id="menu">
<dt onclick="javascript:montre();"><a href="#">Menujennaz jzkrka kjmhg akr 1</a></dt>
<dt onclick="javascript:montre('smenu2');">Menu 2</dt>
<dd id="smenu2">
<ul>
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
</ul>
</dd>
<dt onclick="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
</ul>
</dd>
<dt onclick="javascript:montre('smenu4');">Menu 4</dt>
<dd id="smenu4">
<ul>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.1</a></li>
</ul>
</dd>
</dl>
</table>
Merci