Drop Down Menu issues. Keeping it dropped in certain circumstances

I have a horizontal drop-down menu on my website. It's currently only two levels deep:

<ul><li>Option 1
    <ul><li>Option 1.1
        <ul>
            <li>Option 1.1.1</li>
            <li>Option 1.1.2</li>
        </ul>
    </li></ul>
</li></ul>

The Option 1 layer is always visible. 1.1 is visible upon hover over Option 1 and Option 1.1.1 and 1.1.2 are visible upon hover over Option 1.1

开发者_开发问答

The client has said that they love the drop down menu. However, to get from Option 1.1.1 to Option 1.1.2 involves you navigating the multi-levelled menu again and that's a mechanism they don't like.

I had the idea of detecting what Option page the user is on and then amending the classes so that they are constantly visible. For example: If I was on Option 1.1.1 page the full menu would still be visible allowing easy access to Option 1.1.2

Would it be feasible through JQuery and Javascript to return the Option from the URL and then searching through the multi-levelled menu to add classes to the menu allowing it to behave in a certain way.

I'm not sure where to begin with this.

My URLs are structured as below:

[root]/category.php?alias=option111
[root]/category.php?alias=option112

I'm not sure how I would search through the menu though. Could you provide some help please?

---

First of all you would have to know which alias you're on. You can parse that to javascript using PHP or you can check the document.location.href and fix it with a regular expression.

For example if you found that the alias is option111, you'll have to trigger a mouseover on the menuitems that are needed to get to that menu.

$.document.ready(function() {

    //Fix something that 'alias' is an array and contains the numbers of menuitems that you use in your id structure of the menuitems.

    alias.each(function() {
        $('#menuitem'+$(this)).trigger('mouseover');
    });
});

This is just a concept you can use. I hope you can use this idea.

-edit after your comment-

It might be useful to give you're dropdownmenu id's which are similar to their place in the heirarchy of the . This way you can see which of the dropdownmenu items should be opened using the alias in the url. This way we can loop (we can do this using while, each or whichever you prefer).

var alias = document.location.href.slice(6,0); // getting the alias (ex: 111)
var i = 0;
while(i < alias.length) { //for each alias character (menu, submenu, subsubmenu, etc)
$('#menuitem'+alias.substring(0,i).trigger('mouseover'); //trigger the mouseover for ex #menuitem1, or #menuitem32, or #menuitem152
i++; //increment i to make the loop finite.
}

or, if you're mouseover event shows the menu for a short time, you can use $('#menuitem'+alias.charAt(i)).css('display','block'); instead of

$('#menuitem'+alias.charAt(i)).trigger('mouseover');

---

Have you considered using the menu dropdown that's going to be in jQuery UI 1.9 (and already available in Github?)

You'd need to tweak styles to make your main menu horizontal (and always visible), or alternately treat each of your top level <li> elements as triggers for separate $.menu() items linked off their child <ul> elements.

I've put some demo code at http://jsfiddle.net/tcg2m/12/

It needs some work to figure out how to make the top level menu horizontal instead of vertical.