Menu, avec sous menu et sous sous menu

**flolane** · 11/12/2006, 19h29

QQ un pourrait il m aider ?

Je voudrais ajouter un sous sous menu a la place de AA

Code html :

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

1
2
3
4
5
6
7
8
<ul id="menu">
  <li>Tourisme 
     <ol>
      <li><a href="#">Sub Item 2.1</a></li>
      <li><a href="#">---- AA</a></li>
    <li><a href="#">Sub Item 2.2</a></li>
      <li><a href="#">Sub Item 2.3</a></li>
    </ol>

Voici le code, et je n arrive pas le faire... merci de m aider c est assez urgent
-------------------------

Code css :

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
 
ul#menu {
  width: 170px;
  background: #0fb8d2;
  list-style-type: none;
  border-top: solid 4px #86dbe8 ;
  margin: 0;
  padding: 0px;
}	  
ul#menu ol {
  display: none;
  text-align: left;
  border-top: solid 2px #86dbe8 ;
  list-style-type: none;
  margin: 2;
  padding: 10px;
  }	  
ul#menu o2 {
  display: right;
  text-align: left;
  list-style-type: none;
  margin: 15;
  padding: 5px;
}
ul#menu li,
   ul#menu a {
  font-family: verdana , arial;
  font-weight: bold;
  font-size: 12px;
  color: #0422bb;
}
ul#menu li {
  border-bottom: solid 4px #86dbe8;
  line-height: 25px;
}
ul#menu ol li {
  border-bottom: none;
}
ul#menu ol li:before {
  content: "- ";
}
ul#menu a {
  text-decoration: none;
  outline: none;
}
ul#menu a:hover {
  color: #86dbe8;
}
ul#menu a.active {
  color: #5ccfeo;
}

Code Javascript :

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
 
/*
Created by: Travis Beckham :: <a href="http://www.squidfingers.com" target="_blank">http://www.squidfingers.com</a> | <a href="http://www.podlob.com" target="_blank">http://www.podlob.com</a>
version date: 06/02/03 :: If want to use this code, feel free to do so,
but please leave this message intact. (Travis Beckham) 
*/
// Node Functions
 
if(!window.Node){
  var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}
 
function checkNode(node, filter){
  return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
}
 
function getChildren(node, filter){
  var result = new Array();
  var children = node.childNodes;
  for(var i = 0; i < children.length; i++){
    if(checkNode(children[i], filter)) result[result.length] = children[i];
  }
  return result;
}
 
function getChildrenByElement(node){
  return getChildren(node, "ELEMENT_NODE");
}
 
function getFirstChild(node, filter){
  var child;
  var children = node.childNodes;
  for(var i = 0; i < children.length; i++){
    child = children[i];
    if(checkNode(child, filter)) return child;
  }
  return null;
}
 
function getFirstChildByText(node){
  return getFirstChild(node, "TEXT_NODE");
}
 
function getNextSibling(node, filter){
  for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
    if(checkNode(sibling, filter)) return sibling;
  }
  return null;
}
function getNextSiblingByElement(node){
        return getNextSibling(node, "ELEMENT_NODE");
}
 
// Menu Functions & Properties
 
var activeMenu = null;
 
function showMenu() {
  if(activeMenu){
    activeMenu.className = "";
    getNextSiblingByElement(activeMenu).style.display = "none";
  }
  if(this == activeMenu){
    activeMenu = null;
  } else {
    this.className = "active";
    getNextSiblingByElement(this).style.display = "block";
    activeMenu = this;
  }
  return false;
}
 
function initMenu(){
  var menus, menu, text, a, i;
  menus = getChildrenByElement(document.getElementById("menu"));
  for(i = 0; i < menus.length; i++){
    menu = menus[i];
    text = getFirstChildByText(menu);
    a = document.createElement("a");
    menu.replaceChild(a, text);
    a.appendChild(text);
    a.href = "#";
    a.onclick = showMenu;
    a.onfocus = function(){this.blur()};
  }
}
 
if(document.createElement) window.onload = initMenu;

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
	<body bgcolor="#ffffff"><Body> </Body>
 
<ul id="menu">
  <li>Tourisme 
     <ol>
      <li><a href="#">Sub Item 2.1</a></li>
      <li><a href="#">---- AA</a></li>
      <li><a href="#">---- BB</a></li>
      <li><a href="#">---- CC</a></li>
	 <li><a href="#">Sub Item 2.2</a></li>
      <li><a href="#">Sub Item 2.3</a></li>
    </ol>
  </li>
 
  <li>a et K
    <ol>
      <li><a href="#">Sub Item 2.1</a></li>
      <li><a href="#">Sub Item 2.2</a></li>
      <li><a href="#">Sub Item 2.3</a></li>
    </ol>
  </li>
 
  <li>Immobilier
    <ol>
      <li><a href="#">Sub Item 3.1</a></li>
      <li><a href="#">Sub Item 3.2</a></li>
      <li><a href="#">Sub Item 3.3</a></li>
    </ol>
  </li>
  <li>Information
    <ol>
      <li><a href="#">Sub Item 4.1</a></li>
      <li><a href="#">Sub Item 4.2</a></li>
      <li><a href="#">Sub Item 4.3</a></li>
    </ol>
  </li>
  <li>Association
    <ol>
     <li>Sub Item 5.1</a></li>
            <li><a href="#">Sub Item aaa</a></li>
            <li><a href="#">Sub Item bbbb</a></li>
      <li><a href="#">Sub Item 5.2</a></li>
      <li><a href="#">Sub Item 5.3</a></li>
  </li>
    </ol>
     </li>
      <li>Information
    <ol>
      <li><a href="#">Sub Item 3.1</a></li>
      <li><a href="#">Sub Item 3.2</a></li>
      <li><a href="#">Sub Item 3.3</a></li>
    </ol>
  </li>
   <li>Interactivite
    <ol>
      <li><a href="#">Sub Item 3.1</a></li>
      <li><a href="#">Sub Item 3.2</a></li>
      <li><a href="#">Sub Item 3.3</a></li>
    </ol>
  </li>
   <li>Judaisme
    <ol>
      <li><a href="#">Sub Item 3.1</a></li>
      <li><a href="#">---- Item 3.2</a></li>
      <li><a href="#">Sub Item 3.3</a></li>
    </ol>
  </li>
   <li>Mais encore...
    <ol>
      <li><a href="#">Sub Item 3.1</a></li>
      <li><a href="#">----ub Item 3.2</a></li>
      <li><a href="#">Sub Item 3.3</a></li>
    </ol>
  </li>
</ul>
<p></a></p>
	</body>
 
</html>

**trotters213** · 15/12/2006, 08h57

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<ol>
  <li><a href="#">Sub Item 2.0</a></li>
  <li><a href="#">Sub Item 2.1</a>
    <ol>
      <li><a href="#">Sub Item 2.1.0</a></li>
      <li><a href="#">Sub Item 2.1.1</a></li>
      <li><a href="#">Sub Item 2.1.2</a></li>
      <li><a href="#">Sub Item 2.1.3</a></li>
    </ol>
  </li>
  <li><a href="#">Sub Item 2.2</a></li>
  <li><a href="#">Sub Item 2.3</a></li>
</ol>

Maintenant il faut que ton CSS et ton Javascript le prènent en compte par contre.

Menu, avec sous menu et sous sous menu

HTML

Discussions similaires

Partager

Partager