Hamburger Menu With Classless CSS

I have been wanting to set up a hamburger menu on this site. It gives me more flexibility with menu item names and how many things can be on there. Here is how I got it done.

I ended up using the <details> hack to make it show an hide because my phone there is no hover. Only clicking.

This uses no class. Just the HTML element order. I am sure I will tweak it over time. I like tinkering with this stuff, but this appears to be fully functional on Chromium and Firefox.

First here’s the scss.

header
{
  h1 {
  font-size: 2.5rem;
  color: var(--site-title);
}
nav 
{
 details {
   summary {
             display:inline-block;            

           font-size: 1.5rem;

    font-family: var(--Sans);
    text-decoration: none;
    font-weight: bold;
    color: var(--nav-item);
    border-radius: .3rem;
    border: .2rem var(--nav-border);
    border-style: outset;
    background-image:  var(--nav-gradient);
    
    text-shadow: .01rem .01rem .01rem var(--nav-button-border);
    box-shadow: .1rem .1rem .25rem .25rem var(--nav-button-border);
    transition: .25s all ease-in-out .1s;
    //align-items: center; 
        &:hover {
      border-style: inset;
      color: var(--nav-hover);
      background-image: var(--nav-gradient-active);
      box-shadow: .1rem .1rem .25rem .25rem var(--nav-hover);}
    &:active {
      background: var(--nav-gradient-active);
      border-style: inset;
      color: var(--nav-active);
      text-decoration: underline;
      
    }

   }
menu {
            z-index: 1;

      background-color:   var(--tr-hover);
display:block;
      opacity: 1;
          position: absolute;
    transition: all .25s ease 0s;
    
  text-align: left;
  //justify-content: left;  
      font-size: 1.5rem;

    font-family: var(--Sans);
    text-decoration: none;
    font-weight: bold;
        border: .1rem outset var(--border);
    box-shadow:  .1rem .1rem .25rem .25rem var(--border) ;
    border-radius: .3rem;
margin:0;
 padding: 0; //.5rem;
  li {
    list-style-position: inside;
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  a, ,a:link, a:visited { 
        display:block;            

padding: 0;
margin: 0;
    color: var(--nav-item);
    border-radius: .3rem;
    border: .2rem var(--nav-border);
    border-style: outset;
    background-image:  var(--nav-gradient);
    
    text-shadow: .01rem .01rem .01rem var(--nav-button-border);
    box-shadow: .1rem .1rem .25rem .25rem var(--nav-button-border);
    transition: .25s all ease-in-out .1s;
    align-items: center;
    &:hover {
      border-style: inset;
      color: var(--nav-hover);
      background-image: var(--nav-gradient-active);
      box-shadow: .1rem .1rem .25rem .25rem var(--nav-hover);}
    &:active {
      background: var(--nav-gradient-active);
      border-style: inset;
      color: var(--nav-active);
      text-decoration: underline;
      
    }
  }

}}
details::details-content {
  opacity: 0;
    transition: all .25s ease 0s;
    //content-visibility 600ms allow-discrete;
}

details[open]::details-content {
  opacity: 1;
      transition: all .25s ease 0s;

}
}}

And here is the HTML.

<header>
   <nav aria-label="primary navigation"><details>
        <summary> ☰ Menu </summary>
      <menu>
         <li>
            <a  href="http://127.0.0.1:1111/" title="Home" accesskey= "h">Home Page</a>
         </li>
         <li>
            <a  href="http://127.0.0.1:1111/about/" title="About Me" accesskey= "a">About Me</a>
         </li>
         <li>
            <a  href="http://127.0.0.1:1111/wiki/fitness/" title="Fitness Related Stuff" accesskey= "f">Fitness Stuff</a>
         </li>
         <li>
            <a  href="http://127.0.0.1:1111/wiki/" title="Some random tips or things I have learned" accesskey= "j">Junk Drawer</a>
         </li>
         <li>
            <a  href="http://127.0.0.1:1111/wiki/links/" title="Links To Thing I Like" accesskey= "l">Links</a>
         </li>
         <li>
            <a  href="http://127.0.0.1:1111/now/" title="What I Am Currently Up To" accesskey= "n">Now</a>
         </li>
         <li>
            <a  href="http://127.0.0.1:1111/weather/history/" title="Weather history for Mount Joy, Pennsylvania from my personal weather station" accesskey= "w">Weather Data</a>
         </li>
      </menu>
      </details>
   </nav>
</header>

If this is useful to you feel free to copy it and change it as needed for your own preferences.