Menu déroulant
Cainzer
Messages postés
281
Statut
Membre
-
Cainzer Messages postés 281 Statut Membre -
Cainzer Messages postés 281 Statut Membre -
Bonjour,
Je voudrais actuellement faire un menu déroulant pour mon site web. Je me suis renseigné sur le site du zéro :
http://www.siteduzero.com/tutoriel-3-37795-creer-un-menu-horizontal-deroulant-en-css.html
Je comprend l'ensemble, c'est à dire le CSS et le HTML, mais l'auteur de ce tutoriel dit qu'il faut mettre du javascript. Or, je n'ai aucune connaissance en javascript. Pourriez s'il vous plaît me dire si il existe une possibilité de faire sans javascript ou bien pourriez vous m'en expliquer le principe.
Merci d'avance.
Je voudrais actuellement faire un menu déroulant pour mon site web. Je me suis renseigné sur le site du zéro :
http://www.siteduzero.com/tutoriel-3-37795-creer-un-menu-horizontal-deroulant-en-css.html
Je comprend l'ensemble, c'est à dire le CSS et le HTML, mais l'auteur de ce tutoriel dit qu'il faut mettre du javascript. Or, je n'ai aucune connaissance en javascript. Pourriez s'il vous plaît me dire si il existe une possibilité de faire sans javascript ou bien pourriez vous m'en expliquer le principe.
Merci d'avance.
A voir également:
- Menu déroulant
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Canon quick menu - Télécharger - Utilitaires
- Enlever menu déroulant excel ✓ - Forum Word
2 réponses
Essayez ca:
voici le code:<div class="MenuTop">
<ul>
<li><a href="index.php" style="background-image:url(images/bg_menuprcpl_current.png)" >Accueil</a></li><ul><li>sous_menu1<li><ul>
<ul></div>
et voici la feuille de style:
.MenuTop {
font-family: Tahoma;
font-size: 10px;
font-weight: normal;
color: #999999;
height:30px;
white-space:nowrap; /*IE hack*/
border:none;
width:1000px;
}
.MenuTop ul {
list-style-type:none;
padding:0;
margin:0;
}
.MenuTop ul li {
list-style:none;
display:block;
float:left;
height:30px;
line-height:38px;
font-family:Tahoma;
letter-spacing:1px;
font-weight: lighter;
z-index:auto !important;
z-index:1000;
font-size:10px;
}
.MenuTop ul li.last {
float:left;
z-index:auto !important;
z-index:1000;
font-size:10px;
background:url(../images/bg_menuprcpl_current.png) repeat-x left;
}
.MenuTop ul li a {
float:none !important;
float:left;
display:block;
height:30px;
line-height:30px;
padding:0 17px 0 18px;
text-decoration:none;
font-weight:bold;
color:#fff;
}
.MenuTop ul li ul {
display:none;
border:none;
}
.MenuTop ul li:hover {
position:relative;
background:url(../images/bg_menuprcpl_current.png) repeat-x left;
}
.MenuTop ul li.last:hover {
position:relative;
background:url(../images/bg_menuprcpl_current.png) repeat-x left;
}
.MenuTop ul li:hover a {
color:#FFF;
}
.MenuTop ul li:hover ul {
display:block;
width:10.0em;
position:absolute;
z-index:999;
top:30px;
/*margin-top:1px;*/
left:0;
}
.MenuTop ul li:hover ul li a {
white-space:normal;
display:block;
width:160px;
height:auto;
line-height:18px;
margin-left:-1px;
border-left:1px solid #CCC;
border-bottom:1px solid #CCC;
border-right:1px solid #CCC;
background-color:#EAEAEA;
font-weight:normal;
font-size:11px;
color:#000;
}
.MenuTop ul li:hover ul li a:hover {
background-color:#FFF;
text-decoration:none;
}
#rubrique_actif {
background:url(../images/bg_menuprcpl_current.png) repeat-x left;
color:#FFF;
margin-left:1px !important;
padding:0 25px;
padding:0 5px 0 5px;
}
.MenuTop table {
position:absolute;
top:0;
left:0;
border-collapse:collapse;
}
.MenuTop ul li ul li a {
text-align:left;
}
.MenuTop ul li a:hover ul li a {
white-space:normal;
display:block;
width:130px;
height:1px;
line-height:18px;
padding:4px 16px 4px 16px;
border-left:solid 1px #CCC;
border-bottom:solid 1px #CCC;
background:none;
background-color:#EAEAEA;
font-weight:normal;
color:#333;
}
.MenuTop ul li a:hover ul li a:hover {
background:#FFF;
background-color:#FFF;
text-decoration:none;
}
.MenuTop ul li ul li a:hover {
background:#FFF;
background-color:#FFF;
text-decoration:none;
}
voici le code:<div class="MenuTop">
<ul>
<li><a href="index.php" style="background-image:url(images/bg_menuprcpl_current.png)" >Accueil</a></li><ul><li>sous_menu1<li><ul>
<ul></div>
et voici la feuille de style:
.MenuTop {
font-family: Tahoma;
font-size: 10px;
font-weight: normal;
color: #999999;
height:30px;
white-space:nowrap; /*IE hack*/
border:none;
width:1000px;
}
.MenuTop ul {
list-style-type:none;
padding:0;
margin:0;
}
.MenuTop ul li {
list-style:none;
display:block;
float:left;
height:30px;
line-height:38px;
font-family:Tahoma;
letter-spacing:1px;
font-weight: lighter;
z-index:auto !important;
z-index:1000;
font-size:10px;
}
.MenuTop ul li.last {
float:left;
z-index:auto !important;
z-index:1000;
font-size:10px;
background:url(../images/bg_menuprcpl_current.png) repeat-x left;
}
.MenuTop ul li a {
float:none !important;
float:left;
display:block;
height:30px;
line-height:30px;
padding:0 17px 0 18px;
text-decoration:none;
font-weight:bold;
color:#fff;
}
.MenuTop ul li ul {
display:none;
border:none;
}
.MenuTop ul li:hover {
position:relative;
background:url(../images/bg_menuprcpl_current.png) repeat-x left;
}
.MenuTop ul li.last:hover {
position:relative;
background:url(../images/bg_menuprcpl_current.png) repeat-x left;
}
.MenuTop ul li:hover a {
color:#FFF;
}
.MenuTop ul li:hover ul {
display:block;
width:10.0em;
position:absolute;
z-index:999;
top:30px;
/*margin-top:1px;*/
left:0;
}
.MenuTop ul li:hover ul li a {
white-space:normal;
display:block;
width:160px;
height:auto;
line-height:18px;
margin-left:-1px;
border-left:1px solid #CCC;
border-bottom:1px solid #CCC;
border-right:1px solid #CCC;
background-color:#EAEAEA;
font-weight:normal;
font-size:11px;
color:#000;
}
.MenuTop ul li:hover ul li a:hover {
background-color:#FFF;
text-decoration:none;
}
#rubrique_actif {
background:url(../images/bg_menuprcpl_current.png) repeat-x left;
color:#FFF;
margin-left:1px !important;
padding:0 25px;
padding:0 5px 0 5px;
}
.MenuTop table {
position:absolute;
top:0;
left:0;
border-collapse:collapse;
}
.MenuTop ul li ul li a {
text-align:left;
}
.MenuTop ul li a:hover ul li a {
white-space:normal;
display:block;
width:130px;
height:1px;
line-height:18px;
padding:4px 16px 4px 16px;
border-left:solid 1px #CCC;
border-bottom:solid 1px #CCC;
background:none;
background-color:#EAEAEA;
font-weight:normal;
color:#333;
}
.MenuTop ul li a:hover ul li a:hover {
background:#FFF;
background-color:#FFF;
text-decoration:none;
}
.MenuTop ul li ul li a:hover {
background:#FFF;
background-color:#FFF;
text-decoration:none;
}
