Ergebnis 1 bis 15 von 15
  1. #1
    tr_1103 ist offline 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

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.661

    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...

  3. #3
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    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.

  4. #4
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

  5. #5
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: Dropdown Menü - Anfänger

    Code:
    #templatemo_menu #navigation li ul {
    	display:none;	
    	position:absolute;
    	top:4em;
    	left:0em;
    	margin:0;
    	padding:0;
    }
    Damit die Unterpunkte angezeigt bleiben, müsstest du nur die Angaben in Rot übernehmen. Was meinst du mit 'Hintergrundfarbe'?


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  6. #6
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    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; 
    }
    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;
    }
    Geändert von anna55 (17-05-2010 um 15:46 Uhr)


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  7. #7
    tr_1103 ist offline 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

  8. #8
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    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)

  9. #9
    tr_1103 ist offline Grünschnabel
    registriert
    14-05-2010
    Beiträge
    6

    AW: Dropdown Menü - Anfänger

    Vielen Dank!!!

  10. #10
    tr_1103 ist offline 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?

  11. #11
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    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;
    }
    Setzt die Farbe ein, die dir zusagt.

    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)

  12. #12
    tr_1103 ist offline 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 :-()

  13. #13
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    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)

  14. #14
    tr_1103 ist offline 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

  15. #15
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    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;
    }
    Meinst du, wir bekommen das noch vor Pfingsten fertig?


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

Ähnliche Themen

  1. CSS DropDown Menü evtl. ohne Javascript?
    Von besucher80 im Forum CSS und (X)HTML
    Antworten: 3
    Letzter Beitrag: 06-05-2010, 18:40
  2. Änderung von Valuewerten via Dropdown Menü
    Von SkunKz im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 20-07-2009, 13:05
  3. Textfeld mit DropDown Menü
    Von jsrookie im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 09-03-2009, 00:05
  4. Dropdown Menü Positionierung (mit Firefox)
    Von TVTotal im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 18-05-2006, 20:07
  5. dropdown menü
    Von snake14 im Forum JavaScript
    Antworten: 10
    Letzter Beitrag: 26-01-2003, 16:19

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •