Probleme mit current page item, current page parent

    Hi,

    habe doch noch ein Problem mit einem selbst gebastelten Menü (hatte fälschlicherweise ein Thread dazu auch im falschen Bereich aufgemacht, sorry dafür).

    Also ich versuchs mal simpel zu erklären: Ich habe ein horizontales WP LIST PAGES Menü erstellt, welches erst nach drücken auf einen der Navigationspunkte auch erst die Untermenüs anzeigt. das habe ich so gelöst:


    PHP
    <?php  wp_list_pages('sort_list=menu_order&depth=1&exclude=26,27,28,29,,76,74&title_li=');  ?><br/><br/><div class="submenu"><?php
$children =  wp_list_pages('title_li=&child_of='.$post->ID.'&echo=0');
if ($children) { ?>
<ul>
<?php echo $children; ?>
</ul></div>
<?php } ?> </div>

    Das einzige was jetzt momentan gar nicht wirklich gut funktioniert ist das Blocken der CSS Vererbung. Denn ich übergebe wie im angehängten Bild jeder Page ID eine CSS Klasse. Dann muss ich noch eine currentpage css classe für jede ID vergeben. Leider übernehmen aber die untermenüs die klasse der currentpage, währenddessen das hauptmenü diese nur im hintergrund darstellt. Das ist rech nervig. Hier meine Darstellung dazu

    Das Menü soll so aussehen:

    STADT LAND [COLOR=RoyalBlue]FLUSS [/COLOR]DORF
    [COLOR=RoyalBlue]NAMEN NATUR HÄUSER[/COLOR]

    Wie man es entsprechend kennt, sollte der FLUSS ein current_page_parent bekommen. Leider scheint das nicht zu klappen, denn ich habe für alle vier Hauptnavi Punkte entsprechende Klassen angelegt:

    Also so:

    Code
    .page-item-4    a:link         {color:white;font-family:Tahoma;text-decoration:none;text-transform:uppercase;width:122px;height:41px;background:  url(images/navi-about-off.png)  no-repeat;float:left;display:block;margin-right:10px;margin-left:4px;outline-style:   none;font-size:0.75em;font-style:Tahoma;font-weight:normal;text-decoration:none;text-transform:uppercase;padding:12px  0 0 0;text-align:center;}
.page-item-4    a:active     {color:white;font-family:Tahoma;text-decoration:none;text-transform:uppercase;width:122px;height:41px;background:  url(images/navi-about-off.png)  no-repeat;float:left;display:block;margin-right:10px;margin-left:4px;outline-style:   none;font-size:0.75em;font-style:Tahoma;font-weight:normal;text-decoration:none;text-transform:uppercase;padding:12px  0 0 0;text-align:center;}
.page-item-4    a:visited     {color:white;font-family:Tahoma;text-decoration:none;text-transform:uppercase;width:122px;height:41px;background:  url(images/navi-about-off.png)  no-repeat;float:left;display:block;margin-right:10px;margin-left:4px;outline-style:   none;font-size:0.75em;font-style:Tahoma;font-weight:normal;text-decoration:none;text-transform:uppercase;padding:12px  0 0 0;text-align:center;}
.page-item-4    a:hover         {color:white;font-family:Tahoma;text-decoration:none;text-transform:uppercase;width:122px;height:41px;background:  url(images/navi-about-on.png)  no-repeat;float:left;display:block;margin-right:10px;margin-left:4px;outline-style:   none;font-size:0.75em;font-style:Tahoma;font-weight:normal;text-decoration:none;text-transform:uppercase;padding:12px  0 0 0;text-align:center;}
.current_page_item-4 {width:123px;height:28px;background:  url(images/navi-about-active.png)  no-repeat;float:left;display:block;margin-right:5px;margin-left:5px;outline-style:  none;text-align:center;}
.current_page_parent      {font-family:Tahoma;font-weight:normal;width:123px;height:21px;background:  url(images/navi-about-active.png)  no-repeat;float:left;display:block;margin-right:5px;margin-left:5px;outline-style:   none;font-size:0.75em;text-decoration:none;text-transform:uppercase;padding:11px  0 0 0;text-align:center;}

    Es greift ausschließlich die current page item, und das anstelle für das Elternelement greift das nur für die child elemente. Das Parent element an sich, also .current_page_parent funktioniert nicht.

    Ich hoffe mir kann man hier helfen

    • Gerade eben
    • Anzeige

    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

    Hi Flattersatz,

    also wenn ich dich richtig verstehe, dann hat dein FLUSS, wenn du ihn anklickst und dich auf einer Unterseite von FLUSS befindest, kein [FONT=Fixedsys]current_page_parent[/FONT] als Klasse zugewiesen bekommen von Wordpress, richtig?

    Oder hast du einfach nur ein Problem mit der CSS Geschichte? Weil wenn ich deinen Code richtig interpretiere, müsstest du das .current_page_parent, womit du ja den About-Bereich in der Navi als aktiv anzeigen möchtest, auch abhängig von dem pageitem-4 machen. Also würd das für mich dann so aussehen.

    Code
    .page-item-4    a:link         {color:white;font-family:Tahoma;text-decoration:none;text-transform:uppercase;width:122px;height:41px;background:  url(images/navi-about-off.png)  no-repeat;float:left;display:block;margin-right:10px;margin-left:4px;outline-style:   none;font-size:0.75em;font-style:Tahoma;font-weight:normal;text-decoration:none;text-transform:uppercase;padding:12px  0 0 0;text-align:center;}
.page-item-4    a:active     {color:white;font-family:Tahoma;text-decoration:none;text-transform:uppercase;width:122px;height:41px;background:  url(images/navi-about-off.png)  no-repeat;float:left;display:block;margin-right:10px;margin-left:4px;outline-style:   none;font-size:0.75em;font-style:Tahoma;font-weight:normal;text-decoration:none;text-transform:uppercase;padding:12px  0 0 0;text-align:center;}
.page-item-4    a:visited     {color:white;font-family:Tahoma;text-decoration:none;text-transform:uppercase;width:122px;height:41px;background:  url(images/navi-about-off.png)  no-repeat;float:left;display:block;margin-right:10px;margin-left:4px;outline-style:   none;font-size:0.75em;font-style:Tahoma;font-weight:normal;text-decoration:none;text-transform:uppercase;padding:12px  0 0 0;text-align:center;}
.page-item-4    a:hover         {color:white;font-family:Tahoma;text-decoration:none;text-transform:uppercase;width:122px;height:41px;background:  url(images/navi-about-on.png)  no-repeat;float:left;display:block;margin-right:10px;margin-left:4px;outline-style:   none;font-size:0.75em;font-style:Tahoma;font-weight:normal;text-decoration:none;text-transform:uppercase;padding:12px  0 0 0;text-align:center;}
.page_item-4 .current_page_item {width:123px;height:28px;background:  url(images/navi-about-active.png)  no-repeat;float:left;display:block;margin-right:5px;margin-left:5px;outline-style:  none;text-align:center;}
.page_item-4 .current_page_parent      {font-family:Tahoma;font-weight:normal;width:123px;height:21px;background:  url(images/navi-about-active.png)  no-repeat;float:left;display:block;margin-right:5px;margin-left:5px;outline-style:   none;font-size:0.75em;text-decoration:none;text-transform:uppercase;padding:11px  0 0 0;text-align:center;}

    Ansonsten müsstest du die Seite irgendwie mal online stellen, damit ich mir das mal angucken kann.

    --
    So, jetzt müssts aber passen. ;-)

    Viele Grüße
    meiva

    Einmal editiert, zuletzt von meiva (2. Juni 2010 um 18:29)

    Hi Du,

    danke für deine Antwort. Also folgendes hat sich ergeben. Das einfache current page item klappt wunderbar.

    Jedoch gibt es einen Menüpunkt, welches ein individuelles current page item bekommen soll.

    Das allgemeine current page item ist so definiert:

    CSS
    #navigation .current_page_item a:link, #navigation .current_page_item a:visited, #navigation .current_page_item a:hover, #navigation .current_page_item a:active   {color:#44b2d7 !important;font-family:Tahoma;text-decoration:none;text-transform:uppercase;font-weight:bold;width:123px;height:28px;background: url(images/navi-about-active.png) no-repeat;float:left;display:block;margin-right:5px;margin-left:5px;outline-style: none;text-align:center;}

    Der auf ein bestimmtes item definierte current page soll so aussehen, klappt aber leider nicht:

    CSS
    #navigation .page_item-2 .current_page_item a:link, #navigation .page_item-2 .current_page_item a:visited, #navigation .page_item-2 .current_page_item a:hover, #navigation .current_page_item a:active   {color:#44b2d7 !important;font-family:Tahoma;text-decoration:none;text-transform:uppercase;font-weight:bold;width:123px;height:28px;background: url(images/navi-about-active.png) no-repeat;float:left;display:block;margin-right:5px;margin-left:5px;outline-style: none;text-align:center;}

    Oder auch so:

    Code
    .page_item-2 .current_page_item   {color:#44b2d7;font-family:Tahoma;text-decoration:none;text-transform:uppercase;width:121px;height:41px;background: url(images/navi-home-on.png) no-repeat;float:left;display:block;margin-right:5px;margin-left:4px;outline-style: none;font-size:0.75em;font-style:Tahoma;font-weight:normal;text-decoration:none;text-transform:uppercase;padding:12px 0 0 0;text-align:center;}

    beides klappt jedoch nicht.

    Kannst Du mir da helfen?

    Einmal editiert, zuletzt von Flattersatz (10. Juni 2010 um 01:07)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden