Archivlink: javarea.de Forum > JavaScript > Foldout Menü Frage
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Foldout Menü Frage

Pages: [1]
geschrieben von madtrigger am 13.04.2006 - 23:34
Hallo Leute,

ich habe bereits die Suche genutzt und alle Ergebnisse durchforstet, aber es gibt keine Lösungen bezüglich folgender Frage:

wie erweitere ich das "Foldoutmenue Vertikal" um weitere menü-unterpunkte, so wie hier dargestellt:

http://www.deluecks.com/div/foldout.gif

bin für konstruktive hilfe (und keine verweise auf die suche) dankbar. kein anderer thread geht auf diese frage ein.

danke und grüße
madtrigger



HTML-Quelltext
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: 
130: 
131: 
132: 
133: 
134: 
135: 
136: 
137: 
138: 
139: 
140: 
141: 
142: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; CHARSET=iso-8859-1"><title>Javascript & CSS Seitenmenu</title>


 <style type="text/css">
 <!--
body {
   background-color:#E0E0E0;
   font-family:"Arial,Andale Mono",sans-serif;
   font-weight: normal;
   font-size: 12px;
   scrollbar-base-color:#000000;
   scrollbar-3dlight-color:#F9F8F3;
   scrollbar-darkshadow-color:#CDCFD1;
   scrollbar-face-color:#D9DADE;
   scrollbar-highlight-color:#D8DADC;
   scrollbar-shadow-color:#D8DADC;
   scrollbar-track-color:#CDCFD1;
   scrollbar-arrow-color:#BD0B29 }
}

#main {
   margin-left: 9em;
}
#menu {
   position: absolute;
   left: 0;
   margin: 0;
   padding: 10px; 
}
#menu  a {
   display: block;
   padding-left: 20px;
}
#menu ul{
   margin-left: 0;
   padding-left: 40px;
}
#menu ull{
   margin-left: 0;
   padding-left: 60px;
}
#menu li ul {
   padding: 0;
   margin:  0;
}
#menu li {
   cursor: pointer;
   list-style-type: none;
   padding: 0;
   text-decoration: underline;
   display: block;
   *border: solid 1px #E0E0E0;
   /*border: solid 1px white;*/
}
 //-->
 </style>


 <script type="text/javascript">
 <!--
  function hideSub( ) {
   if (!document.getElementsByTagName)
      return;
   var mnu = document.getElementById("menu");
   var toplis = mnu.getElementsByTagName("li");
   for (it = 0; it < toplis.length; it++) { /* each top li */
      var sublis = toplis[it].getElementsByTagName("li");
      for (is = 0; is < sublis.length; is++)  { /* each sub li */
         if (sublis[is].style)
            if (toplis[it].className == 'show')
               sublis[is].style.display = 'block';
            else
               sublis[is].style.display = 'none';
      }
   }
}
function mShow(Me)
{
   if (!Me.getElementsByTagName)
      return;
   var mylis = Me.getElementsByTagName("li");
   if (!mylis)
      return;
   for (j = 0; j < mylis.length; j++) {
      if (mylis[j].style.display == 'block')
         mylis[j].style.display = 'none';
      else
         mylis[j].style.display = 'block';
   }
}
 //-->
 </script>


<body onload="hideSub();">
<img src="navigation_logo.gif">
<br>
<br>
<ul id="menu">
   <li onclick="mShow(this);">Options 1
      <ul>
         <li style="display: none;"><a href="menue1-1.html" target="main">Item 1.1</a></li>
         <li style="display: none;"><a href="menue1-1.html" target="main">Item 1.2</a></li>
         <li style="display: none;"><a href="menue1-1.html" target="main">Item 1.3</a></li>
         <li style="display: none;"><a href="menue1-1.html" target="main">Item 1.4</a></li>
      </ul>
   </li>
   <li class="show" onclick="mShow(this);">Options 2
      <ul>
         <li style="display: none;"><a href="menue1-1.html" target="main">Item 2.1</a></li>
         <li style="display: none;"><a href="menue1-1.html" target="main">Item 2.2</a></li>
         <li style="display: none;"><a href="menue1-1.html" target="main">Item 2.3</a></li>
      </ul>
   </li>
   <li onclick="mShow(this);">Options 3
      <ul>
         <li style="display: none;"><a href="menue1-1.html" target="main">Item 3.1</a></li>
         <li style="display: none;"><a href="menue1-1.html" target="main">Item 3.2</a></li>
         <li style="display: none;"><a href="menue1-1.html" target="main">Item 3.3</a></li>
      </ul>
   </li>
   <li onclick="mShow(this);">Options 4
      <ul>
         <li style="display: none;"><a href="menue1-1.html" target="main">Item 4.1</a></li>
         <li style="display: none;"><a href="menue1-1.html" target="main">Item 4.2</a></li>
         <li style="display: none;"><a href="menue1-1.html" target="main">Item 4.3</a></li>
      </ul>
   </li>
   <li onclick="mShow(this);">Options 5
      <ul>
         <li style="display: none;"><a href="menue1-1.html" target="main">Item 5.1</a></li>
         <li style="display: none;"><a href="menue1-1.html" target="main">Item 5.2</a></li>
         <li style="display: none;"><a href="menue1-1.html" target="main">Item 5.3</a></li>
      </ul>
   </li>
</ul>


</body>
</html>

geschrieben von madtrigger am 14.04.2006 - 21:54
hat keiner lust zu helfen?

geschrieben von madtrigger am 16.04.2006 - 01:41
das ist echt ein tolles forum. was bringt es, wenn hier keiner hilft? ich erwarte nicht das umschreiben des codes, sondern vielleicht ein paar kleine tipps.

geschrieben von zippy am 16.04.2006 - 02:34
Sei nicht gleich angfressen, wenn du schon nicht die Suche bemühen willst. Es ist Ostern und vielleicht machen der/die Autor(in/en) gerade Urlaub vom PC. Erwarte bitte nicht von allen, sich Hals über Kopf in unbekannte Scripts zu stürzen.

geschrieben von René am 16.04.2006 - 10:14
Hallo madtrigger,

das wird nichts, du kannst es zwar erweitern aber dann wird alles angezeigt oder garnichts. Das Script gibt nur eine Sub-Ebene her.

alt:
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 

<li onclick="mShow(this);">Options 1
      <ul>
         <li style="display: none;"><a href="menue1-1.html" target="main">Item 1.1</a></li>
         <li style="display: none;"><a href="menue1-1.html" target="main">Item 1.2</a></li>
         <li style="display: none;"><a href="menue1-1.html" target="main">Item 1.3</a></li>
         <li style="display: none;"><a href="menue1-1.html" target="main">Item 1.4</a></li>
      </ul>
   </li>


neu:
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 

<li onclick="mShow(this);">Options 1
      <ul>
         <li onclick="mShow(this);">Options 1.1

           <ul>
             <li style="display: none;"><a href="menue1-1.html" target="main">Item 1.1.1</a></li>
             <li style="display: none;"><a href="menue1-1.html" target="main">Item 1.1.2</a></li>
             <li style="display: none;"><a href="menue1-1.html" target="main">Item 1.1.3</a></li>
             <li style="display: none;"><a href="menue1-1.html" target="main">Item 1.1.4</a></li>
           </ul>
         </li>
         <li style="display: none;"><a href="menue1-1.html" target="main">Item 1.2</a></li>
         <li style="display: none;"><a href="menue1-1.html" target="main">Item 1.3</a></li>
         <li style="display: none;"><a href="menue1-1.html" target="main">Item 1.4</a></li>
      </ul>
   </li>

geschrieben von madtrigger am 28.04.2006 - 18:00
besten dank für deine antwort. dann werde ich mich mal anderweitig umgucken ;)


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.