How To Add Multi Level jQuery Navigation Menu To Thesis WordPress Theme

After moving my blog to Thesis WordPress theme, I realized that the default navigation menu of thesis theme is not so good and it’s not much attractive. I have seen few blogs are using jQuery based navigation menu these days. jQuery based navigation menu gives the smooth effect and it looks great on a blog. In this tutorial I’m going to share tutorial on adding a jQuery smooth navigation menu to thesis WordPress theme.

Note: Please take backup of your custom.css and custom_functions.php file before making any changes to your theme.

How to add jQuery Navigation Menu to Thesis theme

In this tutorial I’m going to use the script provided by DynamicDrive called as Smooth Navigation Menu. Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair.

Demo: Click here for a demo.

1. First of all download the following 4 files and upload these files to the root directory of your WordPress blog.
   • ddsmoothmenu.js
   • ddsmoothmenu.css
   • 2 images –
2. Now go to Thesis -> Design Options and paste the following code in Embedded Scripts under JavaScript tab.

   DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
   
   <link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />
   
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   <script type="text/javascript" src="ddsmoothmenu.js">
   /***********************************************
   * Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
   * Provided for Thesis WordPress Theme users by TricksDaddy (www.tricksdaddy.com)
   * This notice MUST stay intact for legal use
   * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
   ***********************************************/
   </script>
   
   <script type="text/javascript">
   
   ddsmoothmenu.init({
   mainmenuid: "smoothmenu1", //menu DIV id
   orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
   classname: 'ddsmoothmenu', //class added to menu's outer DIV
   //customtheme: ["#1c5a80", "#18374a"],
   contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
   })
   
   ddsmoothmenu.init({
   mainmenuid: "smoothmenu2", //Menu DIV id
   orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
   classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
   //customtheme: ["#804000", "#482400"],
   contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
   })
   
   </script>

3. Click on the Save Button.
4. Now go to Thesis -> Custom File Editor and select custom_functions.php file.
5. Copy and paste the following code in custom_functions.php file.

   function jquery_menu() {
   ?>
   <div id="smoothmenu1" class="ddsmoothmenu">
   <ul>
   <li><a href="http://www.dynamicdrive.com">Item 1</a></li>
   <li><a href="#">Folder 0</a>
   <ul>
   <li><a href="#">Sub Item 1.1</a></li>
   <li><a href="#">Sub Item 1.2</a></li>
   <li><a href="#">Sub Item 1.3</a></li>
   <li><a href="#">Sub Item 1.4</a></li>
   <li><a href="#">Sub Item 1.2</a></li>
   <li><a href="#">Sub Item 1.3</a></li>
   <li><a href="#">Sub Item 1.4</a></li>
   </ul>
   </li>
   <li><a href="#">Folder 1</a>
   <ul>
   <li><a href="#">Sub Item 1.1</a></li>
   <li><a href="#">Sub Item 1.2</a></li>
   <li><a href="#">Sub Item 1.3</a></li>
   <li><a href="#">Sub Item 1.4</a></li>
   <li><a href="#">Sub Item 1.2</a></li>
   <li><a href="#">Sub Item 1.3</a></li>
   <li><a href="#">Sub Item 1.4</a></li>
   </ul>
   </li>
   <li><a href="#">Item 3</a></li>
   <li><a href="#">Folder 2</a>
   <ul>
   <li><a href="#">Sub Item 2.1</a></li>
   <li><a href="#">Folder 2.1</a>
   <ul>
   <li><a href="#">Sub Item 2.1.1</a></li>
   <li><a href="#">Sub Item 2.1.2</a></li>
   <li><a href="#">Folder 3.1.1</a>
   <ul>
   <li><a href="#">Sub Item 3.1.1.1</a></li>
   <li><a href="#">Sub Item 3.1.1.2</a></li>
   <li><a href="#">Sub Item 3.1.1.3</a></li>
   <li><a href="#">Sub Item 3.1.1.4</a></li>
   <li><a href="#">Sub Item 3.1.1.5</a></li>
   </ul>
   </li>
   <li><a href="#">Sub Item 2.1.4</a></li>
   </ul>
   </li>
   </ul>
   </li>
   <li><a href="http://www.tricksdaddy.com/category/thesis-customization">Thesis Customization</a></li>
   </ul>
   <br style="clear: left" />
   </div>
   <?php
   }
   add_action('thesis_hook_after_header', 'jquery_menu');

6. Save your page.

That’s all for adding a smooth jQuery navigation menu to thesis WordPress theme.

I hope you enjoyed this tutorial. I’m waiting for your feedback on this tutorial. If you have any query related to it, do not hesitate to leave your comments.