Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Metronic side menu staying open through postback


I've set the Metronic side menu to start in a collapsed position. When the user opens the menu and docks it to the browser, I would like the menu to stay open through postbacks.
How can I accomplish this>


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (11)


(also - don't know if this is important, but I'm using this with .NET 5 Razor MVC)



Hi,

Since the postback reloads the page the menu state should be set during the HTML code generating by adding special classes to set any menu node active. In classic web apps, the menu is generated for each page and the active menu link is highlighted by adding required classes. Otherwise, if you use Javascript to activate the menu active item user may notice the menu activation on page load which is not a good user experience. So please refer to any template from the Metronic download page and refer to the menu items and see the classes that activate the menu active link and its submenus.

Regards.



I'm having trouble following the bouncing ball through the code.
Seems like you're telling me to examine other pages to find out what changes when the side menu is expanded...

Can you just give me a javascript or jquery line that will open the side menu?



I think this works:
document.getElementById('kt_aside_toggle').click();



You can also use the KTToggle API as shown below:


var toggleEl = document.querySelector("#kt_aside_toggle");
KTToggle.getInstance(toggleEl).toggle();


Regards.



THAT's EXACTLY what I was looking for!! Works much better than trying to force a click event!
Thank you...



Glad to point you out happy


Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.

In a similar way, can you tell me the script to call to toggle dark mode vs light mode?



Hi,

The dark mode switch support will be released in the next update soon.
Please wait for the next update to use Metronic with latest Bootstrap 5.2 and improved dark mode with light/dark mode change without page reload.

Regards.



Can you tell me when the next update will be released with the improved "Dark Mode" toggle? We are REALLY interested in using Dark Mode...

Also - the concern I have here is that I am using your templates, but customizing them heavily. I need to not lose my customizations, so I'll need to know how to "surgically" add the new dark mode functionality to my current code base....



Hi,

The dark mode was released 2 days aga with Metronic v8.1 update.


Regards.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(