vendredi 6 mars 2020

CSS Checkbox Hack Collapsible Navigation

I have created a collapsible css only navigation menu that slides in from the left or right edge of the viewport. It almost works, except for some weird behaviour that I currently don't understand:

a) When placing it on the left, the rotation transformation of the label (to make an x from the +) is not performed.

Fiddle left version.

b) When placing the whole thing on the right by adding the commented float: right; lines the transformation works, but no transition is visible. Also the menue slides not from the viewport edge but left of the checkbox label, before it jumps in it right position and the width of the label is added to the ul.

Fiddle right version.

body {
  background-color: lightgreen;
}

a {
  color: black;
  text-decoration: none;
}


nav {
  position: fixed;
  left: 0;
  /*right: 0;*/
  z-index: 10;
}

nav ul {
  list-style-type: none;
  /*float: right;*/
  margin: 0;
  padding: 0;
  width: 0;
  overflow: hidden;
  transition: width 0.3s ease;
}

nav a {
  display: block;
  padding: .5em;
  background-color: rgba(255, 255, 255, .5);
  transition: 0.25s;
}

nav a:hover {
  background-color: rgba(0, 0, 0, .3);
  color: white;
  transition: 0.2s;
}

/* Toggle mechanism */
nav label {
  /*float: right*/
  padding: .5em;
  cursor: pointer;
  text-align: center;
  font-size: 2em;
  transition: transform 0.5s;
  transition: color 0.3s;
}

nav label:hover {
  color: white;
}

input#menu {
  display: none;
}

input:checked ~ ul {
  width: 100%;
}

input:checked ~ label {
  transform: rotate(-45deg);
}

input:checked ~ label:hover {
  color: red;
}
<nav>
        <input type="checkbox" id="menu"><label for="menu">+</label>
          <ul>
            <li><a href="#">EntryA</a></li>
            <li><a href="#">EntryB</a></li>
            <li><a href="#">EntryC</a></li>
            <li><a href="#">EntryD</a></li>
            <li><a href="#">EntryE</a></li>
          </ul>
</nav>

Is it possible to fix either of these solutions without the help of JavaScript?

Thank you very much!




Aucun commentaire:

Enregistrer un commentaire