Menu Déroulant HTML

Pascal_22 Messages postés 559 Statut Membre -
RAD ZONE Messages postés 5362 Statut Contributeur - 18 févr. 2011 à 18:01

Bonjour,

Je veux implanté un menu déroulant sur mon menu du haut.

Est-ce mieux de le faire en CSS ?

Et pour les menu avec javascript, est-ce a évité??

Je pose c'Est question car je veux que mon menu soit fonctionnel avec les plus gros navigateur.

Merci milles fois!
PAscal_22

Afficher la suite

5 réponses

RAD ZONE Messages postés 5362 Statut Contributeur 1 360

Est-ce mieux de le faire en CSS ?

oui !!

voila un exemple en CSS adapte le a tes besoins !

<!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">
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="generator" content="PSPad editor, www.pspad.com" />
<style type="text/css">
/*<![CDATA[*/
body{
  margin:10px;
  padding:0;
  font-family:Arial,Helvetica,sans-serif
}

#Dropdown-orange{
  margin:0;
  padding:0px;
  list-style:none;
  background-color:#F93;
  height:28px;
  width:99%;
  border:solid 1px #c93300;
  border-width:1px 1px 1px 0
}

#Dropdown-orange li{
  display:inline;
  position:relative;
  float:left
}

#Dropdown-orange li a{
  display:block;
  float:left;
  height:29px;
  line-height:29px;
  padding:0 25px;
  text-decoration:none;
  color:#FFF;
  font-weight:normal;
  font-size:12px;
  border-left:solid 1px #c93300
}

#Dropdown-orange li a:hover{
  color:#a9401b;
 background-color:#F93;
}

#Dropdown-orange li ul{
  margin:0;
  padding:0 5px;
  line-height:none;
  position:absolute;
  top:29px;
  left:0;
  border:solid 1px #c93300;
  border-width:0px 1px 1px 1px;
  width:180px;
  display:none;
  background-color:#F93; 
}

#Dropdown-orange li:hover ul{
  display:block
}

#Dropdown-orange li:hover a{
  color:#a9401b;
  background-color:#F93; 
}

#Dropdown-orange li ul li{
  display:block;
  border-bottom:solid 1px #dbdcd9;
  width:100%;
  padding:0 0 0 10px;
  background-color:#F93
}

#Dropdown-orange li ul li:last-child{
  border-bottom:0px
}

#Dropdown-orange li ul a{
  border-width:0px;
  color:#000066;
  padding:0 5px 0 0;
  background-color:transparent
}

#Dropdown-orange li:hover ul li a{
  color:#000066;
}

#Dropdown-orange li ul li a:hover{
  color:#a9401b
}
/*]]>*/
</style>
  </head>
  <body>
    <ul id="Dropdown-orange">
      <li>
        <a href="#" title="Horizontal Css Menu">Css Menu</a>
        <ul>
          <li>
            <a href="#">Sub Menu</a>
          </li>
          <li>
            <a href="#">Sub Menu</a>
          </li>
          <li>
            <a href="#">Sub Menu</a>
          </li>
          <li>
            <a href="#">Sub Menu</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#" title="Css Menu">Css Menu</a>
        <ul>
          <li>
            <a href="#">Sub Menu</a>
          </li>
          <li>
            <a href="#">Sub Menu</a>
          </li>
          <li>
            <a href="#">Sub Menu</a>
          </li>
          <li>
            <a href="#">Sub Menu</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#" title="Only Css Menu">Css Menu</a>
        <ul>
          <li>
            <a href="#">Sub Menu</a>
          </li>
          <li>
            <a href="#">Sub Menu</a>
          </li>
          <li>
            <a href="#">Sub Menu</a>
          </li>
          <li>
            <a href="#">Sub Menu</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#" title="Css Menu">Css Menu</a>
      </li>
    </ul>
  </body>
</html>

Réponse 2 / 5
jacqroll Messages postés 39 Statut Membre 9

Regardez ici : http://www.css-faciles.com/menu-deroulant.php
0
Réponse 3 / 5
Pascal_22 Messages postés 559 Statut Membre 54
MErci mille fois,

M'est exactement ce que je veux mais sauf que il y a une petite modif que je veux faire mais qui ne marche pas.
```
<ul id="Dropdown-orange">
      <li>
        <a href="#" title="Horizontal Css Menu">lien 1</a>
      </li>
      <li>
        <a href="#" title="Horizontal Css Menu">lien 2</a>
      </li>
      <li>
        <a href="#" title="Horizontal Css Menu">lien 3</a>
        <div>
           <form> avec info de connexion</form>
        </div>
      </li>
```
En fait mon menu, je veux qu'il y a 2 lien et un troisième qui fait apparait une div avec un formulaire pour se connecter au site,(un peu comme CCM)
Et je veux que mon menu soit aligner a droite au lieu de gauche
voici le css que j'ai modifier
#topblackmenu{
margin:0;
padding:0px;
list-style:none;
border:1px solid #ffffff;
}

#topblackmenu li{
display:inline;
position:relative;
float:right;
margin-left:20px;
}

#topblackmenu li a{
display:block;

text-decoration: none;
color:#cccccc;
font-size: 12px;
font-weight: none;
font-family: "Trebuchet MS", arial, courier, serif;

}
#Dropdown-orange li a:hover{text-decoration: underline;}

Mais ca ne marche pas

C'est tu pourquoi ca ne marche pas?

MErci!

Pascal_22
0

Pascal_22 Messages postés 559 Statut Membre 54

Bonjour RAD ZONE,

J'ai réussi a le faire fonctionner voici le code

/*<![CDATA[*/

#topblackmenu{
  margin:0;
  padding:0px;
  list-style:none;
  border:0px solid #ffffff;
  width:270px;
}

#topblackmenu li{
  display:inline;
  position:relative;
  float:left;
  margin-left :20px;
  
}

#topblackmenu li a{
  display:block;

  text-decoration: none;
  color:#cccccc;
  font-size: 12px;
  font-weight: none;
  font-family: "Trebuchet MS", arial, courier, serif;
  
}
#topblackmenu li a:hover{text-decoration: underline;}

#topblackmenu li div{
  display:none;
  position:absolute;
}
#topblackmenu li:hover div{
  display:block;
}

/*]]>*/

Mais si je ne mais pas <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

sur ma page, Dans IE8 ca ne marche pas!!

Savez-vous pourquoi?

Merci
Pascal_22

Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Réponse 5 / 5
RAD ZONE Messages postés 5362 Statut Contributeur 1 360

SALUT

le doctype est important ! il faut en mettre un !

https://www.alsacreations.com/article/lire/560-DTD-comment-choisir.html

j ai code cette page en XHTML Strict
si IE8 ne l interprete pas , c est certainemant qu il ne reconnait pas le code sans doctype ou qu il passe en quirk ?

mais IE est une vrais galere pour les createur web !

de toute facon il faut mettre un doctype ,alors mais celui ci ,qui est le plus exigeant, et code le reste de ta page en XHTML !
si tu as besoin regarde ces tuto

https://www.alsacreations.com/tutoriels/

https://www.alsacreations.com/article/lire/44-difference-html-xhtml.html

a+
0

Menu Déroulant HTML

5 réponses

Discussions similaires

Newsletters