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

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());
});