✔ JavaScript-Menü

Sturmrider · 22. April 2006

Vielen Dank! funktioniert

Nur noch ne Frage aus Interesse

:
habt ihr noch eine Idee, wie ich das mit den
top:30px; besser hinbekomme?
ich verwende derzeit top:30%; . Aber wie ist es bei unterschiedlichen Bildschirmauflösungen, verschiebt sich dann nicht auch dann alles?
gibts da noch ne besser Variante, dass man das z.B. anhand einer Tabellenspalte ausrichtet? d.h. die Position der Tabellenspalte ermittelt und den dann gleich top: setzt? gibts da einen Befehl für ^^?

EDIT: Ich warte immernoch auf eine Antwort

Sturmrider · 4. Juli 2007

So nach nun über einem Jahr bin auch nocheinmal auf diesen Thread gestoßen. Ich kenne nun eine weitaus bessere Methode so ein Menü zu programmieren, nämlich in CSS (passt zwar nicht zur Kategorie der dieser Thread angehört, trotzdem sollte das hier stehen, bei den vielen Klicks die dieser Thread bereits hatte)

Dieses Menü hat übrigens den Vorteil, dass es unendlich tief verschachtelt werden kann und ganz leicht und schnell über CSS optisch etc. angepasst werden kann!

HTML:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"><title></title>
<style type="text/css">
ul.nav {
	float: left;
	list-style: none;
	background: white;
	font-weight: bold;
	padding: 0;
	border: solid black 1px;
}

.nav li {
		list-style: none;
		}

.nav li:hover {
				background-color: #C0C0C0;
			}

.nav > li { 	float: left;  /*nur die oberste Ebene*/
			padding: 0 1em;
			overflow: visible;
		}

.nav > li li {
	border: solid black 1px;
	border-top: none;
	margin-left: -1px;
}
		
.nav ul {
	padding: 0;
	border-top: solid black 1px;
}

.nav a {
	color: #7C6240;
	text-decoration: none;
}

.nav > li > ul {
	position: absolute;
	display: none;
	margin-left: -1em;
}

.nav > li:hover > ul {
	display: block;
}

.nav > li > ul  li > ul {
	display: none;
	position: absolute;
	left: 100%;
	top: 0%;
	margin-top: -1px;
}

.nav > li > ul  li:hover > ul {	/*3. Ebene*/
	display: block;
}
</style></head>
<body>
<ul class="nav"><li>
<a href="#">Oberkategorie</a>
<ul>
<li>
<a href="http://www.google.de/" target="_blank">Subkategorie1</a>
<ul>
<li>
<a href="http://www.blabla.de">Unterkategorie1</a>

<ul>
<li>
<a href="adfad">ioadhkagjkg</a>
<ul>
<li>
<a href="">ozuq3i84tz378ihuaqkdg</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="http://www.test.de" target="_blank">Subkat2</a>

</li>
</ul>
</li>
<li>
<a href="#">Oberkategorie2</a>
</li>
<li>
<a href="1">Testkategorie</a>
</li>
</ul></body>
</html>

Sven Mintel · 4. Juli 2007

Hast du dein Menu schonmal im IE betrachtet?

Ansonsten: http://cssplay.co.uk/menus/dd_valid.html

Sturmrider · 4. Juli 2007

Du hast recht >< *sauer auf IE ist* der CSS-Code ist aber zu 100% richtig und absolut nach der vorgegebenen Norm von W3C geschrieben. Ich habs in allen Browsern getestet (nur nicht dem IE) ein Bekannter meinte jedoch, dass es im aktuellen IE funktionieren würde.
Ich werde mich nocheinmal an den Code setzen und gucken was ich verändern kann, so dass er auch vom IE richtig interpretiert wird und trotzdem keine Fehler im Quellcode sind... ich befürchte jedoch, dass dies nahezu unmöglich ist

Das Beispiel, dass du gepostet hast finde ich nicht besonders gelungen, da nur mit ein paar klassen gearbetet wird und nichts für dynamik sorgt. -> soll heißen: sobald man eine relativ hohe verschachtelung von Menüpunkten hat, muss man für jede Verschachtelung eine neue CSS Regel erstellen <,< verdammt ineffektiv und nicht gerade schnell...
Trotzdem ist dieses Beispiel noch um längen besser als folgendes http://www.htmldog.com/articles/suckerfish/dropdowns/example/
Dieses ist leider auf sehr vielen Seiten kopiert wieder zu finden. In diesem Code stecken ungeheuer viele Deklarationen, die gar keinen Sinn machen (darum kann man auf anderen Seiten auch relativ eindeutig erkennen, dass die Codes einfach von diesem wirklich schlechten Beispiel kopiert wurden.)

Also ich kümmere mich darum

Maik · 4. Juli 2007

Hi,

dann setz ich noch einen oben drauf -> http://cssplay.co.uk/menus/simple_vertical.html kommt als 6-Level-Dropdown-Menü daher.

Sturmrider · 4. Juli 2007

also das Problem für diesen schrott IE ist: IE6 kriegt die Selektoren nicht auf die Reihe, IE7 ignoriert das W3C-Boxmodell...
ich muss den kompletten CSS-Code neu schreiben (das wird allerdings etwas dauern sry, habe nicht so viel Zeit)

Das Beispiel http://cssplay.co.uk/menus/simple_vertical.html ist gar nicht so schlecht, ein riesen Nachteil davon ist jedoch, es hat konstante Breiten d.h. sobald ein Menü-Punkt die vorgegebene Breite überschreitet wird er abgeschnitten... das Problem besteht bei meiner Lösung nicht
Sie funktionieren übrigens garantiert im FireFox, Mozilla, Opera, Konqueror und Safari, für die IE Krankheit muss ich mich nocheinmal ran setzten

maozetung · 29. August 2007

Super für Eueren Einsatz ...

@Sturmraider, hast Du schon eine IE Lösung gefunden?

Nur eine kleine Frage: Ist der Code frei für http://cssplay.co.uk/menus/simple_vertical.html , kann ich den auf kommerziellen Seiten verwenden?
Danke

Sven Mintel · 29. August 2007

maozetung hat gesagt.:
Nur eine kleine Frage: Ist der Code frei für http://cssplay.co.uk/menus/simple_vertical.html , kann ich den auf kommerziellen Seiten verwenden?
Danke

http://www.cssplay.co.uk/menus/simple_vertical.html hat gesagt.:
2. If you are using this on a commercial web site then please email me asking for permission - stu{at}cssplay.co.uk and again a donation to the 'Support CSSplay' fund would be appreciated.

..........

rainman80 · 2. November 2007

Dynamisches Menü über Text

Hallo!

Habe hier endlich ein relativ einfaches dynamisches Balkenmenü gefunden. Funktioniert alles super nur wird der Text bzw. die weitere Seite um die Höhe des Untermenüs nach Unten verschoben. Sollte aber nicht sein, das Untermenü sollte über die Seite eingeblendet werden...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Kardex Menü</title>
<style type="text/css">
<!--
div 
{
	font-size: 10px;
	font-weight: bold;	
	font-family: Arial, helvetica;
	font-color: #698aea;
	a-link: #698AEA;
	v-link: #698AEA;
	text-decoration: none;	
}
-->
</style>
 
<script type="text/javascript">
  
  var subs=new Array('sub1','sub2','sub3');
  var zeit='';
  function tmeout()
  {
	zeit=setTimeout('hideall()',100);
  }
  function hideall()
  {
	for(x=0; x<subs.length;x++)
	{
	  document.getElementById(subs[x]).style.visibility='hidden';
	}
  }
  function display(ele)
  {
	clearTimeout(zeit);
	for(x=0; x<subs.length;x++)
	{
		if(subs[x]!=ele)
		{
	  		document.getElementById(subs[x]).style.visibility='hidden';
		}
	}
	document.getElementById(ele).style.visibility='visible';
  }
</script>

</head>
<body>
<div style="width: 100%; float: none;">
	<div onmouseout="tmeout();" style="float: left;"><a href="home.html"><img src="images/home.gif" alt="" border="0"/></a></div>
	<div style="text-align: center;float: left;"><img src="images/spacer.gif" alt=""/></div>
	  
	<div onmouseover="display('sub1');" onmouseout="tmeout();" style="float: left;"><a href="home.html"><img src="images/about.gif" alt="" border="0"/></a></div>
	<div style="text-align: center;float: left;"><img src="images/spacer.gif" alt=""/></div>
	  
	<div onmouseover="display('sub2');" onmouseout="tmeout();" style="float: left;"><a href="home.html"><img src="images/products.gif" alt="" border="0"/></a></div>
	<div style="text-align: center;float: left;"><img src="images/spacer.gif" alt=""/></div>
	  
	<div onmouseout="tmeout();" style="float: left;"><a href="home.html"><img src="images/reports.gif" alt="" border="0"/></a></div>
	<div style="text-align: center;float: left;"><img src="images/spacer.gif" alt=""/></div>
	  
	<div onmouseout="tmeout();" style="float: left;"><a href="home.html"><img src="images/news.gif" alt="" border="0"/></a></div>
	<div style="text-align: center;float: left;"><img src="images/spacer.gif" alt=""/></div>
	  
	<div onmouseover="display('sub3');" onmouseout="tmeout();" style="float: left;"><a href="home.html"><img src="images/contact.gif" alt="" border="0"/></a></div>
</div>
<div style="width: 100%; float: left;">
	<div style="float: left; width: 126px; visibility: hidden; margin-left:129px; border: 1px solid #D5D8DF" id="sub1" onmouseover="clearTimeout(zeit);" onmouseout="tmeout();" onclick="display('h','sub1')">
		<a href="http://www.moschke.info"><img src="images/konzern.gif" onmouseover="this.src='images/konzern_sel.gif'" onmouseout="this.src='images/konzern.gif'" alt="" border="0"/></a>
		<a href="http://www.hornecker.info"><img src="images/warum.gif" onmouseover="this.src='images/warum_sel.gif'" onmouseout="this.src='images/warum.gif'" alt="" border="0"/></a>
		<a href="http://www.hornecker.info"><img src="images/produktion.gif" onmouseover="this.src='images/produktion_sel.gif'" onmouseout="this.src='images/produktion.gif'" alt="" border="0"/></a>
		<a href="http://www.hornecker.info"><img src="images/offene.gif" onmouseover="this.src='images/offene_sel.gif'" onmouseout="this.src='images/offene.gif'" alt="" border="0"/></a>
				  
	</div>
	<div style="float: left; visibility: hidden; width: 126px; margin-left:1px; border: 1px solid #D5D8DF" id="sub2" onmouseover="clearTimeout(zeit);" onmouseout="tmeout();" onclick="display('h','sub1')">
		<a href="http://www.hornecker.info"><img src="images/lager.gif" onmouseover="this.src='images/lager_sel.gif'" onmouseout="this.src='images/lager.gif'" alt="" border="0"/></a>  
		<a href="http://www.hornecker.info"><img src="images/office.gif" onmouseover="this.src='images/office_sel.gif'" onmouseout="this.src='images/office.gif'" alt="" border="0"/></a>
		<a href="http://www.hornecker.info"><img src="images/kunden.gif" onmouseover="this.src='images/kunden_sel.gif'" onmouseout="this.src='images/kunden.gif'" alt="" border="0"/></a>
		<a href="http://www.hornecker.info"><img src="images/produkt.gif" onmouseover="this.src='images/produkt_sel.gif'" onmouseout="this.src='images/produkt.gif'" alt="" border="0"/></a>		  
	</div>
	<div style="float: left; visibility: hidden; width: 126px; margin-left:256px; border: 1px solid #D5D8DF" id="sub3" onmouseover="clearTimeout(zeit);" onmouseout="tmeout();" onclick="display('h','sub1')">
		<a href="http://www.hornecker.info"><img src="images/online.gif" onmouseover="this.src='images/online_sel.gif'" onmouseout="this.src='images/online.gif'" alt="" border="0"/></a>
		<a href="http://www.hornecker.info"><img src="images/verkauf.gif" onmouseover="this.src='images/verkauf_sel.gif'" onmouseout="this.src='images/verkauf.gif'" alt="" border="0"/></a>
		<a href="http://www.hornecker.info"><img src="images/kunden.gif" onmouseover="this.src='images/kunden_sel.gif'" onmouseout="this.src='images/kunden.gif'" alt="" border="0"/></a>
		<a href="http://www.hornecker.info"><img src="images/kardex.gif" onmouseover="this.src='images/kardex_sel.gif'" onmouseout="this.src='images/kardex.gif'" alt="" border="0"/></a>
	</div>	
</div>
<div>test</div>
</body>
</html>

Die Bilder habe ich mal angefügt, einfach den Code in eine html Datei rein und die zip Datei in diesen Ordner in den Unterordner: images entpacken.

Vielleicht gibt es noch eine elegantere Lösung mit css?

Gruß
Robert

KurtKabine · 5. November 2007

Das Menu ist zwar schön aber funktioniert bei mir nicht richtig im Internet Explorer

✔ JavaScript-Menü

Sturmrider

Erfahrenes Mitglied

Sturmrider

Erfahrenes Mitglied

Sven Mintel

Mitglied

Sturmrider

Erfahrenes Mitglied

Maik

Sturmrider

Erfahrenes Mitglied

maozetung

Grünschnabel

Sven Mintel

Mitglied

rainman80

Grünschnabel

Anhänge

KurtKabine

Mitglied

Neue Beiträge