1

I am trying to create a fullscreen navigation overlay with 2 levels of navigation.

Currently I have managed to build the fullscreen overlay along with the level 1 navigation.

https://codepen.io/anon/pen/rJJGKE

$(document).ready(function() {
  $(".menu-btn a").click(function() {
    $(".overlay").fadeToggle(200);
    $(this).toggleClass('btn-open').toggleClass('btn-close');
  });

  $('.overlay').on('click', function() {
    $(".overlay").fadeToggle(200);
    $(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
  });

  $('.menu a').on('click', function() {
    $(".overlay").fadeToggle(200);
    $(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
  });
});
/* OPEN / CLOSE BTNS */

.menu-btn {
  z-index: 999;
  display: inline;
  font-size: 32px;
}

.menu-btn a {
  display: inline-block;
  text-decoration: none;
  /* safari hack */
}

.btn-open:after {
  color: #000;
  content: "\f394";
  font-family: "Ionicons";
  -webkit-transition: all .2s linear 0s;
  -moz-transition: all .2s linear 0s;
  -o-transition: all .2s linear 0s;
  transition-property: all .2s linear 0s;
}

.btn-open:hover:after {
  color: #000;
}

.btn-close:after {
  color: #000;
  content: "\f2d7";
  font-family: "Ionicons";
  -webkit-transition: all .2s linear 0s;
  -moz-transition: all .2s linear 0s;
  -o-transition: all .2s linear 0s;
  transition-property: all .2s linear 0s;
}

.btn-close:hover:after {
  color: #000;
}


/* OVERLAY */

.overlay {
  position: fixed;
  top: 0;
  z-index: 99;
  display: none;
  overflow: auto;
  width: 100%;
  height: 100%;
  background: rgba(135, 119, 116, 0.95);
}

.overlay .menu {
  margin: 100px auto;
  width: 80%;
}

.overlay .menu ul {
  margin: 0;
  padding: 0;
  width: 100%;
}

.overlay .menu ul li {
  float: left;
  padding: 6px 0 0 0;
  width: 100%;
  list-style: none;
  text-align: left;
  text-transform: uppercase;
  margin-bottom: 40px;
}

.overlay .menu ul li#social {
  width: 100%;
  margin-top: 50px;
}

.overlay .menu ul li a {
  color: #d1b400;
  font-weight: 300;
  font-size: 20px;
  font-family: 'Old Standard TT', serif;
}

.overlay .menu ul li#social a {}

.overlay .menu ul ul {
  margin-top: 10px;
}

.overlay .menu ul ul li {
  position: relative;
  float: none;
  margin: 0;
  width: 100%;
  border: 0;
}

.overlay .menu ul ul li a {
  color: #000;
  text-transform: capitalize;
  font-weight: 300;
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
}

.overlay .menu ul ul li a:hover {
  color: #34b484;
}


/* RESPONSIVE */

@media screen and (max-width: 768px) {
  .overlay .menu ul li {
    float: none;
    margin-bottom: 25px;
    width: 100%;
  }
  .overlay .menu ul li:last-child {
    border: 0;
  }
  .overlay .menu ul ul {
    margin-top: 20px;
  }
  .menu-btn {
    right: 25px;
  }
}

.allexamples {
  position: absolute;
  bottom: 0;
  font-size: 18px;
  font-weight: bold;
  width: 100%;
  text-align: center;
  background: #e9e9e9;
  padding: 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #333;
  position: fixed;
}

.menu-social {
  display: inline-block;
  margin: 0 .4em;
}

.menu-social a {
  width: 44px;
  height: 44px;
  padding: 0;
  background-image: url("../img/cd-socials.svg");
  background-repeat: no-repeat;
  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

.menu-social .menu-facebook a {
  background-position: 0 0;
}

.menu-social .menu-instagram a {
  background-position: -44px 0;
}

.menu-social .menu-dribbble a {
  background-position: -88px 0;
}

.menu-social .menu-twitter a {
  background-position: -132px 0;
}

.overlay .menu ul ul li.description {
  padding: 0px 0 10px 0px;
}

.overlay .menu ul ul li.description span {
  color: #c3bab9;
  font-size: 13px;
  font-weight: 300;
  text-transform: none;
}

p.tel,
p.email {
  margin: 0 0 3px 0;
}

p.tel a {
  font-family: 'Open Sans', sans-serif!important;
  color: #000!important;
  font-weight: 600!important;
  font-size: 18px!important;
  letter-spacing: 1px;
}

p.email a {
  font-family: 'Open Sans', sans-serif!important;
  color: #000!important;
  font-weight: 300!important;
  font-size: 16px!important;
  text-transform: none;
}

.menu-btn a span {
  font-size: 18px;
  color: #000000;
  line-height: 18px;
  font-weight: 600;
  position: relative;
  top: -5px;
  right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <nav class="navbar fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">Logo
        <img src="" width="30" height="30" alt="">
      </a>
      <span class="navbar-text">
        <div class="menu-btn">
          <a class="btn-open" href="javascript:void(0)"><span>MENU</span></a>
        </div>
      </span>
    </div>
  </nav>
</header>

<div class="overlay">
  <div class="menu">
    <div class="container">
      <ul>
        <li>
          <a href="#">Menu</a>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

What i am looking to do now is: When a user clicks on services, instead of going to services page, i would like a second level menu to appear (service 1, service 2 etc) in the same place as the existing menu.

Would this require a jQuery solution? Any help would be appreciate.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Chris
  • 313
  • 1
  • 4
  • 21

1 Answers1

1

Yeah, I think a simple jQuery function in combination with some CSS would be the best solution:

$('.menu a').on('click', function () {
    $(".overlay").fadeToggle(200);
    $(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
    // I added this line
    $(this).next('.sub').toggleClass('visible');
});

.overlay .menu ul li .sub {
  max-height: 0;
  transition: max-height 0.4s ease;
  overflow: hidden;
}
.overlay .menu ul li .sub.visible {
  max-height: 500px;
  transition: max-height 0.4s ease;
}

Have a look over here (Just click on the 'Service' button)

Jonas
  • 475
  • 5
  • 17
  • Thanks, i can see that working. Is it possible, instead of showing the new items underneath its parent, to instead replace the whole menu? So once you click services, a new menu swipes in from side with service options (i can add animations) Does that make sense? – Chris Feb 19 '18 at 10:54
  • Thats exactly what i was looking for! Couple of things i noticed: When i click any link in the first menu e.g.(about) , the second level opens? And when on second level how do you get back to 1st level? – Chris Feb 19 '18 at 11:31
  • Just add a `
  • ` in the sub-menu with a custom class. Define via jQuery a classremove of the `
      ` when clicking on the specific `
    • `. Basically my jQuery function backwards. Please accept my answer – It's solving your problem.
    • – Jonas Feb 19 '18 at 11:45
  • Thanks, i have accepted your answer. Could you have a look at the 'return' button on ul.sub please? I have updated this codepen with your changes and my attempt at a 'return' button. https://codepen.io/anon/pen/rJJGKE – Chris Feb 19 '18 at 12:12
  • The return button is working in your pen! Congratulations! :) – Jonas Feb 19 '18 at 13:38
  • It is now! :) Thanks for your help! – Chris Feb 19 '18 at 14:04