Reputation: 1689
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
Reputation: 2768
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
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