Menu avec LI

Invité · 28/05/2013, 20h20

Bonjour!

j'ai un petit menu jquery afit avec des UL IL!

J'ai créé un script pour gérer les liens de page html ou de contenu dans une seul DIV. Il semble bien fonctionner...

Peut-on améliorer ou ai-je fais des erreurs sur le code JS?
Merci d'avance de vos remarques...

Voici le code HTML :

Code html :

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 <!-- DEBUT Menu  ... -->
<div id="CadreMenu"><!-- DEBUT Cadre Menu  ... -->
	<div id="main"><!-- DEBUT Menu Type Accordeon ... -->
		<ul class="container"><!-- DEBUT Container Menu ... -->
			<li class="menu" id="menu1">
          			<ul>
		    			<li class="button"><a href="#Titre1" class="green">Titre 1 <span></span></a></li>
            				<li class="dropdown">
                				<ul>
                    					<li><a  href="#contenu1">Contenu1</a></li>
                    					<li><a  href="#contenu2">Contenu2</a></li>
                    					<li><a  href="#contenu3">Contenu3</a></li>
                				</ul>
					</li>
          			</ul>
      			</li>
			<li class="menu" id="menu2">
          			<ul>
		    			<li class="button"><a href="#Titre2" class="blue">Titre 2 <span></span></a></li>
            				<li class="dropdown">
                				<ul>
                    					<li><a href="#contenu1a">Open Grapes Section</a></li>
                    					<li><a href="#contenu2a">Close This Section</a></li>
                    					<li><a href="#contenu3a">Read on Wikipedia</a></li>
                				</ul>
					</li>
          			</ul>
      			</li>
			<li class="menu" id="menu3">
          			<ul>
		    			<li class="button"><a href="#Titre3" class="orange">Titre 3 <span></span></a></li>
            				<li class="dropdown">
                				<ul>
                    					<li><a href="#contenu1b">Open Grapes Section</a></li>
                    					<li><a href="#contenu2b">Close This Section</a></li>
                    					<li><a href="#contenu3b">Read on Wikipedia</a></li>
                				</ul>
					</li>
          			</ul>
      			</li>
			<li class="menu" id="menu4">
          			<ul>
		    			<li class="button"><a href="#Titre4" class="red">Titre 4 <span></span></a></li>
            				<li class="dropdown">
                				<ul>
                    					<li><a href="#contenu1c">Open Grapes Section</a></li>
                    					<li><a href="#contenu2c">Close This Section</a></li>
                    					<li><a href="#contenu3c">Read on Wikipedia</a></li>
                				</ul>
					</li>
          			</ul>
      			</li>
      	  	</ul><!-- FIN Container Menu ... -->
<!-- DEBUT  ... -->
		<div class="cc_content">	
			<div>
				<div id="contenu1">
					<p>	- contenu1 <br /></p>
					<br /><br /><br />
				</div>
				<div id="contenu2">
					<p>	- contenu2 <br /></p>
					<br /><br /><br />
				</div>
				<div id="contenu3">
					<p>	- contenu3 <br /></p>
					<iframe name="FRAM1" Height="100%" width="100%" Align="left" Align="top" ALLOWTRANSPARENCY="true" FRAMEBORDER="0" MARGINWIDTH="0" MARGINHEIGHT="0" scrolling="no" src='contenu/test2.html'></iframe>
					<br /><br /><br />
				</div>
				<div id="contenu1a">
					<p>	- contenu1a <br /></p>
					<br /><br /><br />
				</div>
				<div id="contenu2a">
					<p>	- contenu2a <br /></p>
					<br /><br /><br />
				</div>
				<div id="contenu3a">
					<p>	- contenu3a <br /></p>
					<iframe name="FRAM1" Height="100%" width="100%" Align="left" Align="top" ALLOWTRANSPARENCY="true" FRAMEBORDER="0" MARGINWIDTH="0" MARGINHEIGHT="0" scrolling="no" src='contenu/test2.html'></iframe>
					<br /><br /><br />
				</div>
			</div>
		</div>
<!-- FIN ... -->

Voici le code du fichier JS gérant les liens de contenu ou futur URL

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
$(document).ready(function(){
	$('.menu >ul ul li').each(function(){         // Sélection de toutes les div contenuent dans le menu
		var current = null;                            // Mise à Zero la variable current
 
		current = $(this).find('a:first').attr('href');   // Récupération de l'ID current du 1er HREF --> #contenu1
		// alert("Identification du Sous_menu : " +  '\n' + current);
 
		$(this).find('a[href=" '+current+' "]').addClass('active');  // Récupère le lien du ID current
 
		$(current).siblings().hide();                                       // Récupère les ID de même niveau que ID current; puis les caches
 
		$(this).find('a').click(function(){                   // Ecoute des cliques sur les éléments ID
			var link = $(this).attr('href');                    // création de la variable contenant le HREF de ID current
			// alert("Identification du link actif"  +  '\n' + link);
 
			$(link).siblings().hide();                          // Cache le contenu précédent
			$(link).show();												// affiche le contenu current
		});
	});
 
});

Y a t-il une solution plus propre ?

merci d'avance de vos remarque ou autres solutions.

bye

**danielhagnoul** · 29/05/2013, 01h09

Bonsoir

Exemple, pour tester il suffit de copier-coller :

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js", 
			"http://code.jquery.com/jquery-2.0.0.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js",
			function(){
 
				$( function(){
 
					$( "ul > li > a", ".menu" ).on( "click", function(){
						$( ".cc_content > div" ).hide();
						$( $( this ).attr( "href" ) ).show();
					});
 
				});
 
				$( window ).load( function(){
 
				});
 
			}
		);
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
		li { margin-left: 2.4rem; }
		div[id^='contenu'] { display:none; margin:1.2rem; padding:0.6rem; width:10rem; height:10rem; background-color:#CC9900; }
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
<div id="CadreMenu">
	<ul class="menu">
		<li class="button">
			<a href="#Titre1" class="green">Titre 1 <span></span></a>
			<ul class="dropdown">
				<li><a href="#contenu1">Contenu1</a></li>
				<li><a href="#contenu2">Contenu2</a></li>
				<li><a href="#contenu3">Contenu3</a></li>
			</ul>
		</li>
	</ul>
	<ul class="menu">
		<li class="button">
			<a href="#Titre2" class="blue">Titre 2 <span></span></a>
			<ul class="dropdown">
				<li><a href="#contenu1a">Open Grapes Section</a></li>
				<li><a href="#contenu2a">Close This Section</a></li>
				<li><a href="#contenu3a">Read on Wikipedia</a></li>
			</ul>
		</li>
	</ul>
	<ul class="menu">
		<li class="button">
			<a href="#Titre3" class="orange">Titre 3 <span></span></a>
			<ul class="dropdown">
				<li><a href="#contenu1b">Open Grapes Section</a></li>
				<li><a href="#contenu2b">Close This Section</a></li>
				<li><a href="#contenu3b">Read on Wikipedia</a></li>
			</ul>
		</li>
	</ul>
	<ul class="menu">
		<li class="button">
			<a href="#Titre4" class="red">Titre 4 <span></span></a>
			<ul class="dropdown">
				<li><a href="#contenu1c">Open Grapes Section</a></li>
				<li><a href="#contenu2c">Close This Section</a></li>
				<li><a href="#contenu3c">Read on Wikipedia</a></li>
			</ul>
		</li>
	</ul>
	<div class="cc_content">	
		<div id="contenu1">
			<p> - contenu1</p>
		</div>
		<div id="contenu2">
			<p>	- contenu2</p>
		</div>
		<div id="contenu3">
			<p>	- contenu3</p>
		</div>
		<div id="contenu1a">
			<p>	- contenu1a</p>
		</div>
		<div id="contenu2a">
			<p>	- contenu2a</p>
		</div>
		<div id="contenu3a">
			<p>	- contenu3a</p>
		</div>
	</div>
</div>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-05-29T01:07:35.985+02:00" pubdate>2013-05-29T01:07:35.985+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

Invité · 29/05/2013, 10h27

merci pour votre aide!

je souhaite afficher lors du clique sur une des li, une DIV caché derrière le menu par une glissement de la div.

dans le html, j'ai ajouter ceci :

Code :

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

<div class="cc_content slideright" >

le CSS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.cc_content{
	width:696px;
	height:580px;
	position:absolute;
	/* left:223px; */
	top:0px;
	left:-476px; 
overflow: hidden;
	background:url(../images/content_bg1.png) repeat;
 
	border:1px solid green;
	z-index:-1;
}

le JS

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
$(document).ready(function(){
	// $('.cc_content.slideright').animate({"left": "-=600px"}, {queue:false, duration:3000 });
	$('.menu >ul ul li').each(function(){         // Sélection de toutes les div contenuent dans le menu
 
		var current = null;                            // Mise à Zero la variable current
 
		current = $(this).find('a:first').attr('href');   // Récupération de l'ID current du 1er HREF 
		// alert("Identification du Sous_menu : " +  '\n' + current);
 
		$(this).find('a[href=" '+current+' "]').addClass('active');  // Récupère le lien du ID current
 
		$(current).siblings().hide();                                       // Récupère les ID de même niveau que ID current; puis les caches
 
		$(this).find('a').click(function(){                   // Ecoute des cliques sur les éléments ID
			var link = $(this).attr('href');                    // création de la variable contenant le HREF de ID current
			// alert("Identification du link actif"  +  '\n' + link);
 
 
			$(link).siblings().hide();                         // Cache le contenu précédent
			$(link).show(function(){							// affiche le contenu current
 
				//Horizontal Sliding
				$('.cc_content.slideright').animate({"left": "+=600px"}, {queue:false, duration:3000 });
 
			});	
 
		});
 
// $('.cc_content.slideright').unbind('animate');
	});

comment fait-on pour caché à nouveau la DIV et réapparait lors d'un nouveau clique sur une nouvelle LI!

merci de vos infos

**danielhagnoul** · 29/05/2013, 21h59

Bonsoir

J'ai écrit un exemple en simplifiant votre code, ce qui m'a fait garder des choses qui ne servent pas dans mon code. Les seuls identificateurs que j'utilise sont les classes "menu" et "cc_content".

Menu avec LI

jQuery

Vue hybride

Discussions similaires

Partager

Partager