Sliding HTML navigation menu

manolakis · 07-18-2017, 07:41 PM

Hello,

I want to create a navigation menu on the left of my page which can slide or unhide by clicking a button. Does anybody know how to do that?

frankbell · 07-18-2017, 07:56 PM

Check these two links:

https://www.w3schools.com/howto/howto_js_sidenav.asp

https://www.w3schools.com/howto/howt..._hide_show.asp

You may need to use a bit of javascript.

dugan · 07-19-2017, 01:31 PM

The usual pattern is to have a CSS class that determines whether the menu is hidden. You have Javascript, activated on a click of the button, that adds or remove that CSS class from the menu. For the animation, you use a CSS transition.

JJJCR · 07-21-2017, 01:30 AM

You never explore Bootstrap?

Or Jquery?

Turbocapitalist · 07-21-2017, 04:05 AM

Quote:

Originally Posted by dugan

The usual pattern is to have a CSS class that determines whether the menu is hidden. You have Javascript, activated on a click of the button, that adds or remove that CSS class from the menu. For the animation, you use a CSS transition.

Actually you can even do it in pure CSS, but for the nice effects you have to look through CSS3. The documentation for that is a little hard to navigate but worth it. That will help greatly with usability, maintenance, and security.

However, there are a lot of choices.

manolakis, can you point to some examples or clarify your written description a little more? It will be easier to point to more precise examples.

Turbocapitalist · 07-21-2017, 04:24 AM

Here's an example for CSS toggle that expands underneath. You can play around with it have it expand to the side instead, if that is what you want. You might even be able to set it to trigger on CSS rollovers.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title>CSS Toggle</title>
  <style type="text/css" media="screen">
    summary {
    display: block;
    }
    
    summary::-webkit-details-marker {
    display: none;
    }
    
    summary:: {
    display: none;
    }
    
    summary::before {
    content: '\25B6';
    padding-right: 0.5em;
    }
    
    details[open] > summary::before {
    content: '\25BC';
    }
  </style>
  </head>
  <body>
  <p>Hello World</p>

  <details>
    <summary>Hide / Unhide</summary>
    <p>Now you see it.</p>
  </details>
</body>
</html>