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

Version imprimable

16/07/2011, 13h15
miltonis

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

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 :
http://img4.hostingpics.net/thumbs/mini_9742712200.gif
et avec le sous-menu ouvert :
http://img4.hostingpics.net/thumbs/mini_4869925001.gif

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 !

salut,

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

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
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.

17/07/2011, 16h32
miltonis

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 ?
:)