Title: [ How To ] Dynamic WordPress menu with animated JavaScript drop-downs
Last modified: August 19, 2016
---
# [ How To ] Dynamic WordPress menu with animated JavaScript drop-downs
* [korythewebguy](https://wordpress.org/support/users/korythewebguy/)
* (@korythewebguy)
* [17 years, 7 months ago](https://wordpress.org/support/topic/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](http://www.leigeber.com/2008/04/sliding-javascript-dropdown-menu/)
* 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](http://sandbox.leigeber.com/dropdown/dropdown.js)
and insert it somewhere between your theme’s ` ` tags as follows:
* ``
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:
* ``
* **STEP 2:**
Put this PHP snippet into your template where your horizontal menu
bar should be:
* ```
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(' 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(''.PHP_EOL);
}
// Otherwise, let's call it a day... err, end the loop.
_e(''.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](http://sandbox.leigeber.com/dropdown/dropdown.css)
* 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](https://wordpress.org/support/users/janapriya/)
* (@janapriya)
* [17 years, 7 months ago](https://wordpress.org/support/topic/how-to-dynamic-wordpress-menu-with-animated-javascript-drop-downs/#post-897123)
* This is great! Thanks mate! it is going to be active in [http://www.janapriya.net](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.
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](https://wordpress.org/support/users/korythewebguy/)
* (@korythewebguy)
* [17 years, 7 months ago](https://wordpress.org/support/topic/how-to-dynamic-wordpress-menu-with-animated-javascript-drop-downs/#post-897172)
* 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:
* ```
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(' 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(''.PHP_EOL);
}
// Otherwise, let's call it a day... err, end the loop.
_e(''.PHP_EOL);
}
}
?>
```
* [Indojepang](https://wordpress.org/support/users/indojepang/)
* (@indojepang)
* [17 years, 6 months ago](https://wordpress.org/support/topic/how-to-dynamic-wordpress-menu-with-animated-javascript-drop-downs/#post-897216)
* 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.
## Tags
* [dropdown](https://wordpress.org/support/topic-tag/dropdown/)
* [javascript](https://wordpress.org/support/topic-tag/javascript/)
* [menu](https://wordpress.org/support/topic-tag/menu/)
* [page](https://wordpress.org/support/topic-tag/page/)
* [top-level](https://wordpress.org/support/topic-tag/top-level/)
* 3 replies
* 3 participants
* Last reply from: [Indojepang](https://wordpress.org/support/users/indojepang/)
* Last activity: [17 years, 6 months ago](https://wordpress.org/support/topic/how-to-dynamic-wordpress-menu-with-animated-javascript-drop-downs/#post-897216)
* Status: not a support question
## Topics
### Topics with no replies
### Non-support topics
### Resolved topics
### Unresolved topics
### All topics