Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 13

Thema: Menü hover / active

  1. #1
    Youngster
    Registriert seit
    19.08.2013
    Beiträge
    11
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Menü hover / active

    Hallo zusammen. Ich habe eine Homepage basierend auf Joomla 2.5 erstellt. Das Hauptmenü liegt unter dem Headerbild!

    Ziel ist es, dass wenn man ein Menüpunkt anklickt, der Hintergrund eine andere Farbe erhält.

    Ist active da nicht der richtige Befehl? Unter hover funktioniert es.

    Meine css sieht so aus:

    Code:
    /* ************************** Hauptmenü ************************
    *****************************************************************/
    
    #main-navigation .menu{
            list-style-type: none;
            width: 1000px;
            background: #66665E;
            }
    
    #main-navigation .menu li a{
            width: 124px;
            height: 42px;
            display: block;
            float:left;
    
            font-family: Arial, Helvetica, sans-serif;
            font-size: 13px;
            font-weight: 400;
            line-height: 42px;
            text-align:center;
            color: #FFFFFF;
            text-decoration: none;
            border-right: none;
            border-left: none;
            }
    
    #main-navigation .menu li:first-child a{
            border-left: none;
            width: 128px;
            }
    
    #main-navigation .menu li:last-child a{
            border-right: none;
            width: 128px;
            }
    
    #main-navigation .menu li a:hover{
            text-decoration: underline;
            background: #999999;
            }
    
    #main-navigation .menu li a:active{
            background: #999999;
            }

    der eingebundene Part in der Index lautet:

    PHP-Code:
    <div id="wrapper">
            <
    header id="main-header">

            <
    div id="headerbild">

            </
    div>

                    <
    nav id="main-navigation">

                                    <
    jdoc:include type="modules" name="top-navigation" style="xhtml" />
                </
    nav>


            </
    header

    Könnt ihr mir helfen?

    ... und so siehts aus: http://www.stephanrohling.com/joomla/
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von toto1982 (20.08.2013 um 12:18 Uhr)

  2. #2
    Großmeister(in)
    Registriert seit
    09.12.2008
    Ort
    Berlin
    Alter
    38
    Beiträge
    666
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard AW: Menü hover / active

    Erstmal hast du ja für active und hover die gleiche Hintergrundfarbe, da kann sich also nichts ändern.
    Meinst du mit active vielleicht den Menupunkt auf dem man sich gerade befindet?
    Der CSS-State :active bezeichnet nur den Zustand wenn der Mauszeiger sich auf dem Link befindet und die linke Maustaste gedrückt ist. Er hat nichts damit zu tun, ob der Link zufällig zu dem Menupunkt gehört auf dem man sich gerade befindet. Da musst du eine eigene Klasse für vergeben und dieser die gewünschten Definitionen zuweisen.
    "Programming today is a race between software engineers
    striving to build bigger and better idiot-proof programs,
    and the universe trying to build bigger and better idiots.
    So far, the universe is winning."
    Rick Cook

  3. #3
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Menü hover / active

    Wie SinnlosS schon schrieb, eine Klasse. Und, weil Joomla sowas schon eingebaut hat must du nur die Klasse active entsprechend anpassen.

    Code:
    <li class="item-496 current active parent">

  4. #4
    Youngster
    Themenstarter

    Registriert seit
    19.08.2013
    Beiträge
    11
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Menü hover / active

    Danke, erstmal.

    Ich stehe jetzt nur auf dem Schlauch weil ich nicht genau weiss, wo ich was verändern muss!?

    Ich kann styles lesen und mir meinen Teil denken aber selber schreiben ist so ein Problem. Meine Arbeit besteht daraus strg + C und strg + v und entsprechende, mir bekannte Änderungen zu erledigen. Dann hörts aber auf.

    Wär jemand so nett und könnte mir detaillierter helfen?

    Danke

    - - - Aktualisiert - - -



    - - - Aktualisiert - - -

    so vielleicht?
    Code:
    #main-navigation .current { background: #999999;}
    Geändert von toto1982 (20.08.2013 um 15:32 Uhr)

  5. #5
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Menü hover / active

    Füge ins CSS an passender Stelle diesen Code ein:
    Code:
    #main-navigation .menu li.active {
        background-color: rgb(153, 153, 153);
    }
    Wenn du öfter solche Änderungen machen willst, empfiehlt es sich die Hilfe bei Joomla durchzulesen und CSS und Html zumindest im Zusammenhang zu verstehen.
    Es ist nicht nötig CSS auswendig zu können, dafür gibt es Referenzen, wo man das dann nachlesen kann, aber das Prinzip zu verstehen ist schon hilfreich.

  6. #6
    Youngster
    Themenstarter

    Registriert seit
    19.08.2013
    Beiträge
    11
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Menü hover / active

    Ich habe eben schon alle mir erdenklichen Codes durchprobiert .....

    aber auch dein Befehl geht nicht ....
    Geändert von toto1982 (20.08.2013 um 16:20 Uhr)

  7. #7
    Großmeister(in)
    Registriert seit
    09.12.2008
    Ort
    Berlin
    Alter
    38
    Beiträge
    666
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard AW: Menü hover / active

    Das gehört auch nicht auf das li-Tag, sondern auf das a-Tag:
    Code:
    #main-navigation .menu li.active > a {
      background:#999;
    }
    "Programming today is a race between software engineers
    striving to build bigger and better idiot-proof programs,
    and the universe trying to build bigger and better idiots.
    So far, the universe is winning."
    Rick Cook

  8. #8
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Menü hover / active

    Danke für die korrektur, ist mir beim kopieren glatt durchgerutscht.

  9. #9
    Großmeister(in)
    Registriert seit
    09.12.2008
    Ort
    Berlin
    Alter
    38
    Beiträge
    666
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard AW: Menü hover / active

    Musste selber 2x hinschauen, aber dann über Chrome-Devtools gesehen, dass das li kein display:inline-block, sondern display:list-item und height:0 hat.
    "Programming today is a race between software engineers
    striving to build bigger and better idiot-proof programs,
    and the universe trying to build bigger and better idiots.
    So far, the universe is winning."
    Rick Cook

  10. #10
    Youngster
    Themenstarter

    Registriert seit
    19.08.2013
    Beiträge
    11
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Menü hover / active

    ja ne is klar!

    DANKE!!!!!!!!

Ähnliche Themen

  1. Button bei hover,active gedrückt aussehend halten
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 06.06.2010, 22:07
  2. Problem mit Linkzuweisungen a:link, visited, hover active
    Von reeperbahner11 im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 10.06.2009, 08:38
  3. Bei class="active" kein Hover-Effekt: wie?
    Von Mütze im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 26.08.2008, 09:37
  4. Hover-Effekt bei "active"-Schaltfläche deaktiviere
    Von Mütze im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 31.03.2008, 12:49
  5. hover menü
    Von nessi im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 09.10.2006, 09:07

Stichworte

Berechtigungen

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