WordPress › Support » [ How To ] Dynamic WordPress menu with animated JavaScript drop-downs

korythewebguy
Member
Posted 3 years ago #

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 the src="" 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.

janapriya
Member
Posted 3 years ago #

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.

korythewebguy
Member
Posted 3 years ago #

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);
			}
		}
?>

Indojepang
Member
Posted 3 years ago #

gonna try this.. thanks a lot korythewebguy!

Topic Closed

This topic has been closed to new replies.

WordPress.org

Forums

[ How To ] Dynamic WordPress menu with animated JavaScript drop-downs (4 posts)

Topic Closed

About this Topic

Tags

Code is Poetry