Menü hover / active

toto1982

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;
        }

Alles anzeigen

der eingebundene Part in der Index lautet:

PHP

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

Alles anzeigen

Könnt ihr mir helfen?

... und so siehts aus: http://www.stephanrohling.com/joomla/

SinnlosS

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.

explanator

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

toto1982

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

so vielleicht?

Code

#main-navigation .current { background: #999999;}

explanator

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.

toto1982

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

aber auch dein Befehl geht nicht ....

SinnlosS

Das gehört auch nicht auf das li-Tag, sondern auf das a-Tag:

Code

[COLOR=#333333]#main-navigation .menu li.active > a {
  background:#999;
}

[/COLOR]

explanator

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

SinnlosS

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.

toto1982

ja ne is klar!

DANKE!!!!!!!!

toto1982

Noch was:
wäre es möglich, - und wenn wie - für alle Menüpunkte im horizontalen Hauptmenü einen Bilderwechsel bei Klick auf einen Menüpunkte im Header zu veranlassen. Sprich, dass wenn man im Menüpunkt "Home" surft, headergrafik-01 angezeigt wird, wenn man unter dem Menüpunkt "Über uns" surft, Grafik headergrafik-02 im Header angezeigt wird, und so weiter???
wenn ja, Tipps? Hilfen? Danke

explanator

Du hast das CMS Joomla. Auch wenn ich keine Ahnung von Joomla habe, bin ich mir ziemlich sicher, dass das möglich ist. Aber da musst du dich näher mit Joomla beschäftigen, da ja CMS dafür vorgesehen sind diese Dinge zu vereinfachen.
Im Zweifel musst du halt mal im Joomla-Forum nachfragen, wenn die Hilfe dich da nicht weiterbringt

Siehe auch http://www.psd-tutorials.de/forum/205_joom…adergrafik.html.

toto1982

Danke! Habs hinbekommen!

Tags