[ How To ] Dynamic WordPress menu with animated JavaScript drop-downs
-
The follow PHP snippet is made to be used with LEIGEBER.com sliding javascript dropdowns
It will automatically get all of your WordPress top-level Pages, then output the necessary HTML. All you need to do is…
STEP 1:
Download the dropdown.js file from LEIGEBER.com and insert it somewhere between your theme’s<head> </head>
tags as follows:<script type="text/javascript" src="dropdown.js"></script>
TIP: Make sure you modify thesrc=""
portion of the above code to point to the folder on your server where dropdown.js is. I typically put it within my theme’s folder, so mine would look something like this:<script type="text/javascript" src="/wp-content/themes/ThemeNameGoesHere/dropdown.js"></script>
STEP 2:
Put this PHP snippet into your template where your horizontal menu bar should be:<?php // Query the database for all top-level page IDs, and store them in the $menuPages array under the [ID] sub-array $menuPages = $wpdb->get_results("SELECT ID FROM $wpdb->posts WHERE post_parent=0 AND post_type='page' ORDER BY ID ASC"); // For each element in the $menuPages array, get the value from the [ID]-subarray to create the top-level menu and it's children foreach($menuPages as $menuItem){ $menuItemTitle = get_the_title($menuItem->ID); $menuItemPermalink = get_permalink($menuItem->ID); if (isset($menuItemTitle)){ _e('<dl class="dropdown" id="wpMenuItemID_'.$menuItem->ID.'">'.PHP_EOL); _e('<dt id="'.$menuItem->ID.'-ddheader" onmouseover="ddMenu('.$menuItem->ID.',1)" onmouseout="ddMenu('.$menuItem->ID.',-1)">'.PHP_EOL); _e('<a href="'.$menuItemPermalink.'" class="topLevelLink">'.$menuItemTitle.'</a>'.PHP_EOL); _e('</dt>'.PHP_EOL); // Run wp_list_pages to fetch any children, and put the HTML <LI> list results into $menuItemChildren as a string $menuItemChildren = wp_list_pages('title_li=&echo=0&depth=1&sort_column=menu_order&child_of='.$menuItem->ID); // If results were returned, $menuItemChildren is now a string with HTML in it, so create a drop-down and echo out the HTML if($menuItemChildren){ _e('<dd id="'.$menuItem->ID.'-ddcontent" onmouseover="cancelHide('.$menuItem->ID.')" onmouseout="ddMenu('.$menuItem->ID.',-1)">'.PHP_EOL); _e('<ul>'.PHP_EOL); echo $menuItemChildren . PHP_EOL; _e('</ul>'.PHP_EOL); _e('</dd>'.PHP_EOL); } // Otherwise, let's call it a day... err, end the loop. _e('</dl>'.PHP_EOL); } } ?>
STEP 3:
Use a CSS file to customize the look & feel of your drop-downs.If you need a place to start, you can download the pre-made CSS file from LEIGEBER.com
Voila! You now have a horizontal WordPress menu-bar with nifty JavaScript sliding dropdowns, and what’s more, it will automatically update every time you add a new sub-page.
-
This is great! Thanks mate! it is going to be active in http://www.janapriya.net within few hours.
I can’t believe you have published this yesterday and I was searching the samething today :D.
Hope following will help for the people who come across problems using this method.
1. while linking the javascript file to the header.php, it is better to use the following.
<script type=”text/javascript” src=”<?php bloginfo(‘url’); ?>/wp-content/themes/ThemeNameGoesHere/dropdown.js”></script>
This fix makes sure, above javascript file is properly linked even when WP is installed in a subdirectory of the server.2. people who want to use the “menu-order” of pages to order the horizontal links, replace the 3rd line from the above code with following.
$menuPages = $wpdb->get_results(“SELECT ID FROM $wpdb->posts WHERE post_parent=0 AND post_type=’page’ AND post_status=’publish’ ORDER BY menu_order ASC”);
Also, above AND post_status=’publish’ will make sure WP list only the published pages.Great revisions, janapriya – Thanks for making note of them!
Here’s the snippet from above, but with janapriya’s update to ensure only PUBLISHED top-level items are shown, and shown according to the WordPress menu order:
<?php // Query the database for all top-level page IDs, and store them in the $menuPages array under the [ID] sub-array $menuPages = $wpdb->get_results("SELECT ID FROM $wpdb->posts WHERE post_parent=0 AND post_type='page' AND post_status='publish' ORDER BY menu_order ASC"); // For each element in the $menuPages array, get the value from the [ID]-subarray to create the top-level menu and it's children foreach($menuPages as $menuItem){ $menuItemTitle = get_the_title($menuItem->ID); $menuItemPermalink = get_permalink($menuItem->ID); if (isset($menuItemTitle)){ _e('<dl class="dropdown" id="wpMenuItemID_'.$menuItem->ID.'">'.PHP_EOL); _e('<dt id="'.$menuItem->ID.'-ddheader" onmouseover="ddMenu('.$menuItem->ID.',1)" onmouseout="ddMenu('.$menuItem->ID.',-1)">'.PHP_EOL); _e('<a href="'.$menuItemPermalink.'" class="topLevelLink">'.$menuItemTitle.'</a>'.PHP_EOL); _e('</dt>'.PHP_EOL); // Run wp_list_pages to fetch any children, and put the HTML <LI> list results into $menuItemChildren as a string $menuItemChildren = wp_list_pages('title_li=&echo=0&depth=1&sort_column=menu_order&child_of='.$menuItem->ID); // If results were returned, $menuItemChildren is now a string with HTML in it, so create a drop-down and echo out the HTML if($menuItemChildren){ _e('<dd id="'.$menuItem->ID.'-ddcontent" onmouseover="cancelHide('.$menuItem->ID.')" onmouseout="ddMenu('.$menuItem->ID.',-1)">'.PHP_EOL); _e('<ul>'.PHP_EOL); echo $menuItemChildren . PHP_EOL; _e('</ul>'.PHP_EOL); _e('</dd>'.PHP_EOL); } // Otherwise, let's call it a day... err, end the loop. _e('</dl>'.PHP_EOL); } } ?>
gonna try this.. thanks a lot korythewebguy!
- The topic ‘[ How To ] Dynamic WordPress menu with animated JavaScript drop-downs’ is closed to new replies.