Quel script pour créer un menu comme celui-ci ?

**miltonis** · 16/07/2011, 13h15

Bonjour

Je suis plus que novice en Javascript, encore plus en Jquery, mais c'est vrai que ça a l'air très sympa !!
j'aimerais créer un menu qui prenne place sur toute la hauteur de l'écran et qui ouvre au clic sur un des éléments un autre bloc avec les sous-menus correspondant à l'élément cliqué.

Voici deux images exemples, le menu :

et avec le sous-menu ouvert :

Ma question est
Connaissez-vous un/des script(s) permettant de faire cela avec un minimum de modifications ?

J'en ai trouvé quelques uns, mais ils ne correspondent pas vraiment à ce que je veux faire :
http://www.portalzine.de/Horizontal_...n_2/index.html
http://www.scriptiny.com/2008/05/hor...ccordion-menu/

Merci d'avance et bon we !

Invité · 16/07/2011, 23h16

salut,

A défault de trouver un plugin, ca peut se faire assez rapidement

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
 
<html>
<body>
<style type="text/css">
body{
  width:100%;
  height:100%;
}
#lvl0{
  background-color:#eeeeee;
}
#lvl1{
  background-color:#b8b8b8;
}
#lvl2{
  background-color:#c7c7c7;
}
.menu{
 height:100%;
 float:left;
 width:150px;
}
.menu ul{
 display:none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
//remove all menus with lvlId > id
function removeMenus(id){
 $('.menu').each(function(){
   var lvl = getId($(this));
   if(lvl>id){
    $(this).replaceWith('');
   }
 });
}
//returns deepth lvl corresponding to lvl%n from menu Node
function getId(menuNode){
  var lvl = menuNode.attr('id').substring(3);
  lvl = parseInt(lvl, 10);
  return lvl;
}
function activateMenu(node){
  node.find('a').click(function(e){
     //there is a new menu to open (ul tag exists)
     if($(this).next().length>0){
      var newMenu = $(this).next().html();//assumes next is an ul node
      addMenu($(this).closest('.menu'), newMenu);
     }
     e.preventDefault();
   });
}
//add a new menu after the fromNode menu
//content will be added to the new menu
function addMenu(fromNode, content){
  var lvl = getId(fromNode);
  var s='<div class="menu" id="lvl'+(lvl+1)+'">';
  s+=content+'</div>';
  removeMenus(lvl);
  $('#lvl'+lvl).after(s);
  activateMenu($('#lvl'+(lvl+1)));
}
$(document).ready(function(){
 activateMenu($('#lvl0'));
});
</script>
<div class="menu" id="lvl0">
  <li><a href="#" id="menu1">menu1</a>
    <ul>
      <li><a href="#">no children</a></li>
      <li>menu12</li>
      <li>menu13</li>
    </ul>
  </li>
  <li><a href="#">menu2</a>
    <ul>
      <li><a href="#">children</a>
      <ul>
         <li>menu211</li>
         <li>menu212</li>
      </ul>
      </li>
      <li>menu22</li>
      <li>menu23</li>
    </ul>
  </li>
  <li><a href="#">menu3</a>
    <ul>
      <li>menu31</li>
      <li>menu32</li>
    </ul>
  </li>
</div>
<div class="content">
 blabla
</div>
 
 
</body>
 
</html>

reste à faire un peu de css, et d'animation. Mais bon...c'est chronophage.

**miltonis** · 17/07/2011, 16h32

Salut Galerien,

Et merci pour cette ébauche !
C'est vrai qu'il manque certaines choses, les CSS je peux m'en occuper pas de souci, mais la partie Animation j'en suis incapable aujourd'hui... :/
C'est pour cela que je suis à la recherche d'un script/plugin qui fasse cela.

Personne n'en connait un ?

Quel script pour créer un menu comme celui-ci ?

jQuery

Discussions similaires

Partager

Partager