Ergebnis 1 bis 15 von 15
Thema: Dropdown Menü - Anfänger
-
14-05-2010, 20:39 #1
Grünschnabel
- registriert
- 14-05-2010
- Beiträge
- 6
Dropdown Menü - Anfänger
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
-
14-05-2010, 21:06 #2
AW: Dropdown Menü - Anfänger
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...
-
14-05-2010, 21:07 #3
AW: Dropdown Menü - Anfänger
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.
-
14-05-2010, 21:42 #4
AW: Dropdown Menü - Anfänger
-
14-05-2010, 23:39 #5
AW: Dropdown Menü - Anfänger
Code:#templatemo_menu #navigation li ul { display:none; position:absolute; top:4em; left:0em; margin:0; padding:0; }
.:Taunusstein - Nachrichten und Kommentare
"Ich bin doch lieber jeden Tag glücklich als im Recht."
(Per Anhalter durch die Galaxis)
-
17-05-2010, 15:04 #6
AW: Dropdown Menü - Anfänger
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; background: #CA6F1F; } #templatemo_menu li.current a b, #templatemo_menu li a:hover b{ color: #fff; padding-top: 0px; text-decoration: none; background: #CA6F1F; }
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; }
Geändert von anna55 (17-05-2010 um 16:46 Uhr)
.:Taunusstein - Nachrichten und Kommentare
"Ich bin doch lieber jeden Tag glücklich als im Recht."
(Per Anhalter durch die Galaxis)
-
17-05-2010, 23:19 #7
Grünschnabel
- registriert
- 14-05-2010
- Beiträge
- 6
AW: Dropdown Menü - Anfänger
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
-
18-05-2010, 00:54 #8
AW: Dropdown Menü - Anfänger
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, #templatemo_menu ul li:hover a{ 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, #templatemo_menu ul li:hover a b{ 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, #templatemo_menu ul li:hover ul li a{ 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, #templatemo_menu ul li:hover ul li a b{ color: #fff; padding-top: 0px; text-decoration: none; background: #C5651A; width:100px; text-align:left; height: 40px; }
.:Taunusstein - Nachrichten und Kommentare
"Ich bin doch lieber jeden Tag glücklich als im Recht."
(Per Anhalter durch die Galaxis)
-
18-05-2010, 11:47 #9
Grünschnabel
- registriert
- 14-05-2010
- Beiträge
- 6
AW: Dropdown Menü - Anfänger
Vielen Dank!!!
-
18-05-2010, 12:42 #10
Grünschnabel
- registriert
- 14-05-2010
- Beiträge
- 6
AW: Dropdown Menü - Anfänger
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?
-
18-05-2010, 13:26 #11
AW: Dropdown Menü - Anfänger
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; }
BTW Hast du versucht herauszufinden, warum wann welche Aktion passiert?
.:Taunusstein - Nachrichten und Kommentare
"Ich bin doch lieber jeden Tag glücklich als im Recht."
(Per Anhalter durch die Galaxis)
-
18-05-2010, 19:08 #12
Grünschnabel
- registriert
- 14-05-2010
- Beiträge
- 6
AW: Dropdown Menü - Anfänger
warum kann ich im IE nicht Test 3 auswählen.. Ausserdem sind die kästen ziehmlich weit auseinander... im Firefox passt alles :-()
-
19-05-2010, 00:37 #13
AW: Dropdown Menü - Anfänger
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; height: 45px; list-style: none; } #templatemo_menu #navigation li ul li { display:block; float:none; margin-bottom:0.2em; }
.:Taunusstein - Nachrichten und Kommentare
"Ich bin doch lieber jeden Tag glücklich als im Recht."
(Per Anhalter durch die Galaxis)
-
19-05-2010, 19:03 #14
Grünschnabel
- registriert
- 14-05-2010
- Beiträge
- 6
AW: Dropdown Menü - Anfänger
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
-
19-05-2010, 20:55 #15
AW: Dropdown Menü - Anfänger
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, #templatemo_menu ul li.current ul li a, #templatemo_menu ul li:hover ul li a b{ display:block; float:none; }
.:Taunusstein - Nachrichten und Kommentare
"Ich bin doch lieber jeden Tag glücklich als im Recht."
(Per Anhalter durch die Galaxis)
Ähnliche Themen
-
CSS DropDown Menü evtl. ohne Javascript?
Von besucher80 im Forum CSS und (X)HTMLAntworten: 3Letzter Beitrag: 06-05-2010, 19:40 -
Änderung von Valuewerten via Dropdown Menü
Von SkunKz im Forum JavaScriptAntworten: 2Letzter Beitrag: 20-07-2009, 14:05 -
Textfeld mit DropDown Menü
Von jsrookie im Forum JavaScriptAntworten: 1Letzter Beitrag: 09-03-2009, 01:05 -
Dropdown Menü Positionierung (mit Firefox)
Von TVTotal im Forum JavaScriptAntworten: 0Letzter Beitrag: 18-05-2006, 21:07 -
dropdown menü
Von snake14 im Forum JavaScriptAntworten: 10Letzter Beitrag: 26-01-2003, 17:19
Lesezeichen