menu toggle en css?

**sybil** · 20/09/2007, 22h35

bonsoir,

est il possible de faire un menu toggle(excusez moi je connais pas le mot en francais) rien qu'avec du css sans employer du js. Voici l'exemple de menu , biensur celui la utilise du js: (voir la colonne a gauche)

http://www.travail-solidarite.gouv.f...reves/409.html

si c'est possible merci bien de me montrer un exemple de code!

**onirisme** · 21/09/2007, 08h44

Oui c'est possible mais je vois pas l'utilité de se passer de js...
C'est ce compliquer la vie, ça oblige a modifier tes balises en fonction de tes pages...
HTML :

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
 
<div id="nav">
        <a class="active" href="index.html" >Lien1</a>
        <div class="active" >
            <ul style="display:true">
            <li><a href="#">sub1</a></li>
            <li><a href="#">sub2</a></li>
            <li><a href="#">sub3</a></li>
            <li><a href="#">sub4</a></li>
            <ul>
        </div>
</div>
<div id="nav">
        <a class="active" href="page2.html" >Lien2</a>
        <div >
            <ul style="display:none">
            <li><a href="#">sub1</a></li>
            <li><a href="#">sub1</a></li>
            <li><a href="#">sub1</a></li>
            <li><a href="#">sub1</a></li>
            </ul>
        </div>
</div>
<div id="nav">
        <a class="active" href="page3.html" >Lien3</a>
        <div class="pan">
            <ul style="display:none">
            <li><a href="#">sub1</a></li>
            <li><a href="#">sub1</a></li>
            <li><a href="#">sub1</a></li>
            <li><a href="#">sub1</a></li>
            </ul>
        </div>
</div>

Tu modifies le display none pour pas visible true pour visible.

Résultat

**Maxoo** · 21/09/2007, 09h48

L'intérêt du menu toggle est de ne pas recharger la page pour voir les liens d'une rubrique. Donc ta solution marche bien onirisme, mais il faut utiliser du javascript sinon ça n'a aucun intérêt.

Voila

**onirisme** · 21/09/2007, 10h27

C'est bien ce que je disais...

par moi :Oui c'est possible mais je vois pas l'utilité de se passer de js...
C'est ce compliquer la vie, ça oblige a modifier tes balises en fonction de tes pages...

**Maxoo** · 21/09/2007, 10h36

Envoyé par onirisme

C'est bien ce que je disais...

j'avais mal lu ... du début jusqu'à la fin ...
Mea culpa.

**sybil** · 21/09/2007, 12h17

ok merci onirisme, je vois maintenant qu'en fesant ca rien qu'avec du css il faut faire plusieurs page html pour arrive au resultat toggle donc oui je crois que je vais utilisé js bien que je ne connais pas tres bien js mais le truc bien c'est quavec js je peux faire ca sur une seule page html (desolé pour la redac je viens de me reveillé).... bon je vais voir en tout cas merci pout ton code je vais l'etudier

**onirisme** · 21/09/2007, 12h49

Pour un menu de type "toggle"

Javascript :

Code :

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

1
2
3
4
5
6
7
8
9
 
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}

Voir FAQ js -> FAQ
HTML :

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
 
<html>
  <head>
    <title>Menus CSS et JS</title>
    <meta content="">
    	<link href="style.css" rel="stylesheet" type="text/css">
	<script langage="javascript" src="functions.js"></script>
</head>
 
    <div id="navContener">
        <h2>Menu type Panels</h2>
        <p>Ce menu fonctionne avec un script Javascript</p>
 
        <dl id="menu">
            <dt onclick="javascript:montre();"><a href="#">Menu 1</a></dt>
			<--! Si on clic appel fonction montre sur l id smenu2-->
                <dt onclick="javascript:montre('smenu2');">Menu 2</dt>
                    <dd id="smenu2"><!--Id du sous menu à afficher-->
                        <ul>
                            <li><a href="#">Sous-Menu 2.1</a></li>
                            <li><a href="#">Sous-Menu 2.2</a></li>
                            <li><a href="#">Sous-Menu 2.3</a></li>
                        </ul>
                    </dd>	
 
                <dt onclick="javascript:montre('smenu3');">Menu 3</dt>
                    <dd id="smenu3">
                        <ul>
                            <li><a href="#">Sous-Menu 3.1</a></li>
                            <li><a href="#">Sous-Menu 3.1</a></li>
                            <li><a href="#">Sous-Menu 3.1</a></li>
                            <li><a href="#">Sous-Menu 3.1</a></li>
                            <li><a href="#">Sous-Menu 3.1</a></li>
                            <li><a href="#">Sous-Menu 3.1</a></li>
                        </ul>
                    </dd>
 
                <dt onclick="javascript:montre('smenu4');">Menu 4</dt>
                    <dd id="smenu4">
                        <ul>
                            <li><a href="#">Sous-Menu 4.1</a></li>
                            <li><a href="#">Sous-Menu 4.1</a></li>
                        </ul>
                    </dd>
 
        </dl>

On appel la fonction javascript:montre en déclarant l'id
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
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
 
/**PAN**/
 
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: relative; 
top: 0;
left: 0;
}
#menu {
width: 15em;
}
#menu dt {
cursor: pointer;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #F5F5F5;
}
#menu dd {
border: 1px solid gray;
display : none ;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}