Create an Attractive jQuery Menu with Fadein and Fadeout Effect

Introduction

I got this tutorial request from a reader, if you have any request at all, please contact me, give me some suggestions for the upcoming tutorial! :)

Apparently, I have seen this kind of menu before, in Dragon Interactive . During the implementation, I was having a bit of problem, I thought it's just a simple fadein and fadeout effect, but it actually required a lot of CSS works and the right images.

3. Javascript

We are using the jQuery built-in fade in and face out effect. First of all, we need to append the div.hover to the list. After that, just a normal mouse hover event with the fadein and fadeout transition.

Conclusion

This is it, I haven't tested it on IE6 (I don't have one :()... if you having problem with that, please let me know, hopefully I will able to find a way to solve it, or if you can come out with a solution that'd be highly appreaciated! :) Thanks.

Last but not least, I need your support :) If you like this article, please help me to promote it by adding this post to your bookmark. Or you can subscribe to my RSS for more jQuery tutorial and design inspiration posts! Thanks!

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Good article, but not many examples are here. If anybody needs AJAX jQuery menu, it can be found in this article: Good article, but not many examples are here. If anybody needs AJAX jQuery menu, it can be found in this article:

Hey Kevin,
Thanks for the great tutorial! I actually incorporated this into my WordPress theme with custom menus and it works great. However, the one issue I'm running into is the sub menus and I was hoping you could offer some insight.

The sub menus are adopting the same overstate effect and height from the primary nav. I actually want the sub menus to be thinner and not have the cool Jquery effect. I've been toying around with this for some hours but then figured I'd ask the creator of the program to begin with :)