List like select dropdown with jQuery?

Question

Please,

I want to simulate dropdown select, but there will be just links, no form. Trouble is how to have selected, and visible category or subcategory link where You are currently?

<ul><li>Category
   <ul>
     <li>Subcategory1</li>
     <li>Subcategory2</li>
   </ul>
</li></ul>

So, when you are on the Category, visible will be name of Category and this is easy because its first LI, but when you are on subcategory then the name of the subcategory will be "selected" and visible.

If you have some other solution then list, suggest me.

Sorry for my english i don't know how to explain better :)

Answer 1

I think you are looking for Suckerfish Dropdowns.

Answer 2

If I understand you correctly, it sounds to me like you just need a couple div elements. One to show the currently-selected item, and the other to show the entire menu (minus the current element?).

If that is the case, you can attach a click event to each menu item that will update the text of the top div:

<div id="current_page">Default Value</div>
<div id="current_menu">
  <ul>
    <li><a href="page1.html">Page 1</a></li>
    <li><a href="page2.html">Page 2</a></li>
  </ul>
</div>

Then you'll use jQuery to add some effects and logic:

$("#current_page").click(function(){
  $("#current_menu").slideToggle();
});

$("#current_menu a").click(function(event){
  event.preventDefault(); //prevent synchronous loading
  $("#current_page").html($(this).text());
});

Answer 3

After each click you need to set the class of the appropriate li by iterating over the list items and checking against the current location:

<div id="div1">
    <ul>
    <li>Category
        <ul>
            <li><a href="abc">Subcategory1</a></li>
            <li><a href="xyz">Subcategory2</a></li>
        </ul>
    </li>
    </ul>
</div>

Then your javascript:

var loc = window.location;
$("#div1 li").each( function(){
    var a = $("a", this).attr("href");
    if(a == loc){
        $(this).addClass("hilight");
    } else {
        $(this).removeClass("hilight");
    }
});