Spry Menü mit Unterpunkten einer Kategorie

fullenchilada

Hi Community,

habe mir für meine Seite mit Hilfe von Dreamweaver ein aufklappbares Spry Menü gebastelt und dieses in die linke Sidebar gepackt.

Auf meiner Seite habe ich mehrere Kategorien. Wenn ich nun im Spry Menü einen Kategoriepunkt anklicke, schiebt sich das Menü nach unten hin auf und ich möchte gerne, dass dann im erscheinenden weißen Bereich alle Unterkategorien-Links stehen. Hab leider überhaupt keinen Plan, wie ich das realisieren könnte ;-).

Würd mich über Hilfe sehr freuen

lg
full

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

redcat63

Ein Link zur Webseite wäre sicherlich sehr hilfreich.

Aber schon mal vorab, vielleicht löst Du damit ja schon Dein Problem.

Ein Ausschneitt aus dem Quellcode:

HTML

<div id="main">
    <div class="page_margins">
      <div class="page">
        <div class="subcolumns">
          <!-- Insert your subtemplate content here -->
          <div id="nts_col1" class="c20l">
            <div id="nts_col1_content" class="subcl">


                <div class="sidebar_left" role="complementary">
    <ul class="nav2">
    <li id="nav_menu-3" class="widget-container widget_nav_menu"><div class="menu-aktuelles-2-container"><ul id="menu-aktuelles-2" class="menu"><li id="menu-item-409" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-409"><a href="http://www.meine-domainadresse.de/unterordner">startseite</a></li>
<li id="menu-item-406" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-406"><a href="http://www.meine-domainadresse.de/unterordner/kategorie/aktuelles/">aktuelles</a></li>
<li id="menu-item-407" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-407"><a href="http://www.meine-domainadresse.de/unterordner/kategorie/termine/">termine</a></li>
</ul></div></li><li id="menu-item-416" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-416"><a href="http://www.meine-domainadresse.de/unterordner/allgemeines/">allgemeines</a>
<ul class="sub-menu">
    <li id="menu-item-417" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-417"><a href="http://www.meine-domainadresse.de/unterordner/allgemeines/oeffnungszeiten/">öffnungszeiten</a></li>
    <li id="menu-item-418" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-418"><a href="http://www.meine-domainadresse.de/unterordner/allgemeines/preise/">preise</a></li>
    <li id="menu-item-419" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-419"><a href="http://www.meine-domainadresse.de/unterordner/allgemeines/bedingungen/">bedingungen</a></li>


</ul>
</li>
</ul></div></li>
<li id="menu-item-421" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-421"><a href="http://www.meine-domainadresse.de/unterordner/mitarbeit/">mitarbeit</a>
<ul class="sub-menu">
    <li id="menu-item-422" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-422"><a href="http://www.meine-domainadresse.de/unterordner/mitarbeit/praktikum/">praktikum</a></li>


</ul>
</li>
</ul></div></li><li id="nav_menu-7" class="widget-container widget_nav_menu"><div class="menu-kontakt-container"><ul id="menu-kontakt" class="menu"><li id="menu-item-431" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-431"><a href="http://www.meine-domainadresse.de/unterordner/kontakt/">kontakt</a>
<ul class="sub-menu">
    <li id="menu-item-433" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-433"><a href="http://www.meine-domainadresse.de/unterordner/kontakt/kontaktformular/">kontaktformular</a></li>
</ul>
</li>
<li id="menu-item-435" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-435"><a href="http://www.meine-domainadresse.de/unterordner/impressum/">impressum</a></li>
</ul></div></li> 
    </ul>
</div>

Alles anzeigen

Der dazugehörige PHP-Code , der sich in der header.php befindet:

PHP

<div id="main">
    <div class="page_margins">
      <div class="page">
        <div class="subcolumns">
          <!-- Insert your subtemplate content here -->
          <div id="nts_col1" class="c20l">
            <div id="nts_col1_content" class="subcl">
                <?php
              include('sidebar-left.php');
                ?>
            </div>
          </div>

Alles anzeigen

Der PHP-Code , der sich in der sidebar-left.php befindet, den Du natürlich auch anstatt der Zeile ' include('sidebar-left.php');' in die header.php schreiben kannst:

PHP

<div class="sidebar_left" role="complementary">
    <ul class="nav2">
    <?php if ( ! dynamic_sidebar( 'primary-widget-area' ) ) : ?>
<!-- Deine Anweisungen, wenn es die sidebar (Widget) 'primary-widget-area' nicht existiert. -->
    <?php endif; ?> 
    </ul>
</div>

Der dazugehörige CSS-Code, den Du in einer Deiner css-Dateien kopieren musst:

HTML

.sidebar_left {
padding:0;
font-size:1em;
padding-left:0;
margin:0;
}


/*Drop-down menu*/
.nav2 {
width:190px;
margin:0;
padding:0;
border:none;
margin-left:1em;
} 
/*Color navigation bar normal mode*/
.nav2 ul {
padding-left:0; 
margin-left:0;
width:100%;
list-style-type:none;
}
.nav2 li {
padding:0; 
margin:0;
width:100%;
background: transparent url(../images/buttonCD1E3F.jpg) no-repeat left top; 
color:white;
}
.nav2 div {
padding:0; 
margin:0;
width:100%;
}
.nav2 ul li {
padding:0;
z-index:auto !important /*Non-IE6*/; 
z-index:1000 /*IE6*/; 
}
.nav2 ul li a {
float:none !important /*Non-IE6*/;
float:none /*IE-6*/; 
display:block; 
height:auto; 
line-height:auto;
padding:0;
text-decoration:none; 
font-weight:bold;
color:white; 
}
.nav2 ul li ul {display:none; border:none;}


/*Zweite Ebene*/
.nav2 ul li:hover ul li ul {display:none; border:none;}


/*Dritte Ebene*/
.nav2 ul li:hover ul li:hover ul li ul {display:none; border:none;}


/*Non-IE6 hovering*/
.nav2 ul li:hover {
position:relative;
} /*Sylvain IE hack*/


.nav2 ul li a {
background-color:transparent; 
color:white;
font-weight:normal; 
text-decoration:none;
} 
.nav2 ul li a:hover {
color:white; 
text-decoration:none;
} 


.nav2 ul li:hover ul {
background-color:white;
color:white; 
text-decoration:none;
float:left;
display:block; 
min-width:150px; 
width:auto; 
position:absolute; 
z-index:999; 
top:0px; 
margin-top:0; 
margin-left:0; 
left:202px;
padding-right:0px;
}


.nav2 ul li:hover {
background: transparent url(../images/buttonCD1E3F-2.jpg) no-repeat left top; 
color:white; 
text-decoration:none;
} 
.nav2 ul li:hover a {
color:white; 
text-decoration:none;
} 




.nav2, .nav2 ul, .nav2 ul li ul {
background:white;
}
.nav2 ul li {
height:22px;
margin-bottom:1px;
}
.nav2 ul {
margin-bottom:1.75em;
}
.nav2 ul li ul {
margin-bottom:0;
min-height:22px;
background: transparent url(../images/buttonCD1E3F.jpg) no-repeat left top;
width:150px;
}
.nav2 ul li ul li{
margin-bottom:0px;
height:20px;
width:150px;
}

Alles anzeigen

Die Code-Schnippsel musst Du natürlich Deinen Wünschen anpassen, aber das weißt Du natürlich bereits. ;-)

Viel Erfolg.
Elke

fullenchilada

Erstmal danke für die Antwort Elke.

Ich hab da eigentlich mehr an einen <php> Schnipsel gedacht, den ich direkt ins Spry Menü einfügen kann.

Hier mal der Link zur Seite

Wenn du einen Menüpunkt auf der linken Seite anklickst, klappt das Menü auf und sollte eigentlich die Links zu den verschiedenen Unterkategorien der Kategorie anzeigen.

Beispiel:
Hauptkategorie Aktuelles
Unterkategorie News
Unterkategorie Events etc.

Natürlich könnt ich die Links auch manuell im HTML einfügen, aber wenn sich dynamisch realisieren lassen könnte, wär das natürlich cooler :-)

redcat63

Zunächst:
Im Moment funktioniert das Aufklappen nur, wenn ich JavaScript (Deines Providers) zulasse/aktiviert habe und ist deswegen nicht der beste Lösungsweg.
Mein Vorschlag funktioniert auch ohne JavaScript. Allerdings sind die Menüpunkte auch dann bereits zu sehen, wenn man nur mit der Maus über den jeweiligen Hauptmenüpunkt fährt, d.h. ein Anklicken ist nicht erforderlich, wobei dies im Normalfall auch gewünscht wird. Aber wenn Du das nicht willst, dann musst Du die css-Befehle (a:hover) dementsprechend ändern.

Unabhängig davon hat das mit der dynamischen Generierung der Menüpunkte nichts zu tun. Denn um diese dynamisch zu generieren, musst Du Dich nur für Widgets/Menüs und/oder WordPress-Funktionen, wie z.B. wp_list_categories(), entscheiden.

Für das grundsätzliche Verständnis in Bezug auf die Menüs wichtig:
Schau Dir mal die Datei sidebar.php Deines Themes bzw. die Seiten, wenn vorhanden, im Adminbereich "Widgets" und "Menüs" an.
Darüber hinaus solltest Du auch nach den den Begriffen "Widgets" und "Menüs" und nach den WP-Funktionen wp_list_categories() und wp_list_pages (hier oder bei google) suchen.

Im Anschluss können wir dann Deine noch offenen Fragen klären.
Viel Erfolg.
:-)

VG Elke

fullenchilada

Mir fällt gerade eine Alternative zu dem aufklappbaren Menü ein. Mittels toggle und visibility von divs kann ich das glaub ich auch erreichen. Habe halt jetzt das Spry Menü verwendet, weil ich es ziemlich praktisch finde. Und da der Blog ja auf Online-Rollenspieler abzielt, denke ich mal, dass die meisten JavaScript sowieso aktiviert haben.

Und um nochmal auf das Problem mit den Unterkategorien zu sprechen zu kommen. Ich hab mal ein bißchen im Wordpress Codex gestöbert und folgendes gefunden:

<?php wp_list_categories('include=1,2,3,4&title_li=<h3>' . __('Titel') . '</h3>' ); ?>

Funktioniert wunderbar, leider nur, wenn ich auch Artikel in den Unterkategorien habe.

redcat63

Zitat von fullenchilada

Mir fällt gerade eine Alternative zu dem aufklappbaren Menü ein. Mittels toggle und visibility von divs kann ich das glaub ich auch erreichen. Habe halt jetzt das Spry Menü verwendet, weil ich es ziemlich praktisch finde. Und da der Blog ja auf Online-Rollenspieler abzielt, denke ich mal, dass die meisten JavaScript sowieso aktiviert haben.

Wenn Du nicht nur "laut gedacht" hast, sondern es sich um eine Frage handelt, dann formuliere diese bitte noch einmal anders. Vielen dank.

Zitat

Und um nochmal auf das Problem mit den Unterkategorien zu sprechen zu kommen. Ich hab mal ein bißchen im Wordpress Codex gestöbert und folgendes gefunden:
<?php wp_list_categories('include=1,2,3,4&title_li=<h3>' . __('Titel') . '</h3>' ); ?>
Funktioniert wunderbar, leider nur, wenn ich auch Artikel in den Unterkategorien habe.

Wenn das mit der Funktion wp_list_categories tatsächlich nicht funktionieren sollte - und das kann sein, dann besteht die Möglichkeit das mit der Funktion get_categories zu verwirklichen.

VG Elke

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Spry Menü mit Unterpunkten einer Kategorie

Jetzt mitmachen!