Verschachtelte Liste (Menue)

Muckel

Guten Abend allerseids,

unter Webstandards-Projekt - Willkommen habe ich ein Menue gefunden, welches mit einer Verschachtelten Liste arbeitet. Soweid so gut. Für das Wordpress ist das schonmal sehr gut, da hier ja einiges an standard über li Tags aus gegeben wird.

Wenn ich dieses Menue vertical nutze (oben nach unten) funktioniert das auch: klick mich.

Ich möchte jenes Menue gerne horizontal nutzen um dann z.B. einen Link Namens Gallerie zu haben und darunter dann die einzelnen Seiten. Oder die Hauptpunkte der Kategorien, darunter die Unter kategorien usw.

Meine Liste schaut so aus:

Code

<div id="top"> 
  <ul id="menue">
    <li><a href="#">Startseite</a></li>
    <li><a href="#">Gallerie</a></li>
        <ul>
            <li><a href="#">erstes Jahr</a></li>
            <li><a href="#">zweites Jahr</a></li>
                <ul>
                    <li><a href="#">Pfingsten</a></li>
                    <li><a href="#">Großfahrt</a></li>
                </ul>
            <li><a href="#">drittes Jahr</a></li>
        </ul>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Lyrik</a></li>
    <li><a href="#">Liedgut</a></li>
    <li><a href="#">Pfadfinder</a></li>
    <li><a href="#">Rheuma</a></li>
    <li><a href="#">Ausbildung</a></li>
    <li><a href="#">Links</a></li>
    <li><a href="#">Kontakt</a></li>
    <li><a href="#">Impressum</a></li>
  </ul>
</div>

Alles anzeigen

Das betreffende CSS:

Code

/*Menue*/
ul#menue, ul#menue ul
{
    list-style-type:    none;
/*    width:            100px;*/
    padding:        0;
    margin:            0;
}


ul#menue li:first-child
{
    border: 1px solid #000000;
}


ul#menue li
{
    margin: 0;
    padding: 0;
    height: 25px;
    line-height: 25px;
    text-align: center;
    border: 1px solid #000000;
    border-top: none;
    background: #E6E6E6;
    color: #000000;
    text-decoration: none;
    float: left;
}


ul#menue li a
{
    display: block;
    height: 26px;
    width: 75px;
    padding-top: 4px;
    background-color: #E6E6E6;
    text-align: center;
    text-decoration: none;
    font-weight:bold;
    color: #000000;
    border-right: 1px solid #000000;
}


ul#menue li > ul
{
    position:        relative;
    left:            +99px;
    top:            -25px;
    display:        none;
}


ul#menue li:hover > ul
{
    display:        block;
}


ul#menue li ul
{
    margin-top:        -1px;
    margin-left:        -1px;
}

Alles anzeigen

Und der Link zum ganzen: jurtenrunde.de, muckels-fahrtenleben.de, muckels-leben.de ~ der Jugendbewegung verschrieben

Problem ist, dass die Unterpunkte falsch gezeigt werden bzw. es erst garnicht funktioniert. Kann mir dabei jemand helfen? Ich weiß, es gibt viele PlugIns - aber ich hätte gerne eine Variante ohne PlugIn, damit man das Design wirklich einfach verwenden kann. (Das Design ist bislang noch nicht an den IE angepasst).

Gruß und vielen Dank
Muckel

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

Astrid

Auf letztem Link kann ich nicht sehen, was gemeint ist. Möchtest Du ein Layer-Menü, welches bereits auf die Maus reagiert (ohne JS) oder ein horizontales Klappmenü?

Für ersteres benötigst Du einen IE-Hack, der allerdings ohne JavaScript nicht auskommt. Ich hatte da mal Tut zu gange. Müßte ich aber wieder suchen. Zweiteres ließe sich dynamisch via PHP oder nur über CSS mit display: none lösen.

PHP-Lösung Fundstelle K2-Theme

PHP

<ul id="pages">
<li class="page_item <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>/" title="Startseite">Home</a></li>
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>
</ul>


<?php /* Menu for subpages of current page (thanks to K2 theme for this code) */
global $notfound;
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 != 'attachment'")) {
if ($wpdb->get_results("SELECT * FROM $wpdb->posts WHERE post_parent = '$parent_id' AND post_type != 'attachment'")) {
?>
<ul id="subpages">
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li=&child_of='. $parent_id); ?>
</ul>
<?php } } ?>

Alles anzeigen

CSS-Lösung:

CSS-Klappmenü in WordPress

Nachtrag: Spielt hier keine Geige, ob Kategorien oder statische Seiten gemeint sind - kann man dementsprechend anpassen.

Monika

Muckel mache Dir selber einen Gefallen und nimm dieses Plugin da

WordPress Info at sieker.info » WP-PagesNav

;)

das css wird eh heikel genug

lg

Muckel

Zitat von Monika

Muckel mache Dir selber einen Gefallen und nimm dieses Plugin da
WordPress Info at sieker.info » WP-PagesNav
;)
das css wird eh heikel genug
lg

Guten Morgen,

vielen Dank erstmal für eure beiden Antworten.

Von einem PlugIn halte ich zurzeit nicht viel, da dann andere Menschen, die evtl. ja mein Design benutzen wollen, ersteinmal so ein PlugIn installieren müssen und das ist, meiner Meinung nach nicht vor teilhaft.

Astrid
eine css Schleife oder den * html hack muss ich für den InternetExplorer eh noch ein bauen.

Naja, werde die Tage mein Glück weiter ver folgen und ich denke, dass es auch klappen wird.

Danke nochmals für eure Antworten!
Gruß Muckel

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Verschachtelte Liste (Menue)

Jetzt mitmachen!