Zweite Navigation

haya

Guten Abend!

Gleich zu meiner ersten Page-Navigation, habe ich mir eine weitere Navigation weiter unten im Header erlaubt, die aber durch eine Verlinkung funktionieren soll. Diese sieht ungefähr so aus:

PHP

<ul id="nav2">
<li <?php { echo ' class="current-cat" '; } ?>><a href="/abkurzungen/">Abkürzungen</a></li>
<li <?php { echo ' class="current-cat" '; } ?>><a href="/kartenwerte/">Kartenwerte</a></li>
<li <?php { echo ' class="current-cat" '; } ?>><a href="/bannedlist/">Bannedlist</a></li>
<li <?php { echo ' class="current-cat" '; } ?>><a href="/levelliste/">Levelliste</a></li>
<li <?php { echo ' class="current-cat" '; } ?>><a href="">In Arbeit</a></li>
<li <?php { echo ' class="current-cat" '; } ?>><a href="">In Arbeit</a></li>
<li <?php { echo ' class="current-cat" '; } ?>><a href="">In Arbeit</a></li>
</ul>

Diese werden alle auf eine private Seite geschickt, um hervorzugeben. Jedenfalls liegt mein Problem beim hover,der irgendwie in der CSS nicht klappen will. Hier der Code dazu:

PHP

/* NAVIGATION MENUS2 */


#nav2 {
    background:# repeat-x;
    font-size:12px;
    font-family: Arial, Helvetica, sans-serif;
    padding: 9px 16px;
    text-decoration: none;
    font-weight:bold;
    text-transform: uppercase;
    width:100%;
    }
#nav2, #nav2 ul {
    float:left;
    list-style:none;
    line-height:30px;
    padding:0;
    border:1px solid #;
    margin:0;
    width:100%;
    }
#nav2 a {
    display:block;
    color:#dddddd;
    text-decoration:none;
    padding:0px 10px;
    background: url(http://image-collector.de/img/1280018745-n.png) top left repeat-x; 
    }
#nav2 li {
    float:left;
    padding:0;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    -border-radius: 3px;
    }
#nav2 ul {
    position:absolute;
    left:-999em;
    height:auto;
    width:151px;
    font-weight:normal;
    margin:0;
    line-height:1;
    border:0;
    border-top:1px solid #666666;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    -border-radius: 3px;
    }
#nav2 li li {
    width:149px;
    border-bottom:1px solid #666666;
    border-left:1px solid #666666;
    border-right:1px solid #666666;
    font-weight:bold;
    font-family:helvetica,sans-serif;
    }
#nav2 li li a {
    padding:8px 10px;
    width:130px;
    font-size:10px;
    color:#dddddd;
    }
#nav2 li ul ul {
    margin:-29px 0 0 150px;
    }
#nav2 li li:hover {
    background:#501350;
    }
#nav2 li ul li:hover a, #nav2 li ul li li:hover a, #nav2 li ul li li li:hover a, #nav2 li ul li li li:hover a {
    color:#fff;
    }
#nav2 li:hover a, #nav2 li.sfhover a {
    color:#dddddd;
    }
#nav2 li:hover li a, #nav2 li li:hover li a, #nav2 li li li:hover li a, #nav2 li li li li:hover li a {
    color:#dddddd;
    }
#nav2 li:hover ul ul, #nav2 li:hover ul ul ul, #nav2 li:hover ul ul ul ul, #nav2 li.sfhover ul ul, #nav2 li.sfhover ul ul ul, #nav2 li.sfhover ul ul ul ul {
    left:-999em;
    }
#nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li li li:hover ul, #nav2 li li li li:hover ul, #nav2 li.sfhover ul, #nav2 li li.sfhover ul, #nav2 li li li.sfhover ul, #nav2 li li li li.sfhover ul {
    left:auto;
    background: rgba(0, 0, 0, 0.7);
    }
#nav2 li:hover, #nav2 li.sfhover {
    background:#501350;
    }
#nav2 .current_page_parent, #nav2 .current_page_ancestor, #nav2 .current-cat-parent {
    background:#501350;
    }
#nav2 .current-cat, #nav2 .current_page_item {
    background:#501350;
    }
#nav2 .current_page_ancestor a:after, #nav2 .current_page_ancestor li a:after, #nav2 .current_page_ancestor li li a:after, #nav2 .current_page_ancestor li li li a:after, #nav2 .current_page_ancestor li li li li a:after, #nav2 .current-cat-parent a:after, #nav2 .current-cat-parent li a:after, #nav2 .current-cat-parent li li a:after, #nav2 .current-cat-parent li li li a:after, #nav2 .current-cat-parent li li li li a:after, #nav2 .current_page_parent a:after, #nav2 .current_page_parent li a:after, #nav2 .current_page_parent li li a:after, #nav2 .current_page_parent li li li a:after, #nav2 .current_page_parent li li li li a:after {
    content:"";
    }
#nav2 .current_page_ancestor a:after, #nav2 li .current_page_ancestor a:after, #nav2 li li .current_page_ancestor a:after, #nav2 li li li .current_page_ancestor a:after, #nav2 .current-cat-parent a:after, #nav2 li .current-cat-parent a:after, #nav2 li li .current-cat-parent a:after, #nav2 li li li .current-cat-parent a:after, #nav2 .current_page_parent a:after, #nav2 li .current_page_parent a:after, #nav2 li li .current_page_parent a:after, #nav2 li li li .current_page_parent a:after {
    color:#fff;
    content:"";
    }
#nav2 .current-cat a:after, #nav2 li .current-cat a:after, #nav2 li li .current-cat a:after, #nav2 li li li .current-cat a:after, #nav2 li li li li .current-cat a:after, #nav2 .current_page_item a:after, #nav2 li .current_page_item a:after, #nav2 li li .current_page_item a:after, #nav2 li li li .current_page_item a:after, #nav2 li li li li .current_page_item a:after {
    color:#fff;
    content:"";
    }

Alles anzeigen

Das ist im Grunde derselbe Code von der ersten Navigation. Er will mir einfach keinen richtigen hover anzeigen. Er zeigt es zwar an, wie in der ersten Navigation, aber laufend und nicht beim Drübergehen mit der Maus.

Hier noch ein Screenshot, damit ihr wisst, was ich genau meine: http://image-collector.de/img/1280022428-nav.png

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Domino5702

Hallo,

Ich würde die unteren Ebenen mit display: none erst verbergen und per javascript bei onmouseover auf block oder was auch immer wechseln.

LG Domi

haya

Erstmal danke für deine Antwort!

Wie genau stelle ich das an? Meine Stärken sind nicht gerade in CSS oder JavaScript. Und möchte mich jetzt nicht unendlichen Versuchungen unterziehen, bis es klappt... Danke nochmals.

Grüße haya

alchymyth

dein code gibt jeden link mit der class .current-cat aus, die den selben hintergrund hat wie hover.
zB:

PHP

<li <?php { echo ' class="current-cat" '; } ?>><a href="/abkurzungen/">Abkürzungen</a></li>

wenn das nicht sein muss (aus mir unbekannten anderen gruenden), entferne es von den links.

haya

Zitat von alchymyth
dein code gibt jeden link mit der class .current-cat aus, die den selben hintergrund hat wie hover.
zB:
PHP
<li <?php { echo ' class="current-cat" '; } ?>><a href="/abkurzungen/">Abkürzungen</a></li>
wenn das nicht sein muss (aus mir unbekannten anderen gruenden), entferne es von den links.

Super, das hat mir sehr weitergeholfen! Der hover funktioniert zwar jetzt, aber nun habe ich ein weiteres Problem: der hover bleibt nicht, wenn ich die entsprechende Seite besucht habe wie auf der ersten Navigation. Lösungen?

Vielen Dank schonmal!

Marvin_S

Du musst im CSS außerdem die Klasse .current_page_item bzw .current-cat definieren.

Wenn du nun also bei ul li a:hover { background-color:red; } definiert hast , würde der neue code so aussehen:

HTML

ul li a:hover, ul li.current-cat a { background-color:red; }

damit wird der aktive link als auch der hover link gleich formatiert ;)

PS: Ändere den Hover auf den A-Tag. Nicht alle Browser unterstützen den Hover des LI-Elements!

Also ul li a:hover { color:Farbe; } anstatt ul li:hover a oder ul li:hover

haya

Ich habe es immer noch nicht ganz verstanden, tut mir leid... Also, die zweite Navi sieht im header nun so aus:

PHP

<ul id="nav2">
<li> <a href="/abkurzungen/">Abkürzungen</a></li>
<li> <a href="/Album/">Album (in Arbeit)</a></li>
<li> <a href="/Banned/">Banned</a></li>
                    
     </ul>

Und der CSS-Code:

PHP

/* NAVIGATION MENUS2 */


#nav2 {
    background:# repeat-x;
    font-size:12px;
    font-family: Arial, Helvetica, sans-serif;
    padding: 9px 16px;
    text-decoration: none;
    font-weight:bold;
    text-transform: uppercase;
    width:100%;
    }
#nav2, #nav2 ul {
    float:left;
    list-style:none;
    line-height:30px;
    padding:0;
    border:1px solid #;
    margin:0;
    width:100%;
    }
#nav2 a {
    display:block;
    color:#dddddd;
    text-decoration:none;
    padding:0px 10px;
    background: url(/wp-content/themes/Battle-Blog_v2/images/nav-background-hover.png) top left repeat-x;
    }
#nav2 li {
    float:left;
    padding:0;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    -border-radius: 3px;
    }
#nav2 li:hover {
    background:#501350;
    }
#nav2 li:hover ul {
    background: rgba(0, 0, 0, 0.7);
    }
#nav2 li:hover {
    background:#501350;
    }

Alles anzeigen

Wie kriege ich es jetzt hin, dass der hover bei einem Besuch der Seiten angezeigt wird... Er muss diese ja irgendwie erkenenn. Also doch mit echo? :\

Danke nochmals!

Marvin_S

HTML

#nav2 li:hover ul {

FALSCH.

Schau dir die Struktur der Liste an.
Erst kommt der umschließende DIV
Dann der umschließende UL
Dann der LI-Tag, in dem DANN der Link mit A HREF drin ist.

Also

HTML

#nav2 ul li a:hover

Wenn du nun auf einer Seite bist, bekommt das LI - Element eine weitere Klasse:
current_page_item.
Daraus schließend kannst du sagen, dass:

HTML

#nav2 ul li.current_page_item a { background:red; }

eine Hintegrundfarbe ROT erhalten soll.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Zweite Navigation

Jetzt mitmachen!