Aller au contenu


[Css] Menu Déroulant


  • Vous ne pouvez pas répondre à ce sujet
1 reply to this topic

#1 noisette

noisette

    Webmarster

  • Admin
  • PipPipPipPipPipPipPipPipPip
  • 21 797 Messages :
  • Gender:Male

Posté 15 décembre 2009 - 07:54

<div align='center'><!--sizeo:4--><span style="font-size:14pt;line-height:100%"><!--/sizeo--><!--coloro:#FF8C00--><span style="color:#FF8C00"><!--/coloro-->Menu déroulant en CSS<!--colorc--></span><!--/colorc--><!--sizec--></span><!--/sizec--></div>


Dans ce petit tuto, je n'invente rien, je propose juste une solution pour réaliser un menu déroulant en CSS dont bien des exemples pourront être trouvés sur le net.

Mais la diffusion des bonnes pratiques ne souffrira pas d'un relai de plus.

De même, si vous avez des critiques ou conseils, ou des usages différents, ou des alternatives à cet effet, n'hésitez pas à les partager avec nous.



Remarques:
<ul><li>ce menu en CSS utilise des instructions non-comprises d'IE6 (<b>balise1:hover balise2{propriétés de la balise 2}</b>). Il faudra pour IE6 prévoir d'utiliser une autre technique, un autre design, ou de le délaisser.</li><li>en revanche, ce menu est correctement affiché par IE7 et IE8, ainsi que par Firefox, Opéra, Safari, Chromium (et Chrome), ...</li><li>ce menu est validé: XHTML 1.1, HTML4.0, CSS2 et CSS3</li></ul>



Voilà le bout de code:

<blockquote><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR...l4/strict.dtd">
<html>
<head>

<style type="text/css">
*{margin: 0; padding: 0;}
div{width: 20%; background-color: orange;}
div ul{display: none;}
div:hover ul{display: block; width: 100%; background-color: grey;}
div:hover ul a{color: yellow; text-decoration: none;}
div:hover ul a:hover{text-decoration: underline;}
</style>

</head>
<body>

<div>
test
<ul>
<li> <a href"#">test1</a></li>
<li> <a href"#">test2</a></li>
</ul>
</div>

</body>
</html><!--c2--></div><!--ec2--></blockquote>

<a href="http://infomars.fr/r..._en_css_1.html" target="_blank"><span style="font-family: monospace;border: 0.2em #ccc outset; padding: 0 0.4em; background:#ccc;"><FONT COLOR="#000000">Testez !</font></span></a>

<img src="http://infomars.fr/f...IR#>/arrow.gif" style="vertical-align:middle" emoid=":arrow:" border="0" alt="arrow.gif" /> L'effet de menu déroulant se trouve là:

div ul{display: none;}
div:hover ul{display: block;}


<img src="style_emoticons/<#EMO_DIR#>/arrow.gif" style="vertical-align:middle" emoid=":arrow:" border="0" alt="arrow.gif" /> Comme vous le constaterez à l'intégration dans votre code, ce menu amène avec lui quelques contraintes sur le positionnement et l'empilement du contenu se trouvant sous lui:

<ul><li>Le contenu doit être placé en position: absolute, afin de ne pas être repoussé vers le bas quand un des menus est déroulé.</li><li>Le contenu doit être placé en dessous du menu déroulé: la propriété z-index le permet; mettez un z-index plus élevé au menu déroulant (ainsi qu'un positionnement relatif, nécessaire à cause du z-index) qu'au contenu.</li></ul>


<img src="style_emoticons/<#EMO_DIR#>/arrow.gif" style="vertical-align:middle" emoid=":arrow:" border="0" alt="arrow.gif" /> Je vous propose ci-dessous une démonstration en largeur variable, dans le cadre d'un petit formulaire:

Vous avez dans la barre de navigation:
<ul><li>un lien simple (contact)</li><li>un menu de liens externes sortants (menu "nos réalisations")</li><li>un menu de liens internes (menu "nos services")</li></ul>

<a href="http://infomars.fr/r..._en_css_2.html" target="_blank"><span style="font-family: monospace;border: 0.2em #ccc outset; padding: 0 0.4em; background:#ccc;"><FONT COLOR="#000000">Testez !</font></span></a>



<img src="style_emoticons/<#EMO_DIR#>/arrow.gif" style="vertical-align:middle" emoid=":arrow:" border="0" alt="arrow.gif" /> Il est également possible de créer un menu déroulant "en tiroir" tout en CSS, malheureusement sans effet de mouvement d'ouverture du "tiroir" (il est possible de le faire en ajoutant du javascript par exemple):

Voilà le bout de code:

<blockquote><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR...l4/strict.dtd">
<html>
<head>

<style type="text/css">
*{margin: 0; padding: 0;}
li{list-style-type: none; background-color: #bbbbbb; width: 100px; height: 20px;}
.m{background-color: #999999;}
.s_m{display: none;}
#menu:hover .s_m{display: block;}

</style>

</head>
<body>

<div id="menu">

<ul>
<li class="s_m">test1</li>
<li class="s_m">test2</li>
<li class="s_m">test3</li>
<li><div class="m">TEST</div></li>
</ul>

</div>
</body>
</html><!--c2--></div><!--ec2--></blockquote>


<a href="http://infomars.fr/r...ss_tiroir.html" target="_blank"><span style="font-family: monospace;border: 0.2em #ccc outset; padding: 0 0.4em; background:#ccc;"><FONT COLOR="#000000">Testez !</font></span></a>

ou encore une variante:

<blockquote><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR...l4/strict.dtd">
<html>
<head>

<style type="text/css">
*{margin: 0; padding: 0;}
li{list-style-type: none; background-color: #bbbbbb;}
li, .petite, .petite_bis, .grande{width: 100px;}
li, .petite, .petite_bis{height: 20px;}
.petite, .petite_bis{background-color: #999999;}
.grande{display: none;}
#menu:hover .grande{display: block;}
#menu:hover .petite{display: none;}
</style>

</head>
<body>

<div id="menu">
<div class="petite">
TEST
</div>

<div class="grande">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li><div class="petite_bis">TEST</div></li>
</ul>
</div>
</div>
</body>
</html><!--c2--></div><!--ec2--></blockquote>

<a href="http://infomars.fr/r...s_tiroir2.html" target="_blank"><span style="font-family: monospace;border: 0.2em #ccc outset; padding: 0 0.4em; background:#ccc;"><FONT COLOR="#000000">Testez !</font></span></a>

>>> A SUIVRE <<<

#2 VB 6

VB 6

    namecap'S

  • Eminence Verte
  • PipPipPipPipPipPipPipPipPip
  • 4 897 Messages :
  • Gender:Male

Posté 15 décembre 2009 - 10:52

Excellente idée, je pense qu'elle pourras être de très bonne info yes.gif

Si besoin d'aide, toujours dispo (sauve au taff dd.gif )


Bonne journée byebye.gif


VB6.

"Deux choses sont infinies : l'univers et l'imbecilites humaines".
Albert Einstein.




1 utilisateur(s) en train de lire ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)