Menu/sous-menu???
Mel
-
Mel -
Mel -
Bonjour tout les monde,
j'aimerais savoir comment je fais pour faire un menu suqr mon site web(en html)comme selui de commentcamerche. Je veux dire que quand on met la souris dessus, il apparaît un sous menu. Si possible, j'aimerais le faire à la verticale et mon menu se trouverait à droite donc j'aimerais que le sous-menu s'ouvre à gauche. Si vous ne savez pas comment le faire à la verticale, c'est pas trop grave mais j'aimerais savoir comment en faire un.
Meci d'avance à tout le monde!!!
j'aimerais savoir comment je fais pour faire un menu suqr mon site web(en html)comme selui de commentcamerche. Je veux dire que quand on met la souris dessus, il apparaît un sous menu. Si possible, j'aimerais le faire à la verticale et mon menu se trouverait à droite donc j'aimerais que le sous-menu s'ouvre à gauche. Si vous ne savez pas comment le faire à la verticale, c'est pas trop grave mais j'aimerais savoir comment en faire un.
Meci d'avance à tout le monde!!!
A voir également:
- Menu/sous-menu???
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu démarrer classique - Guide
- Windows 11 menu contextuel classique - Guide
- Menu démarrer - Guide
3 réponses
Salut,
http://www.cssplay.co.uk/menus/
http://www.fairytells.net/index.php/2006/06/26/28-menu-deroulant-et-accessibilite-partie-1
http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal
http://www.cssplay.co.uk/menus/
http://www.fairytells.net/index.php/2006/06/26/28-menu-deroulant-et-accessibilite-partie-1
http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal
Bonjour
intégre le code suivant dans tes pages
tu peux le modifier à 100%
La source suivante n'est pas de moi et je sais plus trop d'ou elle provient dsl :\
intégre le code suivant dans tes pages
tu peux le modifier à 100%
<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">
<!--
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#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 {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
a {text-decoration: none;
color: black;
color: #222;
}
-->
</style>
</head>
<body>
<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');">Menu 1</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>
<dl>
<dt onmouseover="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>
<li><a href="#">Sous-Menu 2.4</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="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.2</a></li>
<li><a href="#">Sous-Menu 3.3</a></li>
<li><a href="#">Sous-Menu 3.4</a></li>
<li><a href="#">Sous-Menu 3.5</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="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.2</a></li>
<li><a href="#">Sous-Menu 4.3</a></li>
</ul>
</dd>
</dl>
</div>
La source suivante n'est pas de moi et je sais plus trop d'ou elle provient dsl :\
