CSS - Dropdown Menü /Unterseiten

masteroffer

Ich benötige mal wieder Hilfe bei dem Thema: Unterseiten.

Ein Bekannter will via CSS Unterseiten in seiner Navigation.

Ich habe lange versucht dies umzusetzten, bin jedoch leider gescheitert. Er möchte: dass die Unterseiten wie im Standard-Theme von WordPress automatisch in die Naviagtion hinzugefügt werden.
Die Navigation habe ich derzeit wie folgt aufgebaut:

PHP

<div id="nav">
<ul id="csstabs"> 
<li <?php if(is_home()) { ?> class="current_page_item"<?php } ?>>
<a href="<?php bloginfo('home') ?>">Initiative</a></li>
<?php wp_list_pages('title_li=&sort_column=menu_order&depth=1'); ?>
<div id="meta">
<li><?php wp_loginout();?></li>
</div>
</ul>

Im Standard-Theme ist die Navigation mit dem folgenden PHP-Code gelöst:

PHP

<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

Nur wie passe ich den auf meine Navigation an, oder gibt es noch andere Möglichkeiten?

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

Eine Frage: Dir ist der Unterschied zwischen wp_nav_menu() und wp_list_pages() schon klar, oder nicht?

masteroffer

wp_list_pages() = [FONT=Arial][size=12]Statische Seiten Auflisten lassen
wp_nav_menu() = [/SIZE][/FONT]gibt eine Liste mit den Seiten von WordPress aus.

Die WEbseite ist übrigens: waldorfnet.org

Domino5702

wp_nav_menu() und wp_list_pages()

Lies das mal durch. Die in WP 3 geschaffene Möglichkeit, Menüs selbst zu definieren, beinhaltet auch die Möglichkeit, neue Seiten automatisch zum Menü hinzuzufügen. Gilt allerdings nicht für Untermenüs.

Heike Martyniak

Hi zusammen,

wenn hier jemand eine Lösung hätte, wär das echt supi.

Suche schon seit zwei Tagen genau danach und werde nicht fündig. :sad:

Liebe Grüße

Heike

masteroffer

Habe nun eine Möglichkeit gefunden: Im Header

PHP

<div id="access" role="navigation">
<?php?>
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
<div id="meta">
<li><?php wp_loginout();?></li>
</div>-- #meta -->
</div><!-- #access -->

Das CSS dazu:

HTML

#access {
-webkit-border-top-left-radius: 30px;
-moz-border-radius-topleft: 30px;
border-top-left-radius: 30px;
-wbkit-box-shadow: 0 0 5px 0 #7d0000;
-moz-box-shadow: 0 0 5px 0 #7d0000;
box-shadow: 0 0 5px 0 #7d0000;
width: 492px;
height: 30px;
float: left;
margin: 120px 0 0 0;
background: #B30000;
}


#access .menu-header,
div.menu {
    font-size: 12px;
    width: 492px;
}
#access .menu-header ul,
div.menu ul {
    list-style: none;
    margin: 0;
}
#access .menu-header li,
div.menu li {
    float: left;
    position: relative;
}
#access a {
color: #FFF;
display: block;
line-height: 30px;
padding: 0 10px;
text-decoration: none;
text-transform: uppercase;
}
#access ul ul {
display: none;
position: absolute;
top: 30px;
left: 0;
float: left;
width: 180px;
z-index: 99999;}


#access ul ul li {
min-width: 180px;}


#access ul ul ul {
left: 100%;
top: 0;}


#access ul ul a {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomleft: 15px;
border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-moz-border-radius-bottomright: 15px;
border-bottom-right-radius: 15px;
background: #B30000;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;}


#access li:hover > a,
#access ul ul :hover > a {
        background: #B30000;
        color: #B9B9B9;
}
#access ul li:hover > ul {
    display: block;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
color: #B9B9B9;
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
color: #B9B9B9;
}

Alles anzeigen

Das komische ist nur, dass die Untermenüs so komischen floaten.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

CSS - Dropdown Menü /Unterseiten

Jetzt mitmachen!