Webstatt.org - Community seit 2006 - 2012 (2024?)

hover-submenü

Avatar user-180
18.03.2007 21: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?)
may the force be with you. but mostly with me.
Avatar user-124
19.03.2007 00: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 zwinkern

Hier mal zum direkt- betrachten: http://xn--ngel-5qa.de/submenu.htm
Avatar user-180
19.03.2007 08:17
danke, ich probiers mal aus.
may the force be with you. but mostly with me.
Avatar user-180
19.03.2007 19:53
hmm ich soll das ganze standardkonkorm machen ... geht das irgentwie?
may the force be with you. but mostly with me.
Avatar user-124
19.03.2007 20:39
müsste reichen, wenn du document.all durch document.getelementbyid bzw. getelementbyname ersetzt (entsprechend mit name / id als parameter).
Avatar user-180
19.03.2007 21:45
thx
may the force be with you. but mostly with me.
Avatar user-180
22.03.2007 20: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?
may the force be with you. but mostly with me.
Avatar user-162
22.03.2007 20:31
nur eine kleine Frage:
wieso machst du das nicht mit CSS?
Perfection is not when there’s nothing to add, but when there’s nothing to take away swisscheek.com/magazine
Avatar user-180
22.03.2007 21:03
weil ich mir nicht vorstellen kann wie das gehen soll. kannst du es mir erklären?
may the force be with you. but mostly with me.
Avatar user-162
22.03.2007 21: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 zwinkern */

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 :hover...zwinkern
Perfection is not when there’s nothing to add, but when there’s nothing to take away swisscheek.com/magazine
Avatar user-180
22.03.2007 21:49
danke, klasse idee...

aber ein horizontales menü geht damit nicht, oder? also sowas:
may the force be with you. but mostly with me.
Avatar user-162
22.03.2007 21:51
doch geht auchzwinkern

... 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>
Perfection is not when there’s nothing to add, but when there’s nothing to take away swisscheek.com/magazine
Avatar user-180
22.03.2007 22:04
okay, danke!
may the force be with you. but mostly with me.
Avatar user-162
22.03.2007 22:18
siehe oben... geht in diesem Fall halt nicht mehr so schön dynamisch, du musst die Breiten anpassen usw. aber es geht lächeln
Perfection is not when there’s nothing to add, but when there’s nothing to take away swisscheek.com/magazine
Avatar user-180
23.03.2007 17: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?
may the force be with you. but mostly with me.
Avatar user-162
23.03.2007 19:57
geht doch... nur hast du halt nur 1 Submenu? oder was funktioniert denn nicht?
Perfection is not when there’s nothing to add, but when there’s nothing to take away swisscheek.com/magazine
Avatar user-180
23.03.2007 20: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
may the force be with you. but mostly with me.
Avatar user-290
23.03.2007 20: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 ^^
Avatar user-162
23.03.2007 20: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?
Perfection is not when there’s nothing to add, but when there’s nothing to take away swisscheek.com/magazine
Avatar user-180
23.03.2007 20: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
may the force be with you. but mostly with me.
Avatar user-180
23.03.2007 21:47
so, ich habs jetzt hinbekommen...
danke nochmal dass ihr mir geholfen habt ..
may the force be with you. but mostly with me.
Avatar user-180
02.04.2007 14:58
hallo. irgentwie scheint das submenü in ff1 und safari nicht zu funktionieren... woran liegt das?
may the force be with you. but mostly with me.
Avatar user-162
17.04.2007 18:55
evtl. solltest du dir das mal anschauen?
http://alistapart.com/articles/hybrid
Perfection is not when there’s nothing to add, but when there’s nothing to take away swisscheek.com/magazine