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

  • korythewebguy

    (@korythewebguy)


    16 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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • janapriya

    (@janapriya)

    This is great! Thanks mate! it is going to be active in https://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.

    Thread Starter korythewebguy

    (@korythewebguy)

    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

    (@indojepang)

    gonna try this.. thanks a lot korythewebguy!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[ How To ] Dynamic WordPress menu with animated JavaScript drop-downs’ is closed to new replies.