Einbau einer neuen Menüleiste wegen fehlender Anzeige des Submenüs

Kompass

Lothar wies in seinem Beitrag darauf hin, dass für Impressum und Datenschutzerklärung eine separate Seite angelegt werden muss. Er bezog sich dabei auf eine Warnmeldung im Impressum-Generator bei eRecht24.

Nun gut, das ist ja schnell gemacht – dachte ich. Also habe ich im Backend eine neue Seite für die Datenschutzerklärung angelegt. Dieser hatte ich als Elternseite das Impressum zugeordnet. Nur leider war das Untermenü “Datenschutzerklärung” nicht sichtbar, wenn ich mit der Maus über das Hauptmenü “Impressum” fuhr .

Ich weiß, dass es irgendwann einmal funktionierte und der Eintrag “hover-Effekt” in der style.css für die Darstellung verantwortlich ist.  Aber ich hatte wohl vor geraumer Zeit meine Menüstruktur geändert und danach kein Submenü mehr angelegt. Allerdings erinnerte ich mich daran, dass mir damals dessen Optik sowieso nicht so gut gefiel.

Daher beschloss ich, mich im Internet nach einer schönen Umsetzung umzuschauen und fand Kavins Beitrag über das Anlegen eines Dropdown-Menüs. Dort ist – wenn auch in englisch – Schritt für Schritt erklärt, welche Code-Snippets ich einfügen muss, um eine schöne Menü-Navigation zu erzielen.

Registrierung des neuen Navigationsmenüs

Ich habe also meinen alten Code

add_theme_support( 'nav-menus' ); 

if ( function_exists( 'register_nav_menu' ) ) {
  register_nav_menu( 'primary', 'Primary Navigation Menu' );
  register_nav_menu( 'secondary', 'Secondary Navigation Menu' );
}

durch folgenden Code von Kavin in der functions.php meines Themes “Smoky” ersetzt:

// Create a function for register_nav_menus()
function add_wp3menu_support() {

register_nav_menus(
        array(
        'main-menu' => __('Main Navigation'),
        'another-menu' => __('Another Navigation')
        )
     );

}

//Add the above function to init hook.

add_action('init', 'add_wp3menu_support');

Einbinden der Menüfunktion

Die Umsetzung der Darstellung des Menüs wird in der header.php des Themes vorgenommen. Darin habe ich meinen ursprünglichen Code

<div id="navigation">

<?php
          wp_nav_menu( array(
    'theme_location' => 'main-menu', // Setting up the location for the main-menu, Main Navigation.
    'menu_class' => 'dropdown', //Adding the class for dropdowns
    'container_id' => 'navwrap', //Add CSS ID to the containter that wraps the menu.
    'fallback_cb' => 'wp_page_menu', //if wp_nav_menu is unavailable, WordPress displays wp_page_menu function, which displays the pages of your blog.
    )
      );
?>

</div>

ersetzt. Kavin hat unter seinem Code noch einmal schön erklärt, welche Scriptzeile für welche Funktion verantwortlich ist.

Aktivieren des Menüs im Backend

MenüeinstellungenDamit die neue Navigationsleiste angezeigt werden kann, ist ein kleiner Eingriff im Backend erforderlich.

Über Design unter den Einstellungen für Menüs setzte ich nun die Haken vor den neuen Navigationseinträgen.

Die Seite “Datenschutzerklärung” hatte ich ja bereits im Vorfeld als Unterseite angelegt.

Tipp:
Wie solch eine Seite angelegt wird, beschreibt Ellen sehr ausführlich in ihrem Beitrag WordPress als CMS: Menüs im Admin-Bereich anlegen und verwalten.

 

Darstellung per CSS anpassen

Kavins CSS-Werte für Farben und Höhe der Menü-Tabs entsprechen natürlich nicht dem Design meines Themes ;-), daher musste ich sie anpassen. Diese sehen nun in der style.css meines Blogs wie folgt aus:

/* The container wrapping ul.dropdown */
#navwrap {
float:left;
padding:13px 0 0 0;
width:100%;
background: #1E1D1D;
font: 1.3em "Segoe UI", "Lucida Grande", Verdana, Arial, sans-serif;
border-top:1px solid #999;
border-bottom:2px solid #ccc;
height:38px;
}

/* Top level Unordered list */
ul.dropdown {
list-style:none;
float:left;
width:100%;
padding: 0 10px;
}

ul.dropdown  li{
float:left; /* makes horiz list */
position:relative; /* hey Submenu ULs, appear below! */
}

ul.dropdown a {
padding:12px; /*space the items, occupy entire height too.*/
margin:0 25px 0 0;
text-shadow:0px -1px 0px #eef,0px 1px 1px #113;-moz-text-shadow:0px -1px 0px #eef,0px 1px 1px #113;-webkit-text-shadow:0px -1px 0px #eef,0px 1px 1px #113;ms-text-shadow:0px -1px 0px #eef,0px 1px 1px #113;
color:#CCCCCC;
text-decoration:none;
}

/* Style the link hover */
ul.dropdown li:hover a {
background:#444;
border-top:1px solid #777;
color:#F5DE7A;
border-bottom: 1px solid #000;
border-right:1px solid #666;
}

/* Displays the link as blocks. */
ul.dropdown li ul a {
display:inline-block;
margin-top:8px;
}

/* sub menus!!  */

ul.dropdown ul {
list-style: none;
margin:0; /* Appear just below the hovering list */
padding:0;
width:200px; /* specify the width. */
position:absolute; /* needed */
z-index:500; /* specify the order */
}

ul.dropdown li ul {
top:27px; /* Positioning:Calc with top level horz list height */
text-shadow:0px -1px 0px #eef,0px 1px 1px #113;-moz-text-shadow:0px -1px 0px #eef,0px 1px 1px #113;-webkit-text-shadow:0px -1px 0px #eef,0px 1px 1px #113;ms-text-shadow:0px -1px 0px #eef,0px 1px 1px #113; /* CSS 3 */
}

ul.dropdown ul ul {
top:0;
left:100%; /* Position the sub menus to right. */
}

ul.dropdown ul li {
float:none; /* umm.. Appear below the previous one. mmkay? */
}

/* Drop Down! */

/* Hide all the dropdowns (submenus) */
ul.dropdown ul,
ul.dropdown li:hover ul ul,
ul.dropdown ul li:hover ul ul
{ display: none; }

/* Display the submenus only when li are hovered */
ul.dropdown li:hover ul,
ul.dropdown ul li:hover ul ,
ul.dropdown ul li ul li:hover ul
{ display: block;}

ul.dropdown li * a:hover {
/* Change color of links when hovered */
background: #1E1D1D;
background: -moz-linear-gradient( top, #000, #474849);background:-webkit-gradient( top, #000, #474849);background:-ms-linear-gradient( top, #000, #474849);background:-o-linear-gradient( top, #000, #474849);background:linear-gradient( top, #000, #474849); /* CSS 3 */
border-bottom:1px solid #900;
border-top:1px solid #222;
}

Neues Menü

Ich finde die Umsetzung äußerst gelungen und bedanke mich recht herzlich bei Kavin für seine tolle Dokumentation.

Hinweis
Dieser Beitrag bezieht sich auf Codierungen oder/und Funktionen, die ich noch in meinem alten Template umgesetzt habe. Es ist möglich, dass sie in dem aktuellen Blog-Theme nicht übernommen wurden und somit die Darstellung bzw. Funktion nicht mehr existiert.

Die Autorin:

Sylvi

Meine Beiträge beinhalten eigene Erfahrungen über Soft- und Hardware, Social Media und die ich als WordPress-Bloggerin und Joomlanerin gesammelt habe. Zudem widme ich mich dem schönen Hobby "Fotografie".

3 Kommentare

  • Puh ,,, so umständlich brauchte ich mir das jetzt zum Glück nicht machen.

    Das Template welches ich im Einsatz habe hat die Möglichkeit ein individuelles Menü zu ertsellen.

    Dazu gehe ich in die Spalte Design wenn das dann aufgeklappt wird gibt es ein Untermenue mit dem Namen Menüs.
    Und da kann ich alles individuell einstellen.

    Ich war der Meinung das dies auch Standard bei allen gängigen WordPress Themen ist.

    Mein Theme ist übrigens ein mit der Template Generator Software Artisteer erstelltes.

    Für 49,95 € kannst Du unzählige individuelle WordPress Templates generieren die auch viele Einstellungen über Widgets und Themen Optionen ermöglicht.
    (fragen dazu beantworte ich gerne)

    Aber für die Bastler unter den Bloggern die keine Möglichkeit haben, das über die Themen Optionen einzustellen eine schöne Erklärung.

    Bei der Gelegenheit noch ein Hinweis.

    Du hast jetzt das Impressum auf allen Seiten sichtbar.
    Nur kann man auf Anhieb aber nicht erkennen das sich dahinter noch eine Datenschutzerklärung befindet.

    Der sichtbare Navigationsbutton müsste meines Erachtens “Impressum / Datenschutz” heißen.
    Denn nur so erkennt der nicht so webafine Nutzer, das die Datenschutzerklärung auch da ist.

    Darin könnten böswillige Mitbewerber auch noch einen Fehler sehen.

    Vielen Dank Sylvi das Du mein Beitrag als Quelle verlinkt hast.

    Meinen Pingback hast Du und meine socials auch :-)

    Grüße und ein schönes Wochenende.
    Lothar

    • Hej Lothar,

      ein Grund, warum ich mich immer noch nicht von meinem Uralt-Theme trennen kann, ist dass ich über wesentlich weniger Problemlösungen bloggen könnte. :mrgreen: Ein perfektes Premium-Template wäre fast langweilig, obwohl ich ja schon mit solch einem liebäugle.

      Artiseer habe ich mir auch bereits angeschaut. Aber solange mein Good-Old-Smoky alle Upates und Plugins “überlebt”, bleibe ich bei ihm. Okay, es sieht mittlerweile zwar ganz anders aus, als ich es damals installiert hatte und wurde um etliche Funktionen erweitert, aber es funktioniert … bis auf diverse Ausnahmen. Diese Ausnahmen bekomme ich auch meist hin und “verblogge” das dann.;-)

      Der sichtbare Navigationsbutton müsste meines Erachtens “Impressum / Datenschutz” heißen.

      Okay, das war mir nicht ganz klar. Ich hatte angenommen, dass separate Seiten – wie auch immer bezeichnet – ausreichen. Danke!

      Dir auch ein schönes Wochenende,
      Sylvi