Archivlink: javarea.de Forum > (X)HTML & CSS (allgemein) > Den Div durch mausklick öffnen und wieder durch mausklick schließen
Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > Den Div durch mausklick öffnen und wieder durch mausklick schließen

Pages: [1]
geschrieben von abdullah am 03.03.2008 - 15:53
Hallo leute ich habe folgenden Code erstellt. Jedoch funktionier diese nicht so wie ich es möchte. Das Menu soll sich auf Maus Klick öffnen und solange offen bleiben bis ein anderes Menüpunkt ( Rubrik ) gewählt worden ist. Nebenbei soll es sich auch auf erneutes klicken auf die selbe Rubrik ( Menupunkt ) schließen unabhängig davon ob direkt in der offenen position ein zweites Menü gewählt worden ist oder nicht .

Es bewegt sich einiges beim onClick funktion druch javascript jedoch öffnet sich immer in der selben stelle, und man kann den inhalt des div containers nicht sehen.

Bitte um Hilfe

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: 
143: 
144: 
145: 
146: 
147: 
148: 
149: 
150: 
151: 
152: 
153: 
154: 
155: 
156: 
157: 
158: 
159: 
160: 
161: 
162: 
163: 
164: 
165: 
166: 
167: 
168: 
169: 
170: 
171: 
172: 
173: 
174: 
175: 
176: 
177: 
178: 
179: 
180: 
181: 
182: 
183: 
184: 
185: 
186: 
187: 
188: 
189: 
190: 
191: 
192: 
193: 
194: 
195: 
196: 
197: 
198: 
199: 
200: 
201: 
202: 
203: 
204: 
205: 
206: 
207: 
208: 
209: 
210: 
211: 
212: 
213: 
214: 
215: 
216: 
217: 

<html>
<head>
 <title></title>
 <style type="text/css">
 <!--
 #mainnav {
	margin-left: 5px;
	margin-top: 0px;
}

#mainnav ul {
	list-style-type: none;
	margin: 0px -1px 0px 0px;
	padding: 0px;
	border: none;
	font-family: "arial", Geneva, Helvetica, Swiss, SunSans-Regular;
}

#mainnav li {
	width: 170px;
	margin: 0px -1px 0px 0px;
}

#mainnav a.off {
	background-color: #fff;
	border-bottom: 3px #f58220 solid;
	border-top: 1px #f58220 solid;
	border-right: 1px #f58220 solid;
	border-left: 1px #f58220 solid;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
	font-size: 11px;
	font-weight: bold;
	text-align: left;
	text-decoration: none;
	color: #0d4a92;
	width: 160px;
	display: block;
}

#mainnav a.off:hover {
	background-color: #fff;
	border-bottom: 3px #f58220 solid;
	border-top: 1px #f58220 solid;
	border-right: 1px #f58220 solid;
	border-left: 1px #f58220 solid;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
	font-family: "arial", Geneva, Helvetica, Swiss, SunSans-Regular;
	font-size: 11px;
	font-weight: bold;
	text-align: left;
	text-decoration: none;
	color: #0d4a92;
	width: 160px;
}

#mainnav a.on2{
	background-color: #fff;
	border-bottom: 0px;
	border-top: 1px #f58220 solid;
	border-right: 1px #f58220 solid;
	border-left: 1px #f58220 solid;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
	font-size: 11px;
	font-weight: bold;
	text-align: left;
	text-decoration: none;
	color: #0d4a92;
	width: 160px;
	display: block;
}

#mainnav a.on2:hover {
	background-color: #fff;
	border-bottom: 0px;
	border-top: 1px #f58220 solid;
	border-right: 1px #f58220 solid;
	border-left: 1px #f58220 solid;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
	font-family: "arial", Geneva, Helvetica, Swiss, SunSans-Regular;
	font-size: 11px;
	font-weight: bold;
	text-align: left;
	text-decoration: none;
	color: #0d4a92;
	width: 160px;
}

ul#subnav {
	border-bottom: 3px #f58220 solid;
	border-right: 1px #f58220 solid;
	border-left: 1px #f58220 solid;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	background:#fff;
}

#subnav li {
	margin: 0px 0px 0px 5px;
	width: 160px;
}

#subnav li a {
 	padding-left: 5px;
	font-size: 11px;
	font-weight: normal;
	text-align: left;
	text-decoration: none;
	line-height: 1.5em;
	color: #333;
	width: 160px;
	display: block;
}

#subnav li a:hover {
     padding-left: 5px;
     font-family: "arial", Geneva, Helvetica, Swiss, SunSans-Regular;
     font-size: 11px;
     font-weight: normal;
     text-align: left;
     text-decoration: none;
     line-height: 1.5em;
     color: #F58220;
     width: 160px;
}

 //-->
 </style>
 
 <script type="text/javascript">
 <!--

    function showhide(divid) {
        obj = document.getElementById(divid);
        obj.style.display = obj.style.display == 'none' ? 'block' : 'none';
    }

 //-->
 </script>
 
</head>
<body>

<!-- Start Menue -->
    <div id="mainnav">
    <ul>
    <div><img src="design/spacer.gif" height="5px"></div>
    <!-- Startseite 1 -->
    <li><a class="off" href="">Startseite</a>
    <div><img src="design/spacer.gif" height="5px"></div>
    <!-- Unser Verein 2 -->
    <li><a class="off" href="" onClick="showhide('subnav')">Unser Verein</a>
        <div id="subnav" style="display:none">
        <ul id="subnav">
            <li><a href="">Satzung</a></li>
            <li><a href="">Vorstand</a></li>
            <li><a href="">Unzer Ziel</a></li>
            <li><a href="">Mitgliedschaft</a></li>
        </ul>
        </div>
    </li>
    <div><img src="design/spacer.gif" height="5px"></div>
    <!-- Nachhilfe 3 -->
    <li><a class="off" href="" onClick="showhide('subnav')">Nachhilfe</a>
        <div id="subnav" style="display:none">
        <ul id="subnav" style="display:none;">
            <li><a href="">Beratung und Probeunterricht</a></li>
            <li><a href="">Nachhilfeprogramm</a></li>
            <li><a href="">Preisliste</a></li>
        </ul>
        </div>
    </li>
    <div><img src="design/spacer.gif" height="5px"></div>
    <!-- Pruefungsvorbreitungen 4 -->
    <li><a class="off" href="" onClick="showhide('subnav')">Pr&uuml;fungsvorbreitung</a>
        <div id="subnav" style="display:none">
        <ul id="subnav" style="display:none;">
            <li><a href="">MSA</a></li>
            <li><a href="">Abiturvorbreitung</a></li>
        </ul>
        </div>
    </li>
    <!-- Aktivitaeten 5 -->
    <div id="navspace"><img src="design/spacer.gif" height="5px"></div>
    <li><a class="off" href="" onClick="showhide('subnav')">Aktivit&auml;ten</a>
        <div id="subnav" style="display:none">
        <ul id="subnav" style="display:none;">
            <li><a href="">Veranstaltungen</a></li>
            <li><a href="">Bildergalerie</a></li>
            <li><a href="">Kalender / Agenda</a></li>
            <li><a href="">Archiv</a></li>
        </ul>
        </div>
    </li>
    <!-- Links 6 -->
    <div><img src="design/spacer.gif" height="5px"></div>
    <li><a class="off" href="">Links</a>
    <!-- Impressum 7 -->
    <div><img src="design/spacer.gif" height="5px"></div>
    <li><a class="off" href="">Impressum</a>
    <!-- Kontakt -->
    <div><img src="design/spacer.gif" height="5px"></div>
    <li><a class="off" href="">Kontakt</a>
    
    </ul>
    </div>

    </body>
    </html>

geschrieben von abdullah am 04.03.2008 - 09:11
Hallo,
gibt es den keinen der mir sagen kann wie ich das Problem lösen kann?

im Div - Container erstelltes Menü, der sich duch klick öffnen lässt und wieder durch klicken sich schließt. Wenn man zu einem anderen Menüpunkt ( Rubrik ) anklickt so dass die alte geöffnete Rubrik automatisch schliesst.

es Funktioniert ja aber es hat ein problem, dass die menüpunkte sich wieder automatisch direkt auf und zu gehen, somit kann ich keinen Menüpunkt aus wählen.

bitte um hilfe...
bye

geschrieben von Klaush am 04.03.2008 - 11:12
Wer wird denn hier so ungeduldig werden?

1: id's dürfen nur einmal im document vorkommen
2. bei einer href="" Anweisung erwartet der Browser ein Ziel entweder so: href="#" onclick="showhide() oder gleich so:
href="javascript:showhide()"

Tipp:
Gib deinen Submenues einen Namen zb so :subnav, diese kannst du dann zählen. In einer Schleife fragst du dann ab, welche ID das Menue hat und kannst jetzt den Status ändern.

geschrieben von abdullah am 05.03.2008 - 00:07
Hallo Klaush,
erst mal danke schön von meiner seits, dass du mir mit dem href="#" gesagt hast, denn ich wuste nicht dass es beim onClick Funktion davon abhing um ein Menü zu öffnen und zu schließen.

Andererseits bin ich noch ein anfänger und weiss somit nur xhtml und css bzw. einige Event - Handler wie onClick. Bin noch am lernen jedoch wollte ich ein Menü basteln wie dieses
http://nachhilfe.schuelerhilfe.de/k..../index.cfm da es mir gefällt und mir gedacht habe ich lerne es besser.

Der hat nur das Problem das es sich nicht beim offenem Status sich schliesst wenn man auf den Namen des Menü eintrages anklickt.

Bei mir jedoch ist es so, dass mein menü mit dem onClick sich öffnet und schliesst jedoch im offenen Status nicht auf dauer offen bleibt bis ich wieder klicke um den Menü zu schliessen.

Auch das Problem habe ich , dass der style="display:block" bereich immer in der selben stelle auf und zu geht egal welches menü ich anklicke.

bye

PS: schuldigung das ich nicht warten konnte aber jetzt habe ich auch durch den Fehler das Warten gelernt.

geschrieben von Klaush am 05.03.2008 - 07:46
Zitat
 Original geschrieben von abdullah am 05.03.2008 - 00:07
Auch das Problem habe ich , dass der style="display:block" bereich immer in der selben stelle auf und zu geht egal welches menü ich anklicke.


Das sagte ich bereits, es liegt an deinen ID's. Die ID muss eindeutig sein, sonst verweist er immer auf die erste vorkommende ID.

Entweder die o.g. Methode oder aber du änderst die ID's in zBsp: subnav_1, subnav_2 usw..


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