Home/ Questions/Q 8210859
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T10:13:28+00:00

I have created a vertical menu on a ASP.NET master page using jQuery. Here

  • 0

I have created a vertical menu on a ASP.NET master page using jQuery. Here are some items to consider:

  • The menu structure is based on ordered lists . List items have nested items (UL) containing sub-menu options.
  • All sub-menus must appear collapsed when the page is loaded. This is easily done by having display: none for the sub-menu style rule. However, this web site is supposed to run even when Java Script is disabled. So I thought I would se the sub-menu rule style to display: block and change the display back to ‘none’ during $(document).ready(function ()). So if JavaScript is disabled the menu will appear with all sub-menu items already expanded.

The problem:
Currently when JavaScript is enabled, the page is loaded with all sub-menu options expanded and then after jQuery ready method is run the sub-menu are collapsed using:

$('.menu li > .sub-menu').hide();

I would like to show the page with all sub-menu items already collapsed and avoid the collapsing of sub-menu items after the page is loaded. How can I achieve that?

Thank you

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I just found the answer, I think. What you want is to set the CSS for those sub menus to display: none; and then create a duplicate sub menu in a noscript tag. If JS is enabled, the noscript version is not displayed, nor is the other due to the CSS. If JS is disabled, the CSS acts on the JS version but the noscript tag kicks in.

    • 0