CODEWITHSUNDEEP
javascriptjqueryhtmlresponsive-design
ahzep
ahzep

Reputation: 180

Responsive menu with CSS only doesn't show

I'm working on a css+jquery responsive menu, I have a checkbox with text (a '+' symbol that turns into a 'x' after clicked) that shows the menu, however for some reason the checkbox disapears after I click it making impossible to close the menu, I would like to fix this.

Here's the html:

<header>
  <nav>
    <div class="toggle">
      <input type="checkbox" id="hacky-input">
      <label for="hacky-input">
                        <div class="crossRotate">+</div>
                    </label>
    </div>
    <ul>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">PROJECTS</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </nav>
</header>

and the css:

a {
  text-decoration: none;
  color: gray;
  padding: 0 50px;
}

header {
  height: 12vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

nav {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
  flex-grow: 1;
}

li {
  display: inline-block;
  list-style-type: none;
  height: 100%;
  font-size: 18px;
}

@media (max-width:768px) {
  .logo {
    display: none;
  }
  ul {
    display: none;
  }
  .menu {
    float: right;
    font-size: 60px;
    padding-right: 20px;
    cursor: pointer;
  }
  #hacky-input {
    display: none;
  }
  .crossRotate {
    float: right;
    padding-right: 50px;
    font-size: 60px;
    width: 5px;
    color: rgb(0, 166, 231);
    cursor: pointer;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -ms-transition-property: -ms-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
  }
  #hacky-input:checked+label .crossRotate {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .toggle {
    display: block;
    width: 100%;
  }
  ul li {
    display: block;
    padding: 0;
    width: 100%;
    text-align: center;
  }
  .active {
    display: block;
  }
  ul {
    display: none;
  }
}

and the js:

$(document).ready(function() {
  $('.crossRotate').click(function() {
    $('ul').toggleClass('active');
  })
})

Heres the jsfiddle

Upvotes: 0

Views: 57

Answers (2)

Alain Cruz
Alain Cruz

Reputation: 5097

The issue seems to be that the cross is being push outside the boundaries by the ul element. If you were to add position:absolute to it, the cross would remain in the same place when the menu opens. Another way would be to change your header height, so that all elements can fit in it. I made the height change (height: auto;) in the code below, so that you can see the result.

$(document).ready(function() {
  $('.crossRotate').click(function() {
    $('ul').toggleClass('active');
  })
})
a {
  text-decoration: none;
  color: gray;
  padding: 0 50px;
}

header {
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

nav {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
  flex-grow: 1;
}

li {
  display: inline-block;
  list-style-type: none;
  height: 100%;
  font-size: 18px;
}

@media (max-width:768px) {
  .logo {
    display: none;
  }
  ul {
    display: none;
  }
  .menu {
    float: right;
    font-size: 60px;
    padding-right: 20px;
    cursor: pointer;
  }
  #hacky-input {
    display: none;
  }
  .crossRotate {
    float: right;
    padding-right: 50px;
    font-size: 60px;
    width: 5px;
    color: rgb(0, 166, 231);
    cursor: pointer;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -ms-transition-property: -ms-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
  }
  #hacky-input:checked+label .crossRotate {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .toggle {
    display: inline-block;
    width: 100%;
  }
  ul li {
    display: block;
    padding: 0;
    width: 100%;
    text-align: center;
  }
  .active {
    display: inline-block;
    width:100%;
  }
  ul {
    display: none;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <nav>
    <div class="toggle">
      <input type="checkbox" id="hacky-input">
      <label for="hacky-input">
                        <div class="crossRotate">+</div>
                    </label>
    </div>
    <ul>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">PROJECTS</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </nav>
</header>

Upvotes: 1

Arel Lin
Arel Lin

Reputation: 918

The rotate mark didn't disappear. It was being moved over to the top side of your page.
The problem is here:

Your <header> element has limited height 12vh.
When your ul list is active, the height of nav is bigger than your <header> element.
At the same time, you ask the elements in nav tag to aligned in column direction and space-around, which makes the exceeded part overflow to the top side, so you can't see it.

The workaround is simply removing the justify-content in your nav CSS.

nav {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-grow: 1;
}

This should work, try it.

Upvotes: 1

Related Questions