WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. korythewebguy
    Member
    Posted 5 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.

  2. janapriya
    Member
    Posted 5 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.

  3. korythewebguy
    Member
    Posted 5 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);
    			}
    		}
    ?>
  4. Indojepang
    Member
    Posted 5 years ago #

    gonna try this.. thanks a lot korythewebguy!

Topic Closed

This topic has been closed to new replies.

About this Topic