Die Suche nach dem perfekten Vertical-Menü ...
Teil 1 dieses Tutorials beschrieben Schritt für Schritt Prozess des Aufbaus horizontale mehrstufige verschachtelte Menü für Wordpress Thesis Thema . Teil 2 wird auch weiterhin auf, um diese Funktionalität zu verbessern. Hier werden wir hinzufügen, "dark"-Version der horizontalen Navigation und ich werde Ihnen zeigen, wie zwischen "hell" und "dunkel"-Version wechseln können. Teil 2 ist die Obermenge von Teil 1. Es enthält alle aus Teil 1 + noch mehr coolen Sachen.
Der Grundgedanke, dass ich zeigen wollte ist das Hinzufügen von vertikalen Menü Thesis Thema (und Wordpress im Allgemeinen). Ich war für wirklich flexible, SEO freundlich und Multi-Browser kompatibel vertikalen Menü, lassen unbegrenzte Verschachtelungsebenen schaffen machen möchte.
WEB hat Tonnen von Seiten zum Thema, aber wenn ich zu all diesen Proben versuchen begonnen - sie entweder brach, zerfallen, unterstützt nur eine begrenzte Anzahl von Ebenen oder schlecht benommen in Gates + Ballmer ist junksplorer 6. Endlich habe ich wieder auf bewährte Dynamic Drive-Menüs wie ihre vertikalen Proben erwies sich als eine nette Fall, dass meine Anforderungen passt. Ich musste erheblich verändern sie aber sicherstellen, dass es passt Thesis Modell.
Das Streben nach Perfektion geht weiter ...
Ich habe ca. 16 Stunden Suche, Montage, Prüfung, Befestigungstechnik, Polier-und Tuning vertikale Menüs CSS und. Js-Code und 3 / 4 der Zeit machte es in MSIE 6 zu arbeiten.
Wie auch immer, ich war zufrieden mit dem Endergebnis. Führte vertikale Navigationsmenü hat die gleichen Vorteile , die horizontale Menü hat.
Nachdem Fähigkeit, vertikalen Menü hinzuzufügen, ist sehr wichtig, um etwa 70-80% der Portale im Internet. Horizontale Menüs "Raum" begrenzt, viele Menüpunkte, sondern vertikales Menü nicht über diese Einschränkung und würde immens helfen unterzubringen. So here we go.
Viele Schritte, um sie geschehen sind bereits beschrieben in Teil 1 des Tutorials so wird dies es für ein bisschen kürzer zu machen, aber mit viel mehr funktionsreiche Ergebnisse.
So, hier geht es:
Aufbauend SEO freundlich, vertikale, mehrstufige, hierarchisch verschachtelten Menüs für Wordpress und Thesis Thema . Step by Step
(... Was Sie nie für möglich gehalten ...)
- Installieren exec php plugin und aktivieren. Wir brauchen es, weil ich PHP in der Text-Widget nutzen, um vertikales Menü "HTML-Code aussenden.
- Führen Sie die Schritte 1 bis 6 von Teil 1 des Tutorials . Grundsätzlich müssen Sie installieren und aktivieren Verwendung NAVT Plugin + optisch bauen Sie Ihr Menü. Vergewissern Sie sich Ihr Menü Gruppenname ist "menu1". Dieser Name wird in custom_functions.php hardcoded
- Klicken Sie auf den 'Gang' icon für Ihre "menu1 'Gruppe ist es zu bearbeiten:
- Folgt Schritte 7.1 -7,3 Teil 1 Tutorial auf "Options", "Display" und "CSS" Tabs-Einstellungen.
- Jetzt auf dem "Theme"-Registerkarte in diesem Dialog klicken. Wir werden einige Einstellungen dort überschrieben werden (falls Sie bereits folgende Schritt 1). Das ist ok - du wirst nichts verlieren - aber diese Veränderungen sind notwendig, weil ich einige Code aus Schritt 1 geändert haben.
Hier ist, wie dieser Dialog muss ausgefüllt werden:- Im Inneren des "Theme xpath:" Betreten Sie diesen Code (es Befehle, um einen beliebigen Tag mit diesen Klassen zu ersetzen):
.jquerycssmenu, .jqueryslidemenu - Set "Action" auf "Ersetzen durch"
- Im Inneren des "Tags hinzufügen, bevor Navigation group" betreten diesen Code ein:
<div class='jquerycssmenu' style='margin-top:5px;'> - Im Inneren des "Tags hinzufügen nach der Navigation-Gruppe" betreten diesen Code ein:
<br style='clear: left' /></div> - Klicken Sie auf [Speichern / close]-Taste.
- Im Inneren des "Theme xpath:" Betreten Sie diesen Code (es Befehle, um einen beliebigen Tag mit diesen Klassen zu ersetzen):
- > Appearance - -> Widgets Nun zu Wordpress Admin-Panel gehen.
- Ziehen Sie "Text"-Widget (von den großen "Verfügbare Widgets"-Bereich) in die "Sidebar 1" auf der rechten Seite. Wir werden das Hinzufügen von Code in den Text-Widget, das wird uns helfen, vertikalen Menü materialisieren.
HINWEIS: Ich nehme an, Sie haben "Sidebar 1" in Existenz. Thesis Optionen ermöglicht es Ihnen, um sie auszuschalten - aber aus Gründen der dieses Tutorial machen lassen es sein. - Sobald Sie per Drag & Drop Widget - es wird wie eine Blume (Ich fühle mich jetzt, dass romantische MSIE Kampf vorbei ist) wird geöffnet.
- In "Title" betreten "weltbesten vertikalen Menü" ... Na, fühlen Sie sich frei, Ihre Kreativität nutzen - dass der Text wird über das neu geboren vertikales Menü zu gehen.
- In großen Bereich für den Text - geben Sie diesen PHP-Code:
<?php
if (function_exists('navt_getlist'))
$menu_html = navt_getlist ('menu1', false, '', 'ul id="dd_vertical"');
else
$menu_html = "";
$menu_html = preg_replace ('#class=[\'\"]jquery(css|slide)menu[\'\"]#', 'class="dd_vertical"', $menu_html);
echo $menu_html;
?> - Drücken Sie [Speichern]-Taste auf "Schließen"-Link klicken.
- Von Dateien aktualisierten Download hier .
Dieses Archiv beinhaltet:- Aktualisierte Version von "bright" horizontales Menü-Code
- "Dark"-Version von horizontalen Menü
- Vertical Menü-Codes
- Aktualisierte Version der custom_functions.php
- Jetzt müssen Sie das Archiv entpacken und laden Sie sie in die 'custom' Verzeichnis Ihrer Thesis Thema .
Hinweis: Wenn Sie alle Anpassungen innerhalb custom_functions.php getan haben - Sie brauchen würde, um sie zu verschmelzen. Wenn nicht - feel free to es mit meiner Version zu überschreiben. - Voila! Jetzt können Sie Ihre Webseite neu zu laden und sehen die gleiche "hell" horizontales Menü + neato vertikales Menü in der linken Seitenleiste.
- BONUS Aufgabe: Lassen Sie ändern "hell" horizontales Menü auf die "dunkle" Farbschema.
- Innerhalb custom_functions.php Datei:
ersetzen diesen Code ein:
echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
//echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
mit diesem Code:
//echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
Grundsätzlich sind wir Auskommentieren einer Zeile und die Aktivierung der beiden anderen. - Nun zu Wordpress Admin-> Tools-> NAVT Listen und klicken Sie auf oben genannten "Gang"-Symbol um die Eigenschaften der "menu1 'Gruppe bearbeiten.
- Klicken Sie auf "Theme"-Registerkarte.
- Im Inneren des "Tags hinzufügen, bevor Navigation group" betreten diesen Code ein:
<div class='jqueryslidemenu' style='margin-top:5px;'> - Jetzt - laden Sie Ihre Seite - und Ihre wichtigsten horizontalen Navigationsmenü "magisch" wurde dunkel, so etwas:
Thesis Thema - Multilevel verschachtelten CSS-Menü - dunkle Palette
Dunkle Farbpalette können besser geeignet für bestimmte Standorte als die helle Farbe ein. So jetzt haben Sie eine freie Wahl in Ihrem Leben!
- Um wieder in den "hellen" Farbschema - gerade über "Bonus" Schritte rückgängig zu machen.
- Innerhalb custom_functions.php Datei:
- Fazit:
Ich liebe Thesis Theme , ich liebe Wordpress und ich liebe die Tatsache, dass wir eine Art und Weise zu menschenwürdiger Navigationsmenüs auf unseren Portalen hinzuzufügen.
$ 20
Viel Spaß!
Gleb Esman
comments } { 5 Kommentare }
