Willkommen in der Webstatt Zum Webstatt Blog und Stories
fish fish am 18.03.07 22:03

hallo.
ich blick js nicht so, sprich ch habe keine ahnung.

also mmein problem: ich will, dass ein submenü eingeblendet wird, wenn ich im hauptmenü über den entsprechenden menüpunkt gehe. wenn ich dann über den nächsten hauptmenüpunkt gehe, soll das nächste submenü eingeblendet werden.
am anfnag soll das subemü des ersten punktes eingeblendet werden.


wie mache ich das? (kann man das ganze in einem exteren script bauen, dass dann eingebunden wird?)

(ist die schilderung einigermassen verständlich?)

netcup.de Warum gibt es hier Werbung?
Barabbas Barabbas am 19.03.07 01:16

Also früher hätte ich gesagt: "Schau doch bei Jex", aber das ist ja wohl vorbei :/

Bei Dr. Web gibt es ein recht gutes: http://www.drweb.de/leseproben/klappmenu.shtml

Ist aber anscheinend nicht genau das, was du willst.

Sehr simpel ist folgendes:

<div name = "menu1" onMouseOver = "document.all.sub1.style.display='';" onMouseOut = "document.all.sub1.style.display='none';">
<b>Menu1</b>
<div name = "sub1" id = "sub1" class = "sub">
Sub1
</div>
</div>


<div name = "menu1" onMouseOver = "document.all.sub2.style.display='';" onMouseOut = "document.all.sub2.style.display='none';">
<b>Menu2</b>
<div name = "sub2" id = "sub2" style = "display:none;">
Sub2
</div>
</div>

<div name = "menu1" onMouseOver = "document.all.sub3.style.display='';" onMouseOut = "document.all.sub3.style.display='none';">
<b>Menu3</b>
<div name = "sub3" id = "sub3" style = "display:none;">
Sub3<br />
Sub3<br />
Sub3<br />
</div>
</div>



Ist natürlich noch total unkonform. Die Attribute solltest du noch als CSS auslagern, außerdem ist meines Wissens document.all nicht mehr erwünscht.
Mit IE und FF funzt es so aber ohne weiteres.

Die Sub- Menüs brauchen bei dieser Methode name und id- Attribut, weil der IE bei document.all nur letzteres, der FF nur ersteres berücksichtigt. Wie gesagt: Ugly ;)

Hier mal zum direkt- betrachten: http://xn--ngel-5qa.de/submenu.htm

fish fish am 19.03.07 09:17

danke, ich probiers mal aus.

fish fish am 19.03.07 20:53

hmm ich soll das ganze standardkonkorm machen ... geht das irgentwie?

Barabbas Barabbas am 19.03.07 21:39

müsste reichen, wenn du document.all durch document.getelementbyid bzw. getelementbyname ersetzt (entsprechend mit name / id als parameter).

fish fish am 19.03.07 22:45

thx

fish fish am 22.03.07 21:16

argh ich brings nicht ganz hin...
ich habe sowas: <div id="main_menue">
<ul>
<li class="main_menue_active"><a href="#">Startseite</a></li>
<li><a href="#" title="Unsere Community ist toll!">Community</a></li>
<li><a href="#" title="lern poker. jetzt!">Poker lernen</a></li>
<li><a href="#" title="Unsere pokerwelt">Pokerwelt</a></li>
<li><a href="#" title="lass dich beschenken">Pokergeschenke</a></li>
<li><a href="#" title="spiel in turnieren mit und werde millionär">Turniere</a></li>
<li><a href="#" title="lern poker. jetzt!">Poker lernen</a></li>
<li id="last"><a href="#" title="Jag die Boni. JETZT!">Bonusjagd</a></li>
</ul>
</div>
<div id="sub_menue">
<ul>
<li><a href="#" title="Sehr kurze Beschreibung für Subnavilink">Subnavilink</a></li>
<li><a href="#" title="Sehr kurze Beschreibung für Subnavitext">Subnavitext</a></li>
<li><a href="#" title="Sehr kurze Beschreibung für Usw">usw.</a></li>
</ul>
</div>


wie genau mache ich das jetzt, wo genau muss ich die ids hier setzen.. kann ich das auch mit class machen?

der_nic der_nic am 22.03.07 21:31

nur eine kleine Frage:
wieso machst du das nicht mit CSS?

fish fish am 22.03.07 22:03

weil ich mir nicht vorstellen kann wie das gehen soll. kannst du es mir erklären?

der_nic der_nic am 22.03.07 22:37

also wenn du nur willst, dass das Submenu geöffnet wird beim Drüberfahren mit der Maus kann man das auch mit CSS realisieren....

hier mal ein kleines Beispiel für dich:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Submenu mit CSS</title>
<style type="text/css">
/* Damit's schön aussieht ;) */
body {
font-family:"Courier New", Courier, monospace;
}
h1 {
color:#fff;
background-color:#993399;
padding:2px;
}

/* Submenu */
ul#topmenu {
margin:0;
padding:0 0 0 2px;
list-style:none;
width:200px;
border:1px dotted #993399;
}
ul#topmenu li strong {
cursor:pointer;
}
ul#topmenu li ul {
display:none;
}
ul#topmenu li:hover ul {
display:block;
}
ul.submenu {
margin:0 0 0 2px;
padding:0;
list-style:none;
}
</style>
</head>

<body>
<h1>Submenu mit CSS</h1>
<ul id="topmenu">
<li>
<strong>Topkategorie 1</strong>
<ul class="submenu">
<li>Sumenu 1.1</li>
<li>Sumenu 1.2</li>
<li>Sumenu 1.3</li>
</ul>
</li>
<li>
<strong>Topkategorie 2</strong>
<ul class="submenu">
<li>Sumenu 2.1</li>
<li>Sumenu 2.2</li>
<li>Sumenu 2.3</li>
</ul>
</li>
<li>
<strong>Topkategorie 3</strong>
<ul class="submenu">
<li>Sumenu 3.1</li>
<li>Sumenu 3.2</li>
<li>Sumenu 3.3</li>
</ul>
</li>
</ul>

</body>
</html>


der Trick dabei ist das [COLOR=blue]:hover[/COLOR]...;)

fish fish am 22.03.07 22:49

danke, klasse idee...

aber ein horizontales menü geht damit nicht, oder? also sowas:

der_nic der_nic am 22.03.07 22:51

doch geht auch;)

... gib mir 5min

//edit:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Menu horizontal</title>
<style type="text/css">
body {
font-family:"Courier New", Courier, monospace;
}
h1 {
color:#fff;
background-color:#993399;
padding:2px;
}
ul#topmenu {
margin:0;
padding:0;
list-style:none;
}
ul#topmenu li {
float:left;
padding:5px;
width:160px;
margin:0 5px;
border:1px dotted #993399;
position:relative;
}
ul#topmenu li strong {
cursor:pointer;
}
ul#topmenu li#top1 ul {
margin:0;
padding:0;
list-style:none;
position:absolute;
left:-10px;
top:30px;
width:600px;
}
ul#topmenu li#top2 ul {
margin:0;
padding:0;
list-style:none;
position:absolute;
left:-192px;
top:30px;
width:600px;
}
ul#topmenu li#top3 ul {
margin:0;
padding:0;
list-style:none;
position:absolute;
left:-374px;
top:30px;
width:600px;
}
ul#topmenu li#top3 {
float:none;
}
ul#topmenu li ul li {
border:none;
display:inline;
}



ul#topmenu li ul {
display:none;
}
ul#topmenu li:hover ul {
display:block;
}
</style>
</head>

<body>
<h1>CSS Menu horizontal</h1>
<ul id="topmenu">
<li id="top1"><strong>Topmenu 1</strong>
<ul>
<li>Submenu 1.1</li>
<li>Submenu 1.2</li>
<li>Submenu 1.3</li>
</ul>
</li>
<li id="top2"><strong>Topmenu 2</strong>
<ul>
<li>Submenu 2.1</li>
<li>Submenu 2.2</li>
<li>Submenu 2.3</li>
</ul>
</li>
<li id="top3"><strong>Topmenu 3</strong>
<ul>
<li>Submenu 3.1</li>
<li>Submenu 3.2</li>
<li>Submenu 3.3</li>
</ul>
</li>
</ul>
</body>
</html>

fish fish am 22.03.07 23:04

okay, danke!

der_nic der_nic am 22.03.07 23:18

siehe oben... geht in diesem Fall halt nicht mehr so schön dynamisch, du musst die Breiten anpassen usw. aber es geht :)

fish fish am 23.03.07 18:32

so, habe versucht es einzubauen, aber esfunktioniert einfach nicht, so wie du es gemacht hast.
http://www.beta.bierquartier.de/html_testcenter/menue_1
was mache ich falsch?

der_nic der_nic am 23.03.07 20:57

geht doch... nur hast du halt nur 1 Submenu? oder was funktioniert denn nicht?

fish fish am 23.03.07 21:01

also das problem: das submenü lässt sich nicht richtig formatieren so wie ich das will.

und dann habe ich da noch das problem, dass man sehrschnell von oben nach unten springen muss, um die links im submenü zu"erwischen" weil es wieder zuklappt

Rene Rene am 23.03.07 21:03

wenn man mit dem Mauszeiger zwischen den Zellen von Mainmenu und Submenu ist, verschwindet das Submenu. Also wenn man z. B. langsam mit dem Mauszeiger runtergeht. Liegt wohl an den Border-Einstellungen, vermute ich.

edit: too slow ^^

der_nic der_nic am 23.03.07 21:06

das Zuklapp-Problem liegt daran dass du eben kein Border gesetzt hast sondern mit margin einen Abstand erzeugst durch den die Hintergrundfarbe durchscheint. Sobald die Maus über dem margin ist geht das Menu zu. Also mach den margin weg und setzt dafür den border an der Stelle.

Und was genau lässt sich nicht formatieren? Grösse? Breite?

fish fish am 23.03.07 21:16

also damit
div#main_menue ul li#pokerwelt:hover ul.sub_menue ul li {
list-style-type: none;
float: left;
}

ul.sub_menue ul li a {
color: #fff;
text-decoration: none;
display: block;
line-height: 33px;
padding: 0 30px;
vertical-align: middle;
background: none;
}


versuche ich die listenpunkte des untermenüs zu formatieren. klappt aber nicht, weil stattdessen das von den punken im hauptmenü übernommen wird. das hat bestimmt was mit vererbung zu tun aber ich weiss leider nicht genau warums nicht so klappt wie ich will

fish fish am 23.03.07 22:47

so, ich habs jetzt hinbekommen...
danke nochmal dass ihr mir geholfen habt ..

fish fish am 02.04.07 16:58

hallo. irgentwie scheint das submenü in ff1 und safari nicht zu funktionieren... woran liegt das?

der_nic der_nic am 17.04.07 20:55

evtl. solltest du dir das mal anschauen?
http://alistapart.com/articles/hybrid

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt