menu toggle en css?

Version imprimable

20/09/2007, 22h35
sybil

menu toggle en css?

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!

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:

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

21/09/2007, 09h48
Maxoo

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 ;)
21/09/2007, 10h27
onirisme

C'est bien ce que je disais...

Citation:

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...
21/09/2007, 10h36
Maxoo

Citation:

Envoyé par onirisme

C'est bien ce que je disais...

:hola: j'avais mal lu ... du début jusqu'à la fin ...
Mea culpa.
21/09/2007, 12h17
sybil

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

Pour un menu de type "toggle"

Javascript :

Code:

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:

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:

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;
}

Le resultat (1er model) ICI

21/09/2007, 13h59
Bisûnûrs

Y a les deux là aussi, sinon :

http://css.developpez.com/galerie/?p...-verticaux#MV1
http://css.developpez.com/galerie/?p...-verticaux#MV2
21/09/2007, 14h00
sybil

merci beaucoup! c'est génial, je vais étudier tout ca pour aussi apprendre a le faire, merci encore.