Willkommen in der Webstatt
User-1 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?
User-2 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

User-1 am 19.03.07 09:17

danke, ich probiers mal aus.

User-1 am 19.03.07 20:53

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

User-2 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).

User-1 am 19.03.07 22:45

thx

User-1 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?

User-3 am 22.03.07 21:31

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

User-1 am 22.03.07 22:03

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

User-3 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]...;)

User-1 am 22.03.07 22:49

danke, klasse idee...

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

User-3 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>

User-1 am 22.03.07 23:04

okay, danke!

User-3 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 :)

User-1 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?

User-3 am 23.03.07 20:57

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

User-1 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

User-4 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 ^^

User-3 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?

User-1 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

User-1 am 23.03.07 22:47

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

User-1 am 02.04.07 16:58

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

User-3 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