Search jQuery

jQuery Forum

Multiple slide out menu

in Getting Started • 9 years ago

Hi,

I am new to jquery, so already excuse me for asking basic questions. I did search the forum but do not really find what I am looking for, although I am sure it must exists somewhere already.

I would like to make a menu with large buttons horizontally positioned next to each other. When one of the buttons in clicked that button should color (as being active) and a slide out should appear undernead the menu with a more detailed submenu and some images. The slide should remain open until another botton of the menu is clicked or when one of the submenu links in the slide out is clicked.

To visualize what I mean you can refer to this CSS3 example: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

The only different is that I want to add some jquery dynamics to it and the slide out should be at the full width of the page.

Thank you very much!

Replies(2)

cpeeyush

Re: Multiple slide out menu

9 years ago

it is better if you will post some of your code here in which you are facing the issue otherwise no one is bale to answer these subjective questions.

wi_v_m

Re: Multiple slide out menu

9 years ago

Hi,

Thanks for your answer. I tested a bit myself and this is what I currently have.

There are 6 link buttons that all open a different DIV that slides out from the bottom of the menu when clicked. This is the jQuery code for one of the 6 buttons. The other 6 are identical apart from the target panel:

            $("#link_w1").click(function () {
                $('ul').find("li").removeClass("highlight");
                $("#menu_item_w1").addClass("highlight");
                $("#menupanel_w1").slideToggle("slow");
                $("#menupanel_m1").hide();
                $("#menupanel_d1").hide();
                $("#menupanel_d2").hide();
                $("#menupanel_b1").hide();
                $("#menupanel_s1").hide();
                return false;
            });

This works fine for what I need. Only I guess the code is abit quick and dirty. Is there a way to do it better? I preferably want to work around my method to hide all other panels in seperate lines. It should basically hider all inactive panels and when the button of the active panel is clicked it should come out or go back in.

Thank you!

Top Reply

Response title

Attachments

jQuery Forum

Multiple slide out menu

Replies(2)

Re: Multiple slide out menu

Re: Multiple slide out menu

Statistics

Tags

Actions