A voir également:
- Code html menu deroulant
- Menu déroulant excel - Guide
- Code ascii - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Code puk bloqué - Guide
- Comment déverrouiller un téléphone quand on a oublié le code - Guide
1 réponse
Salut
le svp n a jamais tuer personne !
mais bon ! en voila un horizontal ( puisque tu ne precise pas ? )!
pour que tu ais les image , je les ai converti en base 64 dans le CSS
le HTML de ce menu est ensuite tres simple a modifier pour ajouter ou retirer des sections ,
pour modifier le CSS ca depend de tes competences en css ?!
je veux un code pour menuHey totoche ,tu n est pas le juteux de la caserne ici !!!
le svp n a jamais tuer personne !
mais bon ! en voila un horizontal ( puisque tu ne precise pas ? )!
pour que tu ais les image , je les ai converti en base 64 dans le CSS
background-image: url("data:image/png;base64,iVBOR.....II=");tu peux bien sur les reconvertir en image ou mettre les images que tu veux a la place
le HTML de ce menu est ensuite tres simple a modifier pour ajouter ou retirer des sections ,
pour modifier le CSS ca depend de tes competences en css ?!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>
RAD ZONE Webcreation
</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body{
background-color: #444;
}
#menu{
text-align: center;
}
ul#radmenu, ul#radmenu ul{
margin: 0;
list-style: none;
padding: 0;
background-color: #000;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAK8CAYAAAAu3tULAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA0jIR3UfIQAAACiSURBVEjH7ZbNCgMhDIS//LxB3/8Ve+iph6XpqRaDC4V1S5C9DImBMZlREeCmAA2kT4+AzaOSQg1JNXFQQEv6ZsuxTKTyau6XG2v2Jakpu695SRY93na92f8bUEuKrZU+NhYRDwW2Bs9vREQ4n42sgbbI+zUfFHxQTWkiTan0kSrwOuNtr/mhOgXurUkZ6Kw92I+++Z6XvkeVzlXq5bJ7GrwBxcIVRiNdtAgAAAAASUVORK5CYII=");
background-repeat: repeat;
border-width: 0px;
border-style: solid;
border-color: #999;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
ul#radmenu ul{
display: none;
position: absolute;
left: 0;
top: 100%;
-moz-box-shadow: 0.7px 0.7px 1px #777777;
-webkit-box-shadow: 0.7px 0.7px 1px #777777;
box-shadow: 0.7px 0.7px 1px #777777;
background-color: #333;
background-image: none;
border-width: 1px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-style: solid;
border-color: #5A5E60;
padding: 0 9px 9px;
}
ul#radmenu li:hover > *{
display: block;
}
ul#radmenu li{
width: 113px ;
position: relative;
zoom: 1;
display: block;
white-space: nowrap;
font-size: 0;
float: left;
}
ul#radmenu li:hover{
z-index: 1;
}
ul#radmenu ul ul{
position: absolute;
left: 100%;
top: 0;
}
ul#radmenu{
padding: 1px 1px 1px 0;
font-size: 0;
z-index: 999;
position: relative;
display: inline-block;
zoom: 1;
*display: inline;
}
ul#radmenu > li, ul#radmenu li{
margin: 0 0 0 1px;
}
* html ul#radmenu li a{
display: inline-block;
}
ul#radmenu ul > li{
margin: 1px 0 0;
}
ul#radmenu a:active, ul#radmenu a:focus{
outline-style: none;
}
ul#radmenu a, ul#radmenu a.pressed{
display: block;
vertical-align: middle;
text-align: center;
text-decoration: none;
font: bold 12px Verdana;
color: #ccc;
cursor: pointer;
}
ul#radmenu ul li{
float: none;
margin: 9px 0 0;
}
ul#radmenu ul a{
text-align: left;
padding: 8px 0 0 0;
background-color: #333;
background-image: none;
border-width: 1px 0 0 0;
border-style: solid;
border-color: #262626;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
font: 13px Verdana;
color: #ccc;
text-decoration: none;
}
ul#radmenu li:hover > a{
background-color: #00c4ff;
border-style: none;
font: bold 12px Verdana;
color: #fff;
text-decoration: none;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAK8CAYAAAAu3tULAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA0jIR3UfIQAAACiSURBVEjH7ZbNCgMhDIS//LxB3/8Ve+iph6XpqRaDC4V1S5C9DImBMZlREeCmAA2kT4+AzaOSQg1JNXFQQEv6ZsuxTKTyau6XG2v2Jakpu695SRY93na92f8bUEuKrZU+NhYRDwW2Bs9vREQ4n42sgbbI+zUfFHxQTWkiTan0kSrwOuNtr/mhOgXurUkZ6Kw92I+++Z6XvkeVzlXq5bJ7GrwBxcIVRiNdtAgAAAAASUVORK5CYII=");
background-position: 0 100px;
}
ul#radmenu img{
border: none;
vertical-align: middle;
margin-right: 10px;
}
ul#radmenu img.over{
display: none;
}
ul#radmenu li:hover > a img.def{
display: none;
}
ul#radmenu li:hover > a img.over{
display: inline;
}
ul#radmenu li a.pressed img.over{
display: inline;
}
ul#radmenu li a.pressed img.def{
display: none;
}
ul#radmenu span{
display: block;
overflow: visible;
background-position: right center;
background-repeat: no-repeat;
padding-right: 0px;
}
ul#radmenu ul span{
background-image: url("data:image/gif;base64,R0lGODlhBwAMAKIFAL6+vtra2ry8vL29vcjIyP///wAAAAAAACH5BAEAAAUALAAAAAAHAAwAAAMZWLoVZoyMFwVdEkaglREWxmETZmlZ53RFAgA7");
padding-right: 27px;
}
#topmenu a{
height: 14px;
line-height:14px ;
}
ul#radmenu a{
padding: 10px;
background-color: #333;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAK8CAYAAAAu3tULAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA0jIR3UfIQAAACiSURBVEjH7ZbNCgMhDIS//LxB3/8Ve+iph6XpqRaDC4V1S5C9DImBMZlREeCmAA2kT4+AzaOSQg1JNXFQQEv6ZsuxTKTyau6XG2v2Jakpu695SRY93na92f8bUEuKrZU+NhYRDwW2Bs9vREQ4n42sgbbI+zUfFHxQTWkiTan0kSrwOuNtr/mhOgXurUkZ6Kw92I+++Z6XvkeVzlXq5bJ7GrwBxcIVRiNdtAgAAAAASUVORK5CYII=");
background-repeat: repeat;
background-position: 0 200px;
border-width: 0px;
border-style: none;
border-color:;
color: #ccc;
text-decoration: none;
}
ul#radmenu li:hover > a, ul#radmenu li > a.pressed{
background-color: #00c4ff;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAK8CAYAAAAu3tULAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA0jIR3UfIQAAACiSURBVEjH7ZbNCgMhDIS//LxB3/8Ve+iph6XpqRaDC4V1S5C9DImBMZlREeCmAA2kT4+AzaOSQg1JNXFQQEv6ZsuxTKTyau6XG2v2Jakpu695SRY93na92f8bUEuKrZU+NhYRDwW2Bs9vREQ4n42sgbbI+zUfFHxQTWkiTan0kSrwOuNtr/mhOgXurUkZ6Kw92I+++Z6XvkeVzlXq5bJ7GrwBxcIVRiNdtAgAAAAASUVORK5CYII=");
background-position: 0 100px;
border-style: none;
color: #fff;
text-decoration: none;
}
ul#radmenu ul li:hover > a, ul#radmenu ul li > a.pressed{
background-color: #333;
background-image: none;
border-style: solid;
border-color: #262626;
font: 13px Verdana;
color: #1F80AE;
text-decoration: none;
}
ul#radmenu li.toppremier > a{
border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
text-shadow: #000000 0px -1px 1px;
}
ul#radmenu li.toppremier:hover > a, ul#radmenu li.toppremier > a.pressed{
text-shadow: #3d3d3d 0px -1px 1px;
}
ul#radmenu li.topmenu > a{
text-shadow: #000000 0px -1px 1px;
}
ul#radmenu li.topmenu:hover > a, ul#radmenu li.topmenu > a.pressed{
text-shadow: #3d3d3d 0px -1px 1px;
}
ul#radmenu li.topdernier > a{
border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
-webkit-border-radius: 0;
-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
text-shadow: #000000 0px -1px 1px;
}
ul#radmenu li.topdernier:hover > a, ul#radmenu li.topdernier > a.pressed{
text-shadow: #3d3d3d 0px -1px 1px;
}
ul#radmenu ._ > li > a{
padding: 0;
}
ul#radmenu li.subpremier > a{
border-width: 0;
border-style: none;
padding: 0;
}
ul#radmenu li.subpremier:hover > a, ul#radmenu li.subpremier > a.pressed{
border-style: none;
}
/*]]>*/
</style></head>
<body>
<div id="menu">
<ul id="radmenu" class="topmenu">
<li class="toppremier">
<a href="#"><span>Menu 0</span></a>
<ul>
<li class="subpremier">
<a href="#">Menu 0 0</a>
</li>
<li>
<a href="#">Menu 0 1</a>
</li>
<li>
<a href="#">Menu 0 2</a>
</li>
<li>
<a href="#"><span>Menu 0 3</span></a>
<ul>
<li class="subpremier">
<a href="#">Menu 0 3 0</a>
</li>
<li>
<a href="#">Menu 0 3 1</a>
</li>
<li>
<a href="#"><span>Menu 0 3 2</span></a>
<ul>
<li class="subpremier">
<a href="#">Menu 0 3 2 0</a>
</li>
<li>
<a href="#">Menu 0 3 2 1</a>
</li>
<li>
<a href="#">Menu 0 3 2 2</a>
</li>
<li>
<a href="#">Menu 0 3 2 3</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="topmenu">
<a href="#"><span>Menu 1</span></a>
<ul>
<li class="subpremier">
<a href="#">Menu 1 0</a>
</li>
<li>
<a href="#">Menu 1 1</a>
</li>
<li>
<a href="#"><span>Menu 1 2</span></a>
<ul>
<li class="subpremier">
<a href="#">Menu 1 2 0</a>
</li>
<li>
<a href="#">Menu 1 2 1</a>
</li>
<li>
<a href="#">Menu 1 2 2</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="topmenu">
<a href="#"><span>Menu 2</span></a>
<ul>
<li class="subpremier">
<a href="#">Menu 2 0</a>
</li>
<li>
<a href="#"><span>Menu 2 1</span></a>
<ul>
<li class="subpremier">
<a href="#">Menu 2 1 0</a>
</li>
<li>
<a href="#"><span>Menu 2 1 1</span></a>
<ul>
<li class="subpremier">
<a href="#">Menu 2 1 1 0</a>
</li>
<li>
<a href="#">Menu 2 1 1 1</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Menu 2 2</a>
</li>
</ul>
</li>
<li class="topmenu">
<a href="#"><span>Menu 3</span></a>
<ul>
<li class="subpremier">
<a href="#"><span>Menu 3 0</span></a>
<ul>
<li class="subpremier">
<a href="#">Menu 3 0 0</a>
</li>
</ul>
</li>
<li>
<a href="#">Menu 3 1</a>
</li>
<li>
<a href="#">Menu 3 2</a>
</li>
</ul>
</li>
<li class="topdernier">
<a href="#">Menu 4</a>
</li>
</ul>
</div>
</body>
</html>
