Active menu highlight

fischnackdissen

Hallo, Sorry, dass ich fragen muß aber irgendwie komme ich hier nicht weiter..
Benutze diesen Code hier zum einbinden des Menüs:

PHP

<?php wp_list_pages('exclude=4&title_li=&depth=1'); ?>

Generiert wird das hier:

PHP

<ul>
<li class="page_item page-item-2 current_page_item"><a href="#">1</a></li>
<li class="page_item page-item-6"><a href="#">2</a></li>
<li class="page_item page-item-8"><a href="#">3</a></li>
<li class="page_item page-item-10"><a href="#">4</a></li>
<li class="page_item page-item-12"><a href="#">5</a></li>
</ul>

Aber wie spreche ich denn diesen Active-Code an? So geht es nicht:

PHP

#sidebar ul li .page_item page-item-2 current_page_item a  {
    border: solid 1px red;
}

Danke für Hinweise.
Fisch

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

jottlieb

Versuche doch einfach mal nur .current_page_item { } ggf. auch current_page_item a { }

fischnackdissen

Ich weiß nicht wie bzw. warum aber ich stand määäächtig auf`m Schlauch.

Danke Jottlieb. So funzt es:

PHP

.current_page_item  {
    font-weight: bold;
}

bg
Fisch

anG

Menüpunkte AKTIVE setzen

Es soll ja Plug-Ins geben, die so etwas für einen machen. Hab aber nie eins gefunden, dass richtig funktioniert. Daher folgenden Code zusammengebastelt.

Geht wie folgt! :-D

Im Header oder Sidebar (wo auch immer Du das Menü anzeigst) folgenden Code einbauen.

Ich habe allen Menüpunkte am Ende ein | angefügt, als Trenner. Den letzten Punkt habe ich manuell eingeügt, damit er kein | hat. Daher hat diese Seite "Page 14" eine eigene Class ("noBorder").

Als Aktiv habe ich im Style eine Class "Current" angelegt.

PHP

<ul>        
<?php wp_list_pages('title_li='); ?>
<li class="noBorder"><a <?php if (is_page(14)) echo('class="current" '); ?>href="<?php bloginfo('url'); ?>/?page_id=14">Contact</a></li>
</ul>

In der Datei Styles.css folgenden Code einbauen und natürlich Deinem Bedürfnissen anpassen.

CSS

#menu_top ul li a {
text-decoration: none;
color: #94B6C0;
}
#menu_top ul li a:hover {
color: #94B6C0;
text-decoration: underline;
}
#menu_top .current, #menu_top .current:hover {
color: #fff;
text-decoration: none;
}
#menu_top .noBorder
{
  border: none;
}
#menu_top .current_page_item a {
background: none !important;
color: #fff !important;
text-decoration: underline;
}
#menu_top .current_page_item ul li a:hover {
background: none !important;
color: #fff !important;
text-decoration: underline;
}

Alles anzeigen

Bei Fragen gerne melden.

Gruß

Morris
ars novum Group LLC

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Active menu highlight

Jetzt mitmachen!