[Elizabeth_Keen]

In this example you hide all the and show the which is it’s sibling, which would ultimately hide the first level of the li and show the second. HTML

• first
  back
  • Second layer Menu 1
  • Second layer Menu 1
  • Second layer Menu 1
  • Second layer Menu 1

CSS:

.second-layer{
display: none;
}

.hide a{
display: none;
}

.show a{
display: none;
}

.show a.back{
display:block;
}

.show .second-layer{
display: block;
}

JQuery:

$(‘.forward’).click(function(){
$(this).parent().addClass(‘show’);
$(this).parent().parent().addClass(‘hide’);
});

$(‘.back’).click(function(){
$(this).parent().parent().removeClass(‘show’);
$(this).parent().parent().parent().removeClass(‘hide’);
});

For innovative methodologies in Web Apps visit http://www.ati-erp.com

[Elizabeth_Keen]

This should help you out. very elegant and clean.

http://css-tricks.com/long-dropdowns-solution/

For Innovative Methodologies in web apps visit http://www.ati-erp.com

[Author]

Posts