Sujet Précédent Sujet Suivant

Code html menu deroulant

Fermé
pakindame - 15 oct. 2012 à 14:58
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 - 15 oct. 2012 à 16:31
Bonjour,

je veux un code pour menu
deroulant html.
A voir également:

1 réponse

Réponse 1 / 1
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
15 oct. 2012 à 16:31
Salut 
je veux un code pour menu
Hey 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>

3

Discussions similaires

Code de renvoi d'appel : Ooredo, Mobilis...
midoou07 -
Camille -

13 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse