submenu in separate div

snoep / 2008-08-26 15:09:55   

Hi everyone,

i am building a site for a friend, that should have a horizontal navigation.

I tried to solve it like this, but I didn´t manage to get the jquery-code right, does anyone have an idea?

  1. function initVatto() {
  2. var l =  $("#menu ul").length;
  3. for ( var i = 0; i <= l; i++ ) {
  4. item_title = $("#menu ul").eq(i).children(":first");
  5. items = $("#menu ul").eq(i).children().filter(function (index) { return index > 0; });
  6. items.hide();
  7. item_title.css({cursor:"pointer"}).click( function(){
  8. $("#subMenu").empty();
  9. $("#subMenu").append(items);
  10. }); 
  11. }
  12. }

thanks for help!!

Vaska A / 2008-08-26 15:18:29   

Somebody wrote a nice tutorial about horizontal navs recently...I need to start posting this stuff...but I have too many things to do. ;(

I'll try to find it later...

snoep / 2008-08-26 15:23:31   

the site: site

snoep / 2008-08-27 13:22:17   

Hi there!

I found a solution (see below); maybe this is not very elegant as it could be done with css easier I think, but anyway, maybe this is useful to somebody.

  1. function initVatto() {
  2. var l =  $("#menu ul").length;
  3. for ( var i = 0; i <= l; i++ ) {
  4. var item_title = $("#menu ul").eq(i).children(":first");
  5. var items = $("#menu ul").eq(i).children().filter(function (index) { return index > 0; });
  6. items.hide();
  7. item_title.css({ cursor:"pointer" }).click( function(){¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†
  8. $("#subMenu").empty();
  9. // below you have to append an empty ul-tag, it is stripped out, so I comment it here
  10. $("#subMenu").append(ul-tag);
  11. $("#subMenu ul").eq(0).append($(this).nextAll().clone()); 
  12. var trenner = "<span> / </span>";
  13. $("#subMenu ul li").append(trenner);
  14. $("span:last").remove();
  15. $("#subMenu ul li").css({ display: "inline" });
  16. });¬†¬†¬†¬† ¬†¬†¬†¬†
  17. }
  18. }

The function is called from the index.php. Please pay attention to the comment, as the ul-tag was stripped out in my post.

Have a nice day you all, snoep.

Tomorrow / 2009-03-17 19:35:47   

so i just implemented this and its great! thanks!!!!

i have a question though... is there a way to have some exhibits that are not showing the section-title still show up in the "main menu" example...

i am working on a site that is for a photographer and she has her "work" section and in that is exhibits for fashion, portraits, and so on... but she will also have sections like client list and contact... is there a way to show those menu options in the main menu?

the goal is to avoid something like having a section called "contact" and when you click on that it shows one submenu option that has contact... its a bit redundant.

any help on this would be great...

here is the build for the site so far....

again... thanks for any and all help!

This thread has been closed, thank you.