Bonjour à tous...
Je viens faire un apel de pros... j'ai "bidouiller" tout un petit menu qui pour moi est assez simple et donne pas mal, mais mes connaissances et les sites visités, ne me donne pas réponse. J'ai copié collé et autres petites choses cherchées, mais je n'obtient pas la suivantes...
Je colle ci-dessous mon script etle but serait que les sous-menus s'affichent à un décallage du bord (comme le premier sous-menu) et qu'une fois un sous-menu ouvert il apprait un peu transparant mais avec les même tons de couleurs.
Pourriez vous adapter la suivante?s remercie vraiment si ceci serait possible...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>Liste menu</title>
<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>
<style type="text/css">
h3 {font-family:arial, sans-serif; font-weight:normal; font-size:1.5em; letter-spacing:-2px; color:#999;}
h4 {font-family:arial, sans-serif; font-weight:normal; font-size:1em; color:#aaa;}
#menu {
position:absolute;
padding:0;
margin:0;
width:0;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu li {
list-style-type:none;
margin:0 0 0.25em 0;
}
#menu a, #menu a:visited {
display:block;
width:9em;
border:1px solid #808;
font-family:arial, verdana, sans-serif;
font-size:0.8em;
text-align:center;
text-decoration:none;
background:#808;
color:#eee;
padding:0.25em;
}
#menu a span {
display:none;
}
#menu a:hover {
background:#ddd;
color:#808;
}
#menu a:hover span {
display:block;
position:absolute;
left:10em;
top:0;
text-align:left;
padding:0.5em;
width:14em;
background-color:#eee;
color:#000;
border:1px solid #808;
}
</style>
</head>
<body>
<ul id="menu">
<li>
<a href="#nogo"><dt onclick="javascript:montre('smenu1');">Menu1<span>Test1</span></a></dt>
<ul>
<dd id="smenu1">
<li><a href="#" >Sous-menu1.1</a></li>
<li><a href="#" >Sous-menu1.2</a></li>
</dd>
</ul>
</li>
<li>
<a href="#nogo"><dt onclick="javascript:montre('smenu2');">Menu2<span>Test2</span></a></dt>
<ul>
<dd id="smenu2">
<li><a href="#" >sous-menu2.1</a></li>
<li><a href="#" >sous-menu2.2</a></li>
</dd>
</ul>
</li>
<li>
<a href="#nogo"><dt onclick="javascript:montre('smenu3');">Menu3<span>Test3</span></a></dt>
<ul>
<dd id="smenu3">
<li><a href="#" >sous-menu3.1</a></li>
<li><a href="#" >sous-menu3.2</a></li>
<li><a href="#" >sous-menu3.3</a></li>
</dd>
</ul>
</li>
<li>
<a href="#nogo"><dt onclick="javascript:montre('smenu4');">Menu4<span>Test4</span></a></dt>
<ul>
<dd id="smenu4">
<li><a href="#" >sous-menu4.1</a></li>
<li><a href="#" >sous-menu4.2</a></li>
</dd>
</ul>
</li>
<li>
<a href="#nogo"><dt onclick="javascript:montre();">Menu5<span>Test5</span></a></dt>
</li>
</ul>
</body>
</html>
Je viens faire un apel de pros... j'ai "bidouiller" tout un petit menu qui pour moi est assez simple et donne pas mal, mais mes connaissances et les sites visités, ne me donne pas réponse. J'ai copié collé et autres petites choses cherchées, mais je n'obtient pas la suivantes...
Je colle ci-dessous mon script etle but serait que les sous-menus s'affichent à un décallage du bord (comme le premier sous-menu) et qu'une fois un sous-menu ouvert il apprait un peu transparant mais avec les même tons de couleurs.
Pourriez vous adapter la suivante?s remercie vraiment si ceci serait possible...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>Liste menu</title>
<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>
<style type="text/css">
h3 {font-family:arial, sans-serif; font-weight:normal; font-size:1.5em; letter-spacing:-2px; color:#999;}
h4 {font-family:arial, sans-serif; font-weight:normal; font-size:1em; color:#aaa;}
#menu {
position:absolute;
padding:0;
margin:0;
width:0;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu li {
list-style-type:none;
margin:0 0 0.25em 0;
}
#menu a, #menu a:visited {
display:block;
width:9em;
border:1px solid #808;
font-family:arial, verdana, sans-serif;
font-size:0.8em;
text-align:center;
text-decoration:none;
background:#808;
color:#eee;
padding:0.25em;
}
#menu a span {
display:none;
}
#menu a:hover {
background:#ddd;
color:#808;
}
#menu a:hover span {
display:block;
position:absolute;
left:10em;
top:0;
text-align:left;
padding:0.5em;
width:14em;
background-color:#eee;
color:#000;
border:1px solid #808;
}
</style>
</head>
<body>
<ul id="menu">
<li>
<a href="#nogo"><dt onclick="javascript:montre('smenu1');">Menu1<span>Test1</span></a></dt>
<ul>
<dd id="smenu1">
<li><a href="#" >Sous-menu1.1</a></li>
<li><a href="#" >Sous-menu1.2</a></li>
</dd>
</ul>
</li>
<li>
<a href="#nogo"><dt onclick="javascript:montre('smenu2');">Menu2<span>Test2</span></a></dt>
<ul>
<dd id="smenu2">
<li><a href="#" >sous-menu2.1</a></li>
<li><a href="#" >sous-menu2.2</a></li>
</dd>
</ul>
</li>
<li>
<a href="#nogo"><dt onclick="javascript:montre('smenu3');">Menu3<span>Test3</span></a></dt>
<ul>
<dd id="smenu3">
<li><a href="#" >sous-menu3.1</a></li>
<li><a href="#" >sous-menu3.2</a></li>
<li><a href="#" >sous-menu3.3</a></li>
</dd>
</ul>
</li>
<li>
<a href="#nogo"><dt onclick="javascript:montre('smenu4');">Menu4<span>Test4</span></a></dt>
<ul>
<dd id="smenu4">
<li><a href="#" >sous-menu4.1</a></li>
<li><a href="#" >sous-menu4.2</a></li>
</dd>
</ul>
</li>
<li>
<a href="#nogo"><dt onclick="javascript:montre();">Menu5<span>Test5</span></a></dt>
</li>
</ul>
</body>
</html>
