The quest for the perfect Vertical menu…
Part 1 of this tutorial described step by step process of building horizontal multilevel nested menu for Wordpress Thesis theme. Part 2 will continue on to enhance this functionality. Here we will add “dark” version of horizontal navigation menu and I will teach you how to switch between “bright” and “dark” version. Part 2 is the superset of Part 1. It includes all from Part 1 + adds more cool stuff.
Main idea that I wanted to present is adding vertical menu to Thesis theme (and to Wordpress in general). I was looking for really flexible, SEO friendly and multi-browser compatible vertical menu that would allow to create unlimited nesting levels.
WEB has tons of pages on the subject but when I started to try all these samples – they either broke down, fallen apart, supported only limited number of levels or misbehaved in Gates+Ballmer’s junksplorer 6. Finally I got back to tried and trusted Dynamic Drive menus as their vertical samples proved to be a nice case that fits my stringent requirements. I had to significantly modify them though to make sure it fits Thesis model.
The quest for perfection continues…
I spent about 16 hours searching, assembling, testing, fixing, polishing and tuning vertical menu’s CSS and .js code and 3/4 of time was spent making it to work in MSIE 6.
Anyways, I was happy with the final result. Resulted vertical navigation menu has all the same benefits that horizontal menu has.
Having ability to add vertical menu is very important to about 70-80% of portals on the web. Horizontal menus have limited “space” to accomodate many menu choices but vertical menu does not have this limitation and would help immensely. So here we go.
Lots of steps to make it happen are already described in part 1 of tutorial so this will make it for a bit shorter one, but with much more feature rich results.
So here it goes:
Building SEO friendly, vertical, multilevel, hierarchically nested menu for Wordpress and Thesis theme. Step by Step
(…what you never thought possible…)
- Install exec php plugin and activate it. We will need it because I will use PHP inside the text widget to emit vertical menu’ HTML code.
- Do steps 1 – 6 from part 1 of tutorial. Basically you need to install and activate use NAVT plugin + visually build your menu. Make sure your menu group name is ‘menu1′. This name is hardcoded in custom_functions.php
- Click on the ‘gear’ icon for your ‘menu1′ group to edit it’s properties:
- Follows Steps 7.1 -7.3 of Part 1 tutorial to set “Options”, “Display” and “CSS” tabs settings.
- Now click on the “Theme” tab of this dialog. We will overwrite number of settings there (if you been following step 1). This is ok – you will not lose anything – but these changes are needed because I’ve changed some code from step 1.
Here’s how this dialog needs to be filled in:- Inside of “Theme xpath:” area enter this code (it commands to replace any tag with these classes):
.jquerycssmenu, .jqueryslidemenu - Set “Action” to “Replace with”
- Inside of “Add tags before navigation group” area enter this code:
<div class='jquerycssmenu' style='margin-top:5px;'> - Inside of “Add tags after navigation group” area enter this code:
<br style='clear: left' /></div> - Click on [save/close] button.
- Inside of “Theme xpath:” area enter this code (it commands to replace any tag with these classes):
- Now go to Wordpress admin panel -> Appearance -> Widgets.
- Drag “Text” widget (from the big “Available widgets” area) into “Sidebar 1″ area on the right. We will be adding code into the Text widget that will help us to materialize vertical menu.
NOTE: I presume you have “Sidebar 1″ in existence. Thesis options allows you to turn it off – but for the sake of this tutorial let make it be. - Once you dragged and dropped this widget – it will opens like a flower (I am feeling romantic now that MSIE struggle is over).
- In “Title” area enter “World’s best vertical menu”… Well, feel free to use your creativity – that text will go above your newly born vertical menu.
- In big area for text – enter this 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;
?> - Press [Save] button, click on “Close” link.
- Download updated set of files here.
This archive includes:- Updated version of “bright” horizontal menu code
- “Dark” version of horizontal menu
- Vertical menu codes
- Updated version of custom_functions.php
- Now you need to unzip this archive and upload it into the ‘custom’ directory of your Thesis theme.
Note: if you have done any customizations inside custom_functions.php – you’d need to merge them. If not – feel free to overwrite it with my version. - Voila! Now you may reload your website and see the same “bright” horizontal menu + neato vertical menu in the left sidebar.
- BONUS task: Let change “bright” horizontal menu onto the “dark” color scheme.
- Inside custom_functions.php file:
replace this code:
echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
//echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
with this code:
//echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
Basically we are commenting out one line and uncommenting the other one. - Now go to Wordpress admin->Tools->NAVT Lists and click on abovementioned “gear” icon to edit properties of your ‘menu1′ group.
- Click “Theme” tab.
- Inside of “Add tags before navigation group” area enter this code:
<div class='jqueryslidemenu' style='margin-top:5px;'> - Now – reload your page – and your main horizontal navigation menu “magically” became dark, something like that:
Thesis theme - multilevel nested CSS menu - dark palette
Dark color palette may be more suitable for certain sites than the light color one. So now you have a freedom of choice in your life!
- To get back to “bright” color scheme – just undo above “Bonus” steps.
- Inside custom_functions.php file:
- Conclusion:
I love Thesis Theme, I love Wordpress and I love the fact that we have a ways to add decent navigation menus to our portals.
$20
Enjoy!
Gleb Esman
{ 5 comments }
