Dropdown Menü - Anfänger

tr_1103 · 14. Mai 2010

Hallo Zusammen,
hab ein dummes Problem. Ich blicks einfach gerade nicht...

Ich will ein einfaches Dropdown menü.
Das Problem ist das ich nicht weiß wie ich mein CSS Code ändere das es passt und so aussieht wie davor.

um diese Seite geht es: www.timresl.de/sites/tc-neuenhaus.de

Ich hab einfach mal die Dateien zusammengepackt und hier könnt ihr die rar datei runterladen: http://timresl.de/tc-neuenhaus.de.rar

Ich will einfach nur das ein mini kleiner Dropdown entsteht mit hintergrundfarbe eigentlich ganz leicht aber ich bin ein totaler noob in sachen Javascript. wär hammer wenn mir jemand nur kurz helfen kann.. Ich denke für euch ist das pipifax.

Vielen Dank.
Falls ihr es mir i.wie zukommen lassen wollt hier meine mail adresse. t i m . r e s l @ web.de

Falls ihr mir tipps im Forum gibt ich nehm alles an. Dankeschön

kkapsner · 14. Mai 2010

Ich verstehe nicht was du willst.

Auf der Seite ist einfach nur ein hover-Menü mit falscher Positionieren des Untermenüs - das hast aber nichts mit JS zu tun...

dkdenz · 14. Mai 2010

Ich weiß nicht wie Du da auf Javascript kommst,
denn es ist ein reines CSS-Problem,
deswegen verschiebe ich Dich in's dazu passende Subforum.

dkdenz · 14. Mai 2010

http://www.htmldog.com/articles/suckerfish/dropdowns/

anna55 · 14. Mai 2010

Code:

#templatemo_menu #navigation li ul {
	display:none;	
	position:absolute;
	[COLOR="red"]top:4em;
	left:0em;[/COLOR]
	margin:0;
	padding:0;
}

Damit die Unterpunkte angezeigt bleiben, müsstest du nur die Angaben in Rot übernehmen. Was meinst du mit 'Hintergrundfarbe'?

anna55 · 17. Mai 2010

Wenn du den Hintergrund der Dropdown-Menüpunkte ändern willst, musst du die Grafiken ändern oder rausnehmen. Ich hab dir mal ein Beispiel ohne Grafiken mit ner Hintergrundfarbe gebastelt:

Code:

#templatemo_menu  li.current a, #templatemo_menu  li a:hover{
	color: #fff;
	text-decoration: none;
	[COLOR="red"]background: #CA6F1F;[/COLOR] 
}
#templatemo_menu  li.current a b, #templatemo_menu li a:hover b{
	color: #fff;
	padding-top: 0px;
	text-decoration: none;
	[COLOR="red"]background: #CA6F1F; [/COLOR]
}

Edit: ..oder aber du lässt die bisherigen CSS-Angaben drin, damit die Grafiken bleiben und setzt zusätzlich für die Untermenüs ein:

Code:

#templatemo_menu ul li.current ul li a, #templatemo_menu ul li a:hover ul li{
	color: #fff;
	text-decoration: none;
	background: #C5651A; 
        margin-left:2px;

}
#templatemo_menu ul li.current  ul li a b, #templatemo_menu ul li ul li a:hover b{
	color: #fff;
	padding-top: 0px;
	text-decoration: none;
	background: #C5651A;
        width:100px;
        text-align:left;
}

tr_1103 · 17. Mai 2010

Dankeschön das hat mich jetzt zum glück ein wenig weiter gebracht.

Bei Home funkt es jetzt so wie ich will. aber bei den anderen ja nicht mehr weil immer das as aktiv ist, ist mit class current gezeichnet. Wie setz ich das jetzt auch ein das es bei den nicht current klassen mit dropdown funktioniert?!

Code:

/* menu */
#templatemo_menu {
	clear: both;
	position: relative;
	width: 920px;
	margin: 0 20px;
	height: 45px;
	background: url(images/templatemo_menu_bg.jpg) right no-repeat;
}

#templatemo_menu span {
	position: absolute;
	top: 0;
	left: 0;
	width: 5px;
	height: 45px;
	background: url(images/templatemo_menu_bg_left.jpg) no-repeat;
}

#templatemo_menu ul{
	padding: 0 0 0 10px;
	margin: 0 auto;
	height: 45px;
	list-style: none;
}

#templatemo_menu ul li{
	float:left;
	padding-right: 5px;
	position:relative;
}

#templatemo_menu li a{
	float: left;
	display: block;
	color: #000;
	font-size: 12px;
	height: 45px;
	line-height: 45px;
	text-align: center;
	 padding: 0px 0 0 8px;	
}
#templatemo_menu  li a b{
	float: left;
	display: block;
	padding: 4px 24px 0 16px;
}
#templatemo_menu  li.current a, #templatemo_menu  li a:hover{
	color: #fff;
	text-decoration: none;
	background: url(images/menu_hover_bg_left.jpg) left top no-repeat; 
}
#templatemo_menu  li.current a b, #templatemo_menu li a:hover b{
	color: #fff;
	padding-top: 0px;
	text-decoration: none;
	background: url(images/menu_hover_bg.jpg) right top no-repeat;
}

/* menu dropdown customizations*/
#templatemo_menu ul li{
	position:relative;

}

#templatemo_menu #navigation li ul {
	display:none;	
	position:absolute;
	top:4em;
	left:0em;
	margin:0;
	padding:0;
	

}


#templatemo_menu #navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */

}

#templatemo_menu #navigation li ul li {
	display:block;
	float:none;
	margin-bottom:0.2em;

}



#templatemo_menu ul li.current ul li a, #templatemo_menu ul li a:hover ul li{
	color: #fff;
	text-decoration: none;
	background: #C5651A; 
        margin-left:2px;
		 
		 border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-color: #fff;
	border-right-color: #fff;
	border-bottom-color: #fff;
	border-left-color: #fff;
	 height: 40px;

}
#templatemo_menu ul li.current  ul li a b, #templatemo_menu ul li ul li a:hover b{
	color: #fff;
	padding-top: 0px;
	text-decoration: none;
	background: #C5651A;
    width:100px;
    text-align:left;
   
    height: 40px;
}

/* end menu dropdown customizations*/


/* end of menu */

Code:

    <div id="templatemo_menu">
    	<span></span>
    	
    	
    	
        <ul id="navigation">
            <li class="current"><a href="index.html"><b>Home</b></a>
            	<ul ><li><a href="index.html"><b>Test1</b></a></li> <li><a href="index.html"><b>Test2</b></a></li><li><a href="index.html"><b>Test2</b></a></li></ul>
            </li>
            
            <li ><a href="index.html"><b>Verein</b></a>
            <ul >
            		<li><a href="index.html"><b>Test1</b></a></li>
            		<li><a href="index.html"><b>Test2</b></a></li>
             <li><a href="index.html"><b>Test2</b></a></li>
              </ul>
            </li>
            <li><a href="#"><b>Mannschaften</b></a></li>
            <li><a href="#"><b>Termine</b></a></li>
            <li><a href="#"><b>Presse</b></a></li>
            <li><a href="#"><b>Bildportal</b></a></li>
            <li><a href="#"><b>Interaktiv</b></a></li>
        </ul>

  </div> <!-- end of menu -->

So sieht es momentan aus: www.timresl.de/sites/tc-neuenhaus.de

Vielen Herzlichen Dank

anna55 · 17. Mai 2010

Du nimmst noch ne Anweisung für die nicht aktiven Menüpunkte dazu - jeweils rot:

Code:

#templatemo_menu  li.current a, #templatemo_menu  li a:hover, [COLOR="red"]#templatemo_menu ul li:hover a[/COLOR]{
	color: #fff;
	text-decoration: none;
	background: url(images/menu_hover_bg_left.jpg) left top no-repeat; 
}
#templatemo_menu  li.current a b, #templatemo_menu li a:hover b, [COLOR="red"]#templatemo_menu ul li:hover a b[/COLOR]{
	color: #fff;
	padding-top: 0px;
	text-decoration: none;
	background: url(images/menu_hover_bg.jpg) right top no-repeat;
}

#templatemo_menu ul li.current ul li a, #templatemo_menu ul li a:hover ul li, [COLOR="red"]#templatemo_menu ul li:hover ul li a[/COLOR]{
	color: #fff;
	text-decoration: none;
	background: #C5651A; 
        margin-left:2px;		 
        border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-color: #fff;
	border-right-color: #fff;
	border-bottom-color: #fff;
	border-left-color: #fff;
	height: 40px;
}
#templatemo_menu ul li.current  ul li a b, #templatemo_menu ul li ul li a:hover b, [COLOR="red"]#templatemo_menu ul li:hover ul li a b[/COLOR]{
	color: #fff;
	padding-top: 0px;
	text-decoration: none;
	background: #C5651A;
        width:100px;
        text-align:left;   
        height: 40px;
}

tr_1103 · 18. Mai 2010

Vielen Dank!!!

tr_1103 · 18. Mai 2010

bekommt man jetzt noch hin das es Pro Hover über die dropdownmenüs eine andere HG Farbe zuordnen.

Wenn ich über Test fahre soll es z.B.: roter werder?! geht das?

anna55 · 18. Mai 2010

Zusätzlich einfügen:

Code:

#templatemo_menu ul li:hover ul li a:hover, #templatemo_menu ul li:hover ul li a b:hover{
background:red;
}

Setzt die Farbe ein, die dir zusagt.

BTW Hast du versucht herauszufinden, warum wann welche Aktion passiert?

tr_1103 · 18. Mai 2010

warum kann ich im IE nicht Test 3 auswählen.. Ausserdem sind die kästen ziehmlich weit auseinander... im Firefox passt alles :-()

anna55 · 18. Mai 2010

Nun, Test 3 kannst du nicht auswählen, der steht gar nicht im Markup. (Du hast Test 2 doppelt reingeschrieben.)

Ok, der IE 7 zickt in der Tat rum. Hatte den Test nur im Fx gemacht und jetzt gesehen, dass auch Opera und der IE 8 zufrieden sind. Den 7er bekommst du ebenfalls auf Linie, indem du die jeweils rot markierten Attribute rausnimmst.

Code:

#templatemo_menu ul{
	padding: 0 0 0 10px;
	margin: 0 auto;
	[COLOR="red"]height: 45px;[/COLOR]
	list-style: none;
}
#templatemo_menu #navigation li ul li {
	display:block;
	float:none;
	[COLOR="red"]margin-bottom:0.2em;[/COLOR]
}

tr_1103 · 19. Mai 2010

Super. aber siehst du wenn du im IE von Verein auf auf Home gehst das dann des dropdown wie eine Treppe aussieht? von was kommt das?

Kann man das auch ändern?
Vielen Dank

anna55 · 19. Mai 2010

Man sieht diese Treppe nur, wenn man vom Punkt Verein direkt nach links zu Home geht, ist aber trotzdem nicht schön.
Hier steht bisher nur eine Anweisung, die beiden in Rot noch dazunehmen.

Code:

#templatemo_menu #navigation li ul li[COLOR="red"], #templatemo_menu ul li.current ul li a, #templatemo_menu ul li:hover ul li a b[/COLOR]{
	display:block;
	float:none;
}

Meinst du, wir bekommen das noch vor Pfingsten fertig?

Dropdown Menü - Anfänger

tr_1103

New member

kkapsner

Super Moderator

dkdenz

New member

dkdenz

New member

anna55

Moderator

anna55

Moderator

tr_1103

New member

anna55

Moderator

tr_1103

New member

tr_1103

New member

anna55

Moderator

tr_1103

New member

anna55

Moderator

tr_1103

New member

anna55

Moderator