Newbie : Tutorial Creating Responsive Slide-Toggle Menu with Jquery and CSS

toggle-slide css menu

A few weeks ago I wrote a tutorial on how to create a parallax effect with javascript and CSS. Now I want to write a tutorial how to make a toggle-slide menu appears horizontally. This menu is suited as implemented on the landing page that appears in full screen.

This tutorial requires jquery and few bit of javascript code. The good news, this menu supports responsive, so you do not have to worry.

Ok, prepare your favorite text editor, I usually use notepad + + because it is simple and lightweight.

1. HTML code

<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
  <nav class="menu-opener">
    <div class="menu-opener-inner"></div>
  </nav>
  <nav class="menu">
    <ul class="menu-inner">
      <a href="#" class="menu-link">
        <li>Accueil</li>
      </a>
      <a href="#" class="menu-link">
        <li>Portfolio</li>
      </a>
      <a href="#" class="menu-link">
        <li>Themes</li>
      </a>
      <a href="#" class="menu-link">
        <li>Templates</li>
      </a>
      <a href="#" class="menu-link">
        <li>Contact</li>
      </a>
    </ul>
  </nav>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="menu-opener.js"></script>
</body>
</html>

We loaded jquery from server, if you want, you can change to your server, CDNJS or from google code.

 2. CSS code

@import url(http://fonts.googleapis.com/css?family=Open+Sans:100,300,400,700);
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: url("http://www.philippefercha.com/cd/toggle-menu-bg.jpg") no-repeat;
  background-size: 2000px;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}

a {
  display: block;
  width: 100%;
  height: 100%;
}

.menu-opener, .menu-opener:hover, .menu-opener.active, .menu-opener-inner, .menu-opener-inner::before, .menu-opener-inner::after, .menu, .menu.active {
  -webkit-transition: 250ms all;
  transition: 250ms all;
}

.menu-opener {
  cursor: pointer;
  height: 64px;
  position: absolute;
  top: 2%;
  left: 1%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 64px;
}
.menu-opener:hover, .menu-opener.active {
  background: #f1c40f;
}

.menu-opener-inner {
  background: #fff;
  height: .5rem;
  margin-left: .75rem;
  margin-top: 1.75rem;
  width: 2.5rem;
}
.menu-opener-inner::before, .menu-opener-inner::after {
  background: white;
  content: '';
  display: block;
  height: .5rem;
  width: 2.5rem;
}
.menu-opener-inner::before {
  -webkit-transform: translateY(-0.75rem);
  -ms-transform: translateY(-0.75rem);
  transform: translateY(-0.75rem);
}
.menu-opener-inner::after {
  -webkit-transform: translateY(0.25rem);
  -ms-transform: translateY(0.25rem);
  transform: translateY(0.25rem);
}
.menu-opener-inner.active {
  background: transparent;
}
.menu-opener-inner.active::before {
  -webkit-transform: translateY(0rem) rotate(-45deg);
  -ms-transform: translateY(0rem) rotate(-45deg);
  transform: translateY(0rem) rotate(-45deg);
}
.menu-opener-inner.active::after {
  -webkit-transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);
  -ms-transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);
  transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);
}

.menu {
  background: #f1c40f;
  color: transparent;
  height: 64px;
  position: absolute;
  top: 2%;
  left: 1%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 0rem;
  z-index: -1;
}
.menu.active {
  width: -webkit-calc(100% - 2rem);
  width: calc(100% - 2rem);
}
.menu.active .menu-link {
  color: white;
}

.menu-inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  height: 100%;
  list-style-type: none;
  margin: 0;
  margin-left: 4rem;
  padding: 0;
}

.menu-link {
  color: transparent;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  font-size: 2rem;
  font-weight: 100;
  height: 100%;
  text-align: center;
  text-decoration: none;
}
.menu-link li {
  margin: auto;
}

@media screen and (max-width: 768px) {
  .menu {
    height: auto;
  }
  .menu-inner {
    display: block;
  }
  .menu-link {
    padding: 10px 0;
    font-size: 1.2em;
  }
  .menu.active {
    width: -webkit-calc(100% - 0.5rem);
    width: calc(100% - 0.5rem);
  }
}

 3. Javascript Code

$(".menu-opener").click(function(){
  $(".menu-opener, .menu-opener-inner, .menu").toggleClass("active");
});

That is very simple, you can download this source code tutorial here

2 thoughts on “Newbie : Tutorial Creating Responsive Slide-Toggle Menu with Jquery and CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.