it-swarm.com.de

Wie erstelle ich ein Dropdown-Menü wie in elfundzwanzig Thema?

Ich mag die Dropdown-Menü-Lösung von 21 Themen wirklich:

http://twentyelevendemo.wordpress.com/

und möchte ein ähnliches erstellen, aber ich kann mir nicht vorstellen, wie es funktioniert, oder basiert es auf einem vorhandenen Code für Dropdown-Menüs?

Gibt es einen Quellcode, der verwendet werden kann, oder kann jemand das Prinzip dahinter erklären?

Ich weiß, das Internet ist voll von js- und nicht-js-Lösungen, ich habe sogar einige selbst gemacht, aber IMO kommt nichts in die Nähe dieses Menüs, daher wird Hilfe geschätzt :)

3
CodeVirtuoso

Genau das habe ich kürzlich gemacht. Sie sind sich nicht sicher, wie weit Sie sind, sodass Sie möglicherweise bereits einige dieser Dinge kennen.

Ich fand dieses Video sehr gut (+ es ist der zweite Teil)

Ich denke, eines der ursprünglichen Forschungsergebnisse war das

Ich denke Twenty Eleven benutzt auch das Superfish JQuery Plugin

Wie auf dem anderen Poster bereits erwähnt, befindet sich der elfundzwanzigste Code irgendwo in den Themendateien

1
byronyasgur

Hier ist ein kurzer Ausschnitt, mit dem ich meine Projekte beginnen kann:

Der erste Schritt ist das Hinzufügen von Code zur Datei functions.php. Dies ist es, was die benutzerdefinierte WordPress-Navigation ermöglicht. Sobald Sie fertig sind, befinden sich die Steuerelemente unter Darstellung> Menü. Code für functions.php:

<?php
add_action( 'init', 'register_my_menus' );
function register_my_menus() {
register_nav_menus(
array(
    'main' => __( 'main' ),
    'secondary-menu' => __( 'Secondary Menu' ),
    ));
}
?>

Der obige Code erlaubt zwei Menüs. Ich zeige Ihnen, wie Sie eine hinzufügen, und wenn Sie möchten, können Sie auf dieselbe Weise eine zweite hinzufügen, wo immer Sie möchten.

Der nächste Schritt ist das Hinzufügen des Codes zur Datei header.php. Beachten Sie, dass das erste Menü im Array mit main gekennzeichnet ist. Dies ist, was wir verwenden, um das Menü in der header.php zu platzieren.

Hier ist der Code für die header.php:

<div id="menu" class="menu-center">
    <?php wp_nav_menu( array( 'theme_location' => 'main' ) ); ?>
</div>

Dies sollte in Ihrem <div id="header"> div sein (es ist nicht obligatorisch, aber der häufigste Ort für den Code.

Der letzte Schritt ist das Hinzufügen von CSS, um das Menü zu gestalten und es tatsächlich als "Dropdown" zu definieren, anstatt einer Reihe von mehrstufigen Links.

Der CSS-Code:

ul.menu,ul.menu ul,ul.menu li,ul.menu a {
display:block;
margin:0;
padding:0;
}

ul.menu ul {
display:none;
}
ul.menu li:hover {
z-index:999;
}
ul.menu li:hover > ul {
display:block;
position:absolute;
float:left;
}
ul.menu li {
float:left;
width:auto;
}
ul.menu ul li {
float:left;
width:190px;
}
ul.menu ul li ul {
float:left;
width:190px;
position:absolute;
left:100%;
top:0;
}
ul.menu-ver,ul.menu-ver ul {
width:14em;
}

div.menu-center ul.menu {
float:left;
position:relative;
left:50%;
}

div.menu-center ul.menu li {
position:relative;
left:-50%;
}

div.menu-center ul.menu li li {
left:auto;
}


ul.menu li a {
border-bottom:1px outset ghostwhite;
}

ul.menu li a {
padding:8px 12px 10px;
}

ul.menu li a:link,ul.menu li a:hover,ul.menu li a:visited,ul.menu li a:active {
text-decoration:none;
border-bottom:1px outset black;
}


ul.menu li {
background: #45484d;
background: -moz-linear-gradient(top, #45484d 0%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000));
background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%);
background: -o-linear-gradient(top, #45484d 0%,#000000 100%);
background: -ms-linear-gradient(top, #45484d 0%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 );
background: linear-gradient(top, #45484d 0%,#000000 100%);
}
.menu-center {
float:right;
margin-right:95px;
}

ul.menu li a{
color:ghostwhite;
}
ul.menu li a:hover {
background: #efefef;
background: -moz-linear-gradient(top, #efefef 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #efefef 0%,#ffffff 100%);
background: -o-linear-gradient(top, #efefef 0%,#ffffff 100%);
background: -ms-linear-gradient(top, #efefef 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#ffffff',GradientType=0 );
background: linear-gradient(top, #efefef 0%,#ffffff 100%);
color:black;
}

Sie können mit dem CSS spielen, um es Ihren Wünschen anzupassen, aber das sollte Ihnen den Einstieg erleichtern.

Für WordPress 3.3-Kompatibilität bearbeitet:

Nach dem Update auf die neueste Version von WordPress (v3.3) scheint das Menü nicht mehr zu funktionieren, wenn Ihr Theme den after_setup_theme-Hook verwendet und Sie den 'init'-Hook zum Registrieren der Menüs verwenden.

Die Reparatur:

In diesem Beispiel verwende ich den Namen yourtheme als Funktionsname .

Beispiel Datei functions.php:

<?php
if ( ! isset( $content_width ) )
$content_width = 610;
add_action( 'after_setup_theme', 'yourtheme_setup' );
if ( ! function_exists( 'yourtheme_setup' ) ):
function yourtheme_setup() {
  // Adds styles the visual editor (editor-style.css)
  add_editor_style();
  add_theme_support( 'automatic-feed-links' );
  //Register Custom Menu's
    register_nav_menus(
      array(
        'main' => 'main',
        'secondary' => 'secondary',
        )
      );  
  // Add Post Thumbs and Custom Image Sizes
  add_theme_support( 'post-thumbnails', array( 'post' ) );
  // Add support for a variety of post formats
  add_theme_support( 'post-formats', array( 'aside', 'link', 'gallery', 'status', 'quote', 'image' ));
  }
endif; // yourtheme_setup
/**
 * Start the rest of your functions.php file code...
 * 
 */
?>

In der Datei TwentyTen Themes functions.php finden Sie weitere Funktionen, die im after_theme_setup-Hook enthalten sein müssen.

4
Jeremy Jared