Aide menu + couleur
Aide menu + couleur - HTML/CSS - Programmation
Sujets relatifs:
- Changer la couleur d'un bouton JQuery mobile
- Changer la couleur d'une JFrame
- besoin aide pour correction formulaire php
- Besoin d'aide PHP et module [résolu]
- [php] besoin d'aide pour optimiser connexion sql en objet [résolu]
- besoin d'aide
- Besoin d'aide sur une boucle "if else if else"
- Aide !!
- Besoin aide pour optimiser BD avec PhpMyadmin
- [RCH] script menu de la semaine
Marsh Posté le 13-01-2011 à 22:37:18
Chers Hardwarsiens,
J'essaye de réaliser un menu horizontal déroulant bien sans mal. Quelques problèmes pour le centrer mais résolu. J'essaye aujourd'hui d'appliquer une couleur différente pour chaque bouton du menu et pour le sous menu une couleur identique au menu auquel il correspond. Je pensait pouvoir l'appliquer à une balise <ul> mais cela ne fonctionne pas (possibilité de l'appliquer à chaque balise <a> mais cela me semble lourd) donc je sollicite votre aide
Ci joint le code de la page test
<html>
<head>
<title>Liste 8</title>
<style type="text/css">
body { text-align: center; }
/*div {
width: 900px;
padding-left: 100px;
padding-right:auto;
border: 1px solid;
} */
#Menu {
font-family: Arial, sans-serif;
font-size : 20px; /* hauteur du texte : 20 pixels */
height: 200px;
border: 1px solid;
}
#Menu ul {
margin: 0 auto; /* Aligning div horizontally */
width:800px; /* When aligning using the method above we must set a specific width */
list-style: none;
padding: 0;
line-height: 30px;
height: 30px;
}
#Menu li {
text-align: center;
float: left;
margin: 0 5px 0 5px; /* top right bottom left */
line-height: 30px;
width: 130px; /* Fixed width on the link, the same width as the image width */
}
#Menu li a {
display: block;
height: 30px;
color: black;
font-weight:bold;
text-decoration: none;
/*background-color: purple;*/
-moz-border-radius : 10px 10px;
}
#menu li ul { /* Sous-listes */
position: relative;
top: 3px;
left: 10px;
display: none;
list-style: none;
width: 130px;
text-align: center;
}
#menu li ul li {
float: none;
margin: 0;
padding: 0;
}
#menu li ul li a {
display: block;
}
#menu li:hover ul {/* Sous-listes lorsque la souris passe sur un élément de liste */
display: block;
/* min-height: 0; /* Corrige un bug sous IE */
}
#Menu li a:hover {
background-color: #369;
}
#Menu li a.company
background-color: yellow;
}
.product {
background-color: blue;
}
.application {
background-color: red;
}
.video {
background-color: orange;
}
.contact {
background-color: green;
}
</style>
<!--[if lte IE 6]>
<script type="text/javascript">
<!--
METTRE LE JAVASCRIPT EN COMMENTAIRES POUR QUE LE SCRIPT SOIT VALIDE W3C
sfHover = function() {
var sfEls = document.getElementById("menu" ).getElementsByTagName("LI" );
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b" ), "" );
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
-->
</script>
<![endif]-->
</head>
<body>
<div id="menu">
<ul>
<li > /* définir la classe a appliquer à cette balise */
<a class="company" href="#">Company</a>
<ul >
<li><a class="company" href="#">History</a></li> /* etc mais semble lourd */
<li><a href="#">Press</a></li>
<li><a href="#">Autre</a></li>
</ul>
</li>
<li >
<a class="product" href="#">Products</a>
<ul>
<li><a href="#">Essai 1</a></li>
<li><a href="#">Essai 2</a></li>
</ul>
</li>
<li>
<a class="application" href="#">Applications</a>
<!-- <ul>
<li><a href="#">photos</a></li>
<li><a href="#">vidéos</a> </li>
</ul>-->
</li>
<li>
<a class="video" href="#">Videos</a>
<!-- <ul>
<li><a href="#">Essai 1</a></li>
<li><a href="#">Essai 2</a></li>
</ul>-->
</li>
<li> <a class="contact" href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
Merci smile