Menu deroulant (IE6 et JS desactivee)
duxitto
Messages postés
247
Date d'inscription
Statut
Membre
Dernière intervention
-
bg62 Messages postés 23732 Date d'inscription Statut Modérateur Dernière intervention -
bg62 Messages postés 23732 Date d'inscription Statut Modérateur Dernière intervention -
Bonsoir tout le monde,
Je suis confronté a un souci concernant le menu déroulant de mon site, en effet il est actuellement réalisé grâce a JavaScript mais je souhaite le refaire en CSS pur, le souci c'est que j'ai 20% de mes visiteurs qui utilisent IE6 et presque autant qui désactivent JS. Je me demande quelle serait la solution optimale pour offrir un menu visible par tout le monde.
Merci pour vos conseils
Je suis confronté a un souci concernant le menu déroulant de mon site, en effet il est actuellement réalisé grâce a JavaScript mais je souhaite le refaire en CSS pur, le souci c'est que j'ai 20% de mes visiteurs qui utilisent IE6 et presque autant qui désactivent JS. Je me demande quelle serait la solution optimale pour offrir un menu visible par tout le monde.
Merci pour vos conseils
A voir également:
- Menu deroulant (IE6 et JS desactivee)
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Pave souris désactivée - Guide
- Supprimer menu déroulant excel - Forum Excel
2 réponses
Salut,
Je te conseille un menu déroulant en full CSS.
a voir ta question tu es un peut perdu en css peut etre.
Donc essaye cela et vois ce que ca dit.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
#menu {
width:150px;
font-size:20px;
}
#menu ul {
margin:0px;
padding:0px;
background-color:#999999;
}
#menu ul li {
height:25px;
line-height:25px;
list-style:none;
padding-left:40px;
border-top:#ffffff solid;
border-width:1px;
}
#menu ul li a {
text-decoration:none;
color:#000000;
}
#menu ul li:hover {
background-color:#FF9900;
position:relative;
}
#menu ul li a:hover {
text-decoration:none;
color:#ffffff;
}
#menu ul ul {
display:none;
position:absolute;
left:150px;
top:0px;
border:#ffffff solid;
background-color:#CCCCCC;
}
#menu ul li:hover ul {
display:block;
}
#menu ul ul li {
border:none;
width:100px;
float:left;
display:inline;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Accueil</a>
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
</ul>
</li>
<li><a href="#">Images</a>
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
</ul>
</li>
<li><a href="#">Vidéos</a>
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
Bon courage,
Je te conseille un menu déroulant en full CSS.
a voir ta question tu es un peut perdu en css peut etre.
Donc essaye cela et vois ce que ca dit.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
#menu {
width:150px;
font-size:20px;
}
#menu ul {
margin:0px;
padding:0px;
background-color:#999999;
}
#menu ul li {
height:25px;
line-height:25px;
list-style:none;
padding-left:40px;
border-top:#ffffff solid;
border-width:1px;
}
#menu ul li a {
text-decoration:none;
color:#000000;
}
#menu ul li:hover {
background-color:#FF9900;
position:relative;
}
#menu ul li a:hover {
text-decoration:none;
color:#ffffff;
}
#menu ul ul {
display:none;
position:absolute;
left:150px;
top:0px;
border:#ffffff solid;
background-color:#CCCCCC;
}
#menu ul li:hover ul {
display:block;
}
#menu ul ul li {
border:none;
width:100px;
float:left;
display:inline;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Accueil</a>
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
</ul>
</li>
<li><a href="#">Images</a>
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
</ul>
</li>
<li><a href="#">Vidéos</a>
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
Bon courage,
