Um schreiben oder kommentieren zu können, benötigen Sie ein Benutzerkonto.
Sie haben schon ein Benutzerkonto? Melden Sie sich hier an.
Jetzt anmeldenHier können Sie ein neues Benutzerkonto erstellen.
Neues Benutzerkonto erstellen
Hallo zusammen
Ich möchte gerne folgendes erreichen:
Eine horizontale Navigation wobei die Seiten auch Unterseiten beinhalten. Diese sollen aber erst nach einem Klick auf die Hauptseite erscheinen (wenn diese aktiv ist) und zwar sollten die sich darunter auflisten.
Beispiel:
Hauptseite
1. Unterseite
2. Unterseite
3. Unterseite -> Diese 3 werden in der Navigation erst bei aktiver Hauptseite angezeigt
Viele Lösungen habe ich schon mit Dropdown gesehen. Dies möchte ich aber umgehen.
Danke!
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.
mit diesem Codeschnipsel sollte das hinkommen:
<?php global $notfound; ?>
<?php
if (is_page() and ($notfound != '1')) {
$current_page = $post->ID;
while($current_page) {
$page_query = $wpdb->get_row("SELECT ID, post_title, post_status, post_parent FROM $wpdb->posts WHERE ID = '$current_page'");
$current_page = $page_query->post_parent;
}
$parent_id = $page_query->ID;
$parent_title = $page_query->post_title;
if ($wpdb->get_results("SELECT * FROM $wpdb->posts WHERE post_parent = '$parent_id' AND post_status != 'inherit'")) { ?>
<div class="box-right">
<h3 style="color:#074042;">Unterpunkte von <?php echo $parent_title; ?></h3>
<div class="box-right-content">
<ul>
<?php wp_list_pages('sort_column=menu_order&title_li=&child_of='. $parent_id); ?>
</ul>
</div>
<div class="box-right-bottom"></div>
</div>
<?php } } ?>Styling musst Du Dir anpassen.
Die Zeile
passt vielleicht auch nicht so gut in dein Projekt.
danke schonmal, aber irgendwas stimmt nicht. jetzt wird gar nichts mehr angezeigt.. navigation fehlt, aber keine fehlermeldung.
ja, darauf ist jetzt schlecht zu antworten.
Vielleicht noch diese Info hinterher, der Code macht nur die Unternavigation sofern es unterseiten gibt.
Ich gehe davon aus, dass Du eine schlichte Horizontalnavigation für die oberste Ebene hast.
Darunter dann mein Code. Wenn die aktive seite Unterseiten hat wird die Unternavigation dargestellt.
So soll es funktionieren und tut es auch.
also bis jetz habe ich folgenden code für die navigation:
<div class="menu">
<ul>
<li <?php if(is_home()){echo 'class="current_page_item"';}?>><a href="<?php bloginfo('siteurl'); ?>/" title="Startseite">Startseite</a></li>
<?php wp_list_pages('title_li=') ?>
</ul>
</div>und wo müsste ich deinen code einsetzen?
das kannst Du Dir eigentlich aussuchen.
Ich habe ihn oft in den Sidebar gepackt und hatte dann die Unternavigation dort.
Du kannst ihn auch direkt unter deinem Horizontalmenü platzieren und die Liste dann ebenfalls horizontal ausrichten.
Ich würder Deiner wp_list_pages noch das Argument &depth=1 hinzufügen, damit du dort nur die oberste Ebene hast und die Unterseiten dann in der Unternavigation auftauchen.
Ich habs lösen können, zwar auf andere Art und Weise, aber danke dir trotzdem für deine Hilfe!
Hauptpunkt auch bei offener Unterseite noch aktiv
Nun habe ich noch das Problem zu lösen, dass der Hauptmenüpunkt auch bei einer aktiven Unterseite noch das Attribut current_page_item verwendet. Wie funktioniert das? Folgendes zum Code:
<div id="menu">
<ul>
<li <?php if(is_home()){echo 'class="current_page_item"';}?>><a href="<?php bloginfo('siteurl'); ?>/" title="Startseite">Startseite</a>
</li>
<?php wp_list_pages('title_li=&depth=1'); ?>
</ul>
<?php
if($post->post_parent)
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0");
else
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
if ($children) { ?>
<ul class="unternav">
<?php echo $children; ?>
</ul>
<?php } ?>
</div>und im CSS:
#menu {
float:left;
padding-left:30px;
padding-top:15px;
}
#menu ul{
margin:0px;
display:block;
list-style:none;
}
#menu ul li{
float:left;
}
#menu ul li a {
color:#024d7c;
font-size:1.3em;
float:left;
height:23px;
padding:0 22px 0 22px;
margin:0 2px 0 2px;
display:block;
text-decoration:none;
}
#menu ul li.current_page_item a{
color:#024d7c;
float:left;
height:23px;
padding:0 22px 0 22px;
margin:0 2px 0 2px;
display:block;
text-decoration:none;
background-image:url(images/rl_linie.png);
background-position:center;
background-repeat:no-repeat;
}
#menu ul li a:hover{
color:#024d7c;
background-image:url(images/rl_linie.png);
background-position:center;
background-repeat:no-repeat;
}
#menu ul li ul li {
font-size:0.8em;
}
#menu ul li ul li a {
color:#3ec7f4;
background-image:none;
padding:0;
}
#menu ul li ul li a:hover {
color:#3ec7f4;
background-image:none;
text-decoration:underline;
}
/*----------------------- Unternavigation -----------------------*/
#menu .unternav {
margin-left:130px;
margin-top:10px;
font-size:0.8em;
list-style-type:disc;
display:table-caption;
}
#menu .unternav li {
height:15px;
}
#menu .unternav a {
text-decoration:none;
color:#3ec7f4;
margin:0;
padding:0;
}
#menu .unternav a:hover {
text-decoration:none;
color:#024d7c;
background:none;
}
#menu .unternav .page-item-17,
#menu .unternav .page-item-19,
#menu .unternav .page-item-21 {
margin-left:100px;
}
#menu .unternav .page-item-23 {
margin-left:205px;
}
#menu ul.unternav li.current_page_item a {
color:#024d7c;
background:none;
margin:0;
padding:0;
}.current_page_item trägt es natürlich nicht mehr, aber dafür hat es bei aktiver Unterseite die Klasse
.current_page_ancestor
die kannst Du dann entsprechend verwenden.
ach so einfach ist das :) vielen dank!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!