Welcome to this installment of Bloggy Thursdays, where I share with my fellow bloggers tips and tutorials to maximize and better your blog. While I do not consider myself an expert, I do like to think that after 10+ years of blogging — in addition to my technical knowledge — I know more than the average blogger when it comes to making your blog more appealing to readers.

Do you have any comments, questions, or topics you’d like to see covered here? Please send me a message via my contact form. Enjoy!

Do you use a drop-down menu structure on your blog or website? Would you like that menu to employ a fancy-schmancy sliding animation like I have on my blog? If so, this is the post for you!

The first thing you should know about practically all drop-down menus have as its backbone HTML lists, like so:

1
2
3
4
5
6
7
8
9
10

<ul>
  <li><a href="">Menu Item 1</a></li>
  <li><a href="">Menu Item 2</a>
    <ul>
      <li><a href="">Drop-Down Item 1</a></li>
      <li><a href="">Drop-Down Item 2</a></li>
    </ul>
  </li>
  <li><a href="">Menu Item 3</a></li>
</ul>

(If you are unfamiliar with HTML lists, go check out W3Schools’ article on them.)

In order to add the animation, you need to locate the menu portion of your site’s code. If you are using WordPress, it will most likely be in your header.php file.

Now that you’ve located your menu, look for the TOPMOST <ul> tag. What you want to do now is to add a CSS id selector to that tag. In this example, I will name this id “topNav” so this is what the updated code should look like:

1
2
3
4
5
6
7
8
9
10

<ul id="topNav">
  <li><a href="">Menu Item 1</a></li>
  <li><a href="">Menu Item 2</a>
    <ul>
      <li><a href="">Drop-Down Item 1</a></li>
      <li><a href="">Drop-Down Item 2</a></li>
    </ul>
  </li>
  <li><a href="">Menu Item 3</a></li>
</ul>

The last step is to add the jQuery that will animate your drop-down menu. First, download jQuery and upload it to your webserver if you do not already have it. (If you are using WordPress, don’t worry about this step — WordPress installs come packaged with jQuery.) Then, add the following to the head of your page, before the </body> tag, making sure that the path of the URL (in red below) points to where your jQuery package is located:

 <script type=’text/javascript’ src=’/wp-includes/js/jquery/jquery.js‘></script>

(The path above is where the jQuery file is usually located within WordPress installs.)

Now, for the actual jQuery code. You have two options here. The first is to add the following to your page (the easiest place to insert it would be in the head section, directly below where you placed the jQuery call above):

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script type="text/javascript">
  $(document).ready(function () { 
    $('#topNav li').hover(
      function () {
        //show the submenu
        $('ul', this).hide().slideDown();
      }, 
      function () {
        //hide the submenu
        $('ul', this).slideUp();         
      }
    );
  });
</script>

The second option is to add the above code to a separate JavaScript file and call to it in your page’s head section. But if you have no idea what I just said in the previous sentence, it’s probably not a good idea to attempt this. 😉

And that’s it! You can choose to change the speed of the sliding animation by adding values in the parentheses next to the slideDown and slideUp (see this article to see what options you have). But I personally think that the default speed is a good one for most people.

As always, please let me know if you have any questions by commenting below! Slide away!