larin555
larin555

Reputation: 1689

jQuery Menu - Mouse over

I'm working on a jQuery menu.

Here's the fiddle : http://jsfiddle.net/HZxjb/

What I need, is to be able to browse in each sub-categories. Right now, when the mouse is over "home", well when I want to go over "Text 1", the sub-categories slides back in. How can I stop that?

Also, I would like the sub categories to slide in next to the main categorie. So if my mouse is over "Home", the sub-li will slide next to it. If my mouse is over "Services", the sub-li will slide next to it, so there will be no sub-buttons next to "Home", since "Services" is under it.

Also, if I go from one button to another quickly, you see the sub-buttons appearing under the ones that are on their way back in. How to make this work a way that this won't happen?

Upvotes: 0

Views: 561

Answers (2)

Novak
Novak

Reputation: 2768

http://jsfiddle.net/HZxjb/13/

You don't need to call each one with an id. What I gave you is how you should build your menu.

What I would recommend:

Don't start building complicated things, without knowing the basics.

For example, the next code, is just wrong, no matter how you will look at it:

$(document).ready(function () {
    $(".sub_button_home").hide();
});
$(document).ready(function () {
    $(".sub_button_services").hide();
});
$(document).ready(function () {
    $(".sub_button_products").hide();
});

Not only that you can do that from the CSS (with display: none), you attached 3 functions, instead of one which will include all your code.

I suggest reading jQuery's API to learn the basic structure you should adopt.

Upvotes: 1

Sven Bieder
Sven Bieder

Reputation: 5681

Before you do anything you should at first build some useful html. How do you come to the idea to use list-items without a list? And about the approach to use a table to design the layout of the menu I better say nothing at this point.

You only need unordered nested lists to reach your aim. Google for menus from Stu Nichols. There you will find a lot of possibilities for different menus.

Upvotes: 0

Related Questions