JS-Menü: Unterpunkte per Klick schließen

B

bennihaag

Mitglied
Hallo,

ich hab ne Frage zu folgendem Menüskript:

head:
Code: 
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=15; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>


<style type="text/css">
<!-- 

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
top: 0;
left: 0;
}
dl#menu {
width: 153px;
}
dl#menu dt {
cursor: pointer;
margin: 1px 1px;
height: 100%;
line-height: 20px;
text-align: left;
font-weight: bold;
border: 1px solid white;
border-left: 4px solid #2159bd;
background: url(images/transp-cc.gif);
}
dl#menu dd {
border: 0 none;
}
dl#menu li {
text-align: left;
background: #fff;
margin: 1px 1px;
line-height: 20px;
border: 0 none;
border-left: 4px solid #e3effd;
}
dl#menu li a, dl#menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}

dl#menu li a:hover
{
background: #e3effd;
}

dl#menu dt a:hover {
background: #2159bd;
color: #FFFFFF;
}

-->
</style>
und im body:
Code: 
<dl id="menu">

		<dt onclick="javascript:montre('smenu1');"><a href="#">&nbsp;Menü1</a></dt>
			<dd id="smenu1">
				<ul>
					<li><a href="#"><font face="Times New Roman" size="1">?</font>&nbsp;Unterpunkt1</a></li>
					<li><a href="#"><font face="Times New Roman" size="1">?</font>&nbsp;Unterpunkt2</a></li>
					<li><a href="#"><font face="Times New Roman" size="1">?</font>&nbsp;Unterpunkt3</a></li>
					<li><a href="#"><font face="Times New Roman" size="1">?</font>&nbsp;Unterpunkt4</a></li>
					<li><a href="#"><font face="Times New Roman" size="1">?</font>&nbsp;Unterpunkt5</a></li>
					<li><a href="#"><font face="Times New Roman" size="1">?</font>&nbsp;Unterpunkt6</a></li>
				</ul>
			</dd>	
			
		<dt onclick="javascript:montre('smenu2');"><a href="#">&nbsp;Menü2</a></dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#"><font face="Times New Roman" size="1">?</font>&nbsp;Unterpunkt1</a></li>
					<li><a href="#"><font face="Times New Roman" size="1">?</font>&nbsp;Unterpunkt2</a></li>
				</ul>
			</dd>	
</dl>

derzeit ist es so, dass eine Unterpunktgruppe (Unterpunkt1, Unterpunkt2, etc.) solange geöffnet ist, bis ein zweiter Oberpunkt (Oberpunkt2) per Klick geöffnet wird, (dann schließt sich die Unterpunktgruppe vom ersten Oberpunkt und es öffnet sich die des zweiten). Wäre es auch möglich, dass sich per Klick auf z.b. den Oberpunkt1 die Unterpunkte von diesem Oberpunkt1 schließen?

Danke schon mal für eure Hilfe!
 
Hi,

das wäre dann die reinste Schlankheitskur für den Script-Code :)

Code: 
<script type="text/javascript">
<!--
function montre(id) {
obj = document.getElementById(id);
obj.style.display = obj.style.display == 'block' ? 'none' : 'block';
}
//-->
</script>
und im Stylesheet nimmst du für die Untermenüs diese Regel auf, damit sie beim Seitenaufruf zunächst nicht angezeigt werden:

Code: 
#smenu1, #smenu2 {
display:none;
}
mfg Maik
 
danke Dir für die schnelle Antwort.
Super, das funktioniert :)

Aber: in meinem Fall habe ich 8 Oberpunkte mit einigen Unterpunkten. Nach der Version jetzt kann der Websitesurfer sämtliche Oberpunkte gleichzeitig öffnen, sodass ein ewig-langes Menü entsteht. Vorher war das ja so gelöst, dass sich Oberpunkt 1 schließt, sobald Oberpunkt 2 aufgerufen wird. Ich wollte also zu dem noch eine Erweiterung, dass sich Oberpunkt 1 auch durch Klick auf Oberpunkt 1 schließen lässt. Gewissermaßen also eine Kombination aus den beiden Codes, die ich jetzt habe.
Lässt sich sowas realisieren?
 
mmh danke :)
das CSS ändern, damit das Menü vertikal ausgerichtet ist, bekomme ich noch hin. aber wenn du jetzt einen menüpunkt öffnen willst, dann werden die untermenüpunkte immer schön von den anderen menüpunkten überdeckt.
bei meinem anderen script rutschen ja alle anderen punkte schön nach unten und machen platz für die erscheinenden unterpunkte.
gibts ne einfache möglichkeit, das script aus meinem ersten post mit dem script von Maiks erstem post zu kombinieren?
wie immer: tausend dank schonmal! :)
 
Hi,

dann hast du wohl die absolute Positionierung der Submenüs nicht aufgehoben ;)

Code: 
#menu {list-style-type:none; width:160px; padding:0; margin:0 auto;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li { background:#088; margin:1px 1px 0 0;position:relative;}
#menu li.sub {background:#f80;}
#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:24px; width:160px; text-decoration:none; text-align:center; cursor:pointer; font-weight:bold;}
#menu li:hover, #menu li a:hover {background:#c00;}
#menu ul {display:none;width:160px;}
#menu li.click {background:#c00;}
#menu li.click ul{display:block; background:url(transparent.gif);} /* the background image is for IE7 */
mfg Maik
 
Hallo,

danke für den Tipp, habe das Menü von Stu Nicholl im Design bisschen angepasst; nur leider läuft es jetzt nur im Internet Explorer richtig (normal is das bei mir immer andersherum), im Firefox z.B. streikt das ganze:

Folgenden Code habe ich:
style:
Code: 
<style type="text/css">
<!-- 
#menu {
list-style-type:none; 
top: 0;
left: 0;
padding:0; 
margin:0;
background: transparent;
width: 153px;
border: 0 none;
}
#menu ul {
list-style-type:none; 
padding:0; 
margin:0;
display:none;
border: 0 none;
}
#menu li.sub {
width:151px;
cursor: pointer;
margin: 1px 1px;
line-height: 20px;
text-align: left;
}
#menu li.sub a {
height: 100%;
display:block;
text-align: left;
font-weight: bold;
text-decoration: none;
border: 1px solid white;
border-left: 4px solid #2159bd;
background: url(images/transp-cc.gif);
}
#menu li.sub a:hover {
background:#2159bd;
color:#FFFFFF;
}
#menu li.sub.click a {
background:#2159bd;
color:#FFFFFF;
}
#menu li.sub2 {
width:151px;
text-align: left;
background: #FFFFFF;
margin: 1px 0px;
line-height: 20px;
border: 0 none;
border-left: 4px solid #e3effd;
}
#menu li.sub2 a {
color: #000000;
background: #FFFFFF;
text-decoration: none;
font-weight: normal;
display: block;
border: 0 none;
height: 100%;
}
#menu li.sub2 a:hover {
background:#e3effd;
color:#000000;
}
#menu li.click ul{
display:block; 
}
-->
</style>
das menü selbst (auszug):
Code: 
<ul id="menu">
		<li class="sub"><a href="#"><font face="Times New Roman">?</font>&nbsp;Menü1</a>
				<ul>
					<li class="sub2"><a href="#">&nbsp;Unterpunkt1</a></li>
					<li class="sub2"><a href="#">&nbsp;Unterpunkt2</a></li>
					<li class="sub2"><a href="#">&nbsp;Unterpunkt3</a></li>
				</ul>
		</li>
			
		<li class="sub"><a href="#">&nbsp;Menü2</a>
				<ul>
					<li class="sub2"><a href="#">&nbsp;Unterpunkt1</a></li>
					<li class="sub2"><a href="#">&nbsp;Unterpunkt1</a></li>
				</ul>
		</li>

		<li class="sub"><a href="#">&nbsp;Menü3</a>
		</li>
</ul>

Zur Veranschaulichung habe ich noch jeweils einen Screenshot aus dem Internet Explorer (IE) und Firefox (FF) angehängt. Die Ansicht aus dem Internet Explorer ist die wünschenswerte; der Screenshot zeigt, wenn die Maus auf dem Unterpunkt von Menü1 steht...

Danke schonmal für jede Hilfe
 

Anhänge

  • IE.jpg
    IE.jpg
    6,6 KB · Aufrufe: 115
  • FF.jpg
    FF.jpg
    6,6 KB · Aufrufe: 110
Versuch's mal hiermit:
Code: 
#menu li.sub {
/*width:151px;*/
cursor: pointer;
margin: 1px 1px;
line-height: 20px;
text-align: left;
}

#menu li.sub2 {
/*width:151px;*/
text-align: left;
background: #FFFFFF;
margin: 1px 0px;
line-height: 20px;
border: 0 none;
border-left: 4px solid #e3effd;
}
mfg Maik
 
super, danke das wars...

beim vergleich in den beiden browsern geht noch was im FF schief:
und zwar behalten die Oberpunkte (Menü1, Menü2 etc.) einen dunkelblauen Hintergrund, so lange deren Unterpunktgruppe geöffnet ist.
Wird wohl über das
Code: 
#menu li.sub.click a {
background:#2159bd;
color:#FFFFFF;
}
in verbindung mit dem Javascript gesteuert.
Aber leider bekommt dann die ganze Untergruppe einen dunkelblauen Hintergrund (siehe Screenshot)...

Was kann ich dagegen tun?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück