Faire un menu déroulant

**Neo57** · 24/02/2010, 12h41

Bonjour à tous,

Je voudrais intégrer un menu déroulant en css, mais même en cherchant sur le web, tout ceux que je trouve, pas moyen de les intégrer à ma feuille de style (ce n'est pas moi qui les réalisé cette feuille)

Voilà ma feuille de style

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/* Valeurs par default Applicables sur toute la page
--------------------------------------------------------------------------------------------------------*/
*{margin:0; padding:0; list-style:none;}
body{font:64% Arial, Helvetica, sans-serif; background:#DADADA; padding:45px 0 20px;}
a{text-decoration:none;color:#444;}
a:hover{color:#00a0fc;}
a img {border:0px none; }
 
h2{background:url('img/h2.jpg');height:34px;font-size:1.1em;text-align:right;position:relative;text-transform:uppercase;line-height:20px;font-family:Verdana;color:#2c5ab0; padding-left:0; padding-right:20px; padding-top:0; padding-bottom:0}
.tl{position:absolute;top:0;left:0;font-size:0}
.tr{position:absolute;top:0;right:0;font-size:0}
.clear{visibility:hidden;clear:both; min-height:1px}
 
 
 
 
 
 
/* Layout, Structure des Blocks
--------------------------------------------------------------------------------------------------------*/
#wrapper{width:1000px; margin: 0 auto}
 
#header{background:url('img/header.jpg');height:204px;margin-bottom:20px; position:relative}
 
#content{width:761px;float:right; padding:0 1px 20px 0;}
 
#sidebar{width:203px; padding-bottom:20px;}
 
#footer{background:url('img/footer.jpg') no-repeat;height:57px; clear:both; margin-top:20px}
 
 
 
 
 
 
/*  Contenu
--------------------------------------------------------------------------------------------------------*/
/**** Header ****/
#header h1{position:absolute;width:420px;height:50px;left:250px;top:60px; font-size:0}
#header h1 a{display:block;width:100%;height:100%;text-indent:-5000px;}
 
#header ul#toolbar{position:absolute;top:176px;left:202px;}
#header ul#toolbar li{float:left;}
#header ul#toolbar li a{display:block;width:116px;line-height:23px;margin-right:2px; text-transform:uppercase; text-align:center;color:#e5edf4;font-weight:bold;font-family:Tahoma;font-size:1.1em; letter-spacing:1px;}
#header ul#toolbar li a:hover{color:#c1c1f4;}
#header ul#toolbar li form#searchengine input{border:0px none;background:none}
#header ul#toolbar li form#searchengine input#q{width:93px; font-size:1.1em;margin:6px 0 0 7px;}
#header ul#toolbar li form#searchengine input#sub1{width:12px;height:14px; font-size:0;margin:-4px 0 0; vertical-align: middle; cursor:pointer;}

Ensuite, je fais un include du menu du header que voici

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<li><a href="http://www.maxif1.com" title="Retour à l'accueil">accueil</a></li>
<li>
	<a href="#" title="Prochainement sur Maxif1.com">billetterie</a>
</li>
 
<li><a href="http://www.maxif1.com/Forum" title="Communauté MaxiF1, discutez de la F1, et de tous les sports mécaniques">forum</a></li>
<li><a href="http://www.maxif1.com/Forum/annuaire.php" title="Annuaire des sports mécaniques">annuaire</a></li>
<li><a href="aff_contact.php" title="Contactez le Webmaster">contact</a></li>

Je souhaite avoir le menu déroulant sur Billetterie avec comme différent menu Formule 1, Moto Gp, A1 GP

Mais voilà je ne sais pas comment faire, quelqu'un peut il m'aider ou au moins m'eclairer sur la démarche à suivre

Merci d'avance

**goldor** · 25/02/2010, 03h23

Dans le header il faut que tu rajoute ce javascript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript" language="javascript">
<!--
var timerID;
function showSSMenu(sMenu){
	var timeout = 2000;
	obj = document.getElementById(sMenu);
	obj.style.display = "block";
	timerID = setInterval(function(){hideSSMenu(sMenu);},timeout);
}
function hideSSMenu(sMenu){
	clearInterval(timerID);
	obj = document.getElementById(sMenu);
	obj.style.display = "none";
}
-->
</script>

ensuite ton menu

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<li><a href="http://www.maxif1.com" title="Retour à l'accueil">accueil</a></li>
        <li><a onmouseover="showSSMenu('sousMenu1');" href="#" title="Prochainement sur Maxif1.com">billetterie</a>
        	<div id="sousMenu1">
                <ul>
                    <li><a href="#">Formule 1</a></li>
                    <li><a href="#">Moto Gp</a></li>
                    <li><a href="#">A1 GP</a></li>
                </ul>
            </div>
        </li>        
        <li><a href="http://www.maxif1.com/Forum" title="Communauté MaxiF1, discutez de la F1, et de tous les sports mécaniques">forum</a></li>
        <li><a href="http://www.maxif1.com/Forum/annuaire.php" title="Annuaire des sports mécaniques">annuaire</a></li>
        <li><a href="aff_contact.php" title="Contactez le Webmaster">contact</a></li>

et tu devras faire un ptit ajout à ton css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#sousMenu1{
	display:none;
}
#sousMenu1 ul, #sousMenu1 ul li{
	text-align:center;
	width:115px;
	height:22px;
	line-height:22px;
	display:block;
	color:#E5EDF4;
}
#sousMenu1 ul li{
	background-color:#A3A3A3;
	border-top:#FFF 1px solid;
}

**Neo57** · 25/02/2010, 13h10

Bonjour, je viens de faire ce que vous me dites et cela fonctionne presque

Vous pouvez voir le résultat sur http://www.maxif1.com/aff_trombinoscope.php

Je vous met le code que au cas ou j'aurais fait une erreur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
/* Valeurs par default Applicables sur toute la page
--------------------------------------------------------------------------------------------------------*/
*{margin:0; padding:0; list-style:none;}
body{font:64% Arial, Helvetica, sans-serif; background:#DADADA; padding:45px 0 20px;}
a{text-decoration:none;color:#444;}
a:hover{color:#00a0fc;}
a img {border:0px none; }
 
h2{background:url('img/h2.jpg');height:34px;font-size:1.1em;text-align:right;position:relative;text-transform:uppercase;line-height:20px;font-family:Verdana;color:#2c5ab0; padding-left:0; padding-right:20px; padding-top:0; padding-bottom:0}
.tl{position:absolute;top:0;left:0;font-size:0}
.tr{position:absolute;top:0;right:0;font-size:0}
.clear{visibility:hidden;clear:both; min-height:1px}
 
#sousMenu1{
	display:none;
}
#sousMenu1 ul, #sousMenu1 ul li{
	text-align:center;
	width:115px;
	height:22px;
	line-height:22px;
	display:block;
	color:#E5EDF4;
}
#sousMenu1 ul li{
	background-color:#A3A3A3;
	border-top:#FFF 1px solid;
}
 
 
 
 
/* Layout, Structure des Blocks
--------------------------------------------------------------------------------------------------------*/
#wrapper{width:1000px; margin: 0 auto}
 
#header{background:url('img/header.jpg');height:204px;margin-bottom:20px; position:relative}
 
#content{width:761px;float:right; padding:0 1px 20px 0;}
 
#sidebar{width:203px; padding-bottom:20px;}
 
#footer{background:url('img/footer.jpg') no-repeat;height:57px; clear:both; margin-top:20px}
 
 
 
 
 
 
/*  Contenu
--------------------------------------------------------------------------------------------------------*/
/**** Header ****/
#header h1{position:absolute;width:420px;height:50px;left:250px;top:60px; font-size:0}
#header h1 a{display:block;width:100%;height:100%;text-indent:-5000px;}
 
#header ul#toolbar{position:absolute;top:176px;left:202px;}
#header ul#toolbar li{float:left;}
#header ul#toolbar li a{display:block;width:116px;line-height:23px;margin-right:2px; text-transform:uppercase; text-align:center;color:#e5edf4;font-weight:bold;font-family:Tahoma;font-size:1.1em; letter-spacing:1px;}
#header ul#toolbar li a:hover{color:#c1c1f4;}
#header ul#toolbar li form#searchengine input{border:0px none;background:none}
#header ul#toolbar li form#searchengine input#q{width:93px; font-size:1.1em;margin:6px 0 0 7px;}
#header ul#toolbar li form#searchengine input#sub1{width:12px;height:14px; font-size:0;margin:-4px 0 0; vertical-align: middle; cursor:pointer;}

Et le code de ma page web

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
<title>MaxiF1 - Trombinoscope des pilotes</title>
<style type="text/css">
@import "style_bis.css";
</style>
<link rel="stylesheet" href="script/css/lightbox.css" type="text/css" media="screen" />
 
	<script src="script/js/prototype.js" type="text/javascript"></script>
	<script src="script/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
	<script src="script/js/lightbox.js" type="text/javascript"></script>
	<script type="text/javascript" language="javascript">
<!--
var timerID;
function showSSMenu(sMenu){
	var timeout = 2000;
	obj = document.getElementById(sMenu);
	obj.style.display = "block";
	timerID = setInterval(function(){hideSSMenu(sMenu);},timeout);
}
function hideSSMenu(sMenu){
	clearInterval(timerID);
	obj = document.getElementById(sMenu);
	obj.style.display = "none";
}
-->
</script>
</head>
 
<body>
<?
	include ("include/temps.php");
		// Prise de temps au début de la page PHP
		$mt1 = microTime();
	include("config.php");
	?>
 <div id="wrapper">
 
 <!--=============== Header =================--> 
  <div id="header">
   <h1><a href="http://www.maxif1.com">MaxiF1.com</a></h1>
 
   <ul id="toolbar">
   <li><a href="http://www.maxif1.com" title="Retour à l'accueil">accueil</a></li>
        <li><a onmouseover="showSSMenu('sousMenu1');" href="#" title="Prochainement sur Maxif1.com">billetterie</a>
        	<div id="sousMenu1">
                <ul>
                    <li><a href="#">Formule 1</a></li>
                    <li><a href="#">Moto Gp</a></li>
                    <li><a href="#">A1 GP</a></li>
                </ul>
            </div>
        </li>        
        <li><a href="http://www.maxif1.com/Forum" title="Communauté MaxiF1, discutez de la F1, et de tous les sports mécaniques">forum</a></li>
        <li><a href="http://www.maxif1.com/Forum/annuaire.php" title="Annuaire des sports mécaniques">annuaire</a></li>
        <li><a href="aff_contact.php" title="Contactez le Webmaster">contact</a></li>
     <form id="searchengine" method="get" action="http://www.google.com/search" />
      <p>
       <input type="text" name="q" id="q" value="Rechercher" onclick="this.value=''" />
       <input type="submit" id="sub1" value="" />
	<input type="hidden" name="sitesearch" value="maxif1.com" />
      </p>
     </form>
    </li>
   </ul>
  </div><!-- end #header -->

Ce qui se passe c'est que le menu est toujours actif et quand il est actif, il me décalle le restant du menu

Pouvez encore m'aider, merci

**goldor** · 25/02/2010, 19h51

il semblerait que mon se soit transformer entre temps de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#sousMenu1{
	display:none;
}
#sousMenu1 ul, #sousMenu1 ul li{
	text-align:center;
	width:115px;
	height:22px;
	line-height:22px;
	display:block;
	color:#E5EDF4;
}
#sousMenu1 ul li{
	background-color:#A3A3A3;
	border-top:#FFF 1px solid;
}

à

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.menu span, .ssmenu span {
  display:none;
}
 
.menu a, .ssmenu a {
  text-decoration:none;
  color:#FFFF00;
}
 
.menu {
  padding:0;
}
 
.ssmenu {
  padding:0;
}

dans le css

**Neo57** · 25/02/2010, 22h39

Oui, je ne sais pas pourquoi, je viens de mettre votre css et cela fonctionne presque.

J'ai toujours un décallage avec l'onglet rechercher

Et, mon menu passe en dessus du premier block de la page, pour résoudre ça, ne serais pas possible qu'au lieu que tout descende, de les aligner en dessous du menu billetterie à l'horizontal au lieu du vertical.

Merci de votre aide, ça faisait plus d'une semaine que je cherchais et là cela fonctionne presque

Pouvez vous encore me donner un petit coup de main

Par avance Merci

PS : toujours à cette adresse http://www.maxif1.com/aff_trombinoscope.php

**goldor** · 25/02/2010, 23h43

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#sousMenu1{
	display:none;
}
#sousMenu1 ul, #sousMenu1 ul li{
	text-align:center;
	width:115px;
	height:22px;
	line-height:22px;
	display:block;
	color:#E5EDF4;
}
#sousMenu1 ul li{
	background-color:#A3A3A3;
	border-top:#FFF 1px solid;
}

**Neo57** · 26/02/2010, 12h05

Le problème est toujours le même malgrés ce que vous venez de me donner, je pige rien au CSS alors s'il vous plait help me

**goldor** · 26/02/2010, 20h40

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#header ul#toolbar li form#searchengine input#q{width: unNombre < 93 px; font-size:1.1em;margin:6px 0 0 7px;}
 
#sousMenu1{
	display:none;
	z-index:999;
}

Il faut que tu remplace le css #sousMenu1 par celui ci. Et ou c'est écrit "unNombre < 93" vous devez le remplacer par un nombre plus petit que 93 et le coller au lettre "px".

**Neo57** · 26/02/2010, 22h58

Merci beaucoup, cela marche super, j'ai juste rajouté une position relative dans #sousMenu1

et un z-index:1 dans la balise h2

Encore merci va vraiment falloir que j'apprenne le CSS, auriez vous un ouvrage à me conseiller ou un bon site internet ou je pourrais apprendre

**goldor** · 27/02/2010, 19h23

Les cours et les faq disponiblent sur www.developpez.com sont très bien

**ml1234** · 28/02/2010, 10h50

super intéressant goldor, merci.
je galère aussi souvent avec ces menus déroulants. dans le passé on m'avait déjà donné un lien vers un menu déroulant de ce site.
Mais je ne me souviens pas qu'il y avait du javascript.
Où explique-t-on ce code javascript lié aux menus déroulants ?

merci
marc

**goldor** · 28/02/2010, 19h41

en fait c'est assez simple, j'ai vu le problème et j'ai composé ce petit code. C'est une solution custom mais facilement adaptable

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript" language="javascript">
<!--
var timerID;  // variable qui va servir a supprimer l'interval 
function showSSMenu(sMenu){  // function pour faire apparaitre le menu
	var timeout = 2000;  // 2 secondes
	obj = document.getElementById(sMenu); // va chercher l'element pour le id envoyer en paramètre
	obj.style.display = "block";  // affiche l'element
	timerID = setInterval(function(){hideSSMenu(sMenu);},timeout); // apres le timout tu call la fonction hideout
}
function hideSSMenu(sMenu){
	clearInterval(timerID); // efface l'interval
	obj = document.getElementById(sMenu); // get l'element passer en paramètres
	obj.style.display = "none"; // ensuite tu le met invisible
}
-->
</script>

Faire un menu déroulant

CSS

Discussions similaires

Partager

Partager