Multi level slide Mobile menu Navigation With jQuery

In this example below you will see how to do a Multi level slide Mobile menu Navigation With jQuery with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by AxeLVaisper, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright AxeLVaisper ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Multi level slide Mobile menu Navigation With jQuery</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      /* reset */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

* {
  box-sizing: border-box;
}

body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100vh;
  font-family: "Roboto", sans-serif;
  font-size: 18px;
}

.screen {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 480px;
  height: 568px;
  background-color: #ededed;
  overflow: hidden;
}
@media (max-height: 568px) {
  .screen {
    top: 24px;
    bottom: auto;
  }
}
@media (max-width: 400px) {
  .screen {
    top: 0;
    width: 100vw;
    height: 100vh;
  }
}

nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #242424;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.menu-container {
  position: relative;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: -webkit-transform 0.25s ease-out;
  transition: -webkit-transform 0.25s ease-out;
  transition: transform 0.25s ease-out;
  transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
}

.view-submenu .menu-container {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

ul {
  position: absolute;
  top: 60px;
  padding: 6px;
  width: 100%;
  height: 508px;
  color: #ededed;
  background-color: #313131;
}

ul li a {
  opacity: 0;
  display: block;
  padding: 10px 12px;
  position: relative;
  cursor: pointer;
  border-radius: 3px;
  -webkit-transform: translateY(12px);
  transform: translateY(12px);
  -webkit-transition: opacity 0.15s 0.1s ease-out,
    -webkit-transform 0.15s 0.1s ease-out;
  transition: opacity 0.15s 0.1s ease-out, -webkit-transform 0.15s 0.1s ease-out;
  transition: opacity 0.15s 0.1s ease-out, transform 0.15s 0.1s ease-out;
  transition: opacity 0.15s 0.1s ease-out, transform 0.15s 0.1s ease-out,
    -webkit-transform 0.15s 0.1s ease-out;
}

ul li.has-children span {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 12px 16px;
  text-indent: -9999px;
  background: #444;
}

ul li.has-children span:after {
  content: "";
  position: absolute;
  top: 0;
  right: 12px;
  bottom: 0;
  margin: auto;
  padding: 4px;
  width: 0px;
  height: 0px;
  cursor: pointer;
  font-size: 0;
  border-bottom: 2px solid #ededed;
  border-right: 2px solid #ededed;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

ul li.has-children span:hover:after {
  border-color: #bababa;
}

.menu {
  opacity: 0;
  -webkit-transition: background-color 0.25s ease-out, opacity 0.15s ease-out;
  transition: background-color 0.25s ease-out, opacity 0.15s ease-out;
}

.menu.is-visible {
  opacity: 1;
}

.menu.is-visible li a {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.view-submenu .menu {
  background-color: #3e3e3e;
}

.view-submenu .menu > li > a {
  opacity: 0;
  -webkit-transition: opacity 0.15s ease-out;
  transition: opacity 0.15s ease-out;
}

.submenu {
  position: absolute;
  top: 0;
  left: 100%;
  background-color: #313131;
}

.submenu li {
  margin-left: 60px;
}

.hide-submenu {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 508px;
  cursor: pointer;
  background-color: #313131;
  -webkit-transition: background-color 0.25s ease-out;
  transition: background-color 0.25s ease-out;
}

.hide-submenu:before {
  opacity: 0;
  content: "";
  position: absolute;
  top: 0;
  right: 12px;
  bottom: 0;
  margin: auto;
  padding: 4px;
  width: 6px;
  height: 6px;
  cursor: pointer;
  font-size: 0;
  border-bottom: 2px solid #ededed;
  border-right: 2px solid #ededed;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  left: 0;
  right: -6px;
  -webkit-transition: opacity 0.1s ease-out;
  transition: opacity 0.1s ease-out;
}

.view-submenu .hide-submenu {
  background-color: #3e3e3e;
}

.view-submenu .hide-submenu:before {
  opacity: 1;
  -webkit-transition: opacity 0.15s 0.3s ease-out;
  transition: opacity 0.15s 0.3s ease-out;
}

.toggle {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  top: 0;
  left: 18px;
  bottom: 0;
  margin: auto;
  cursor: pointer;
}

.toggle span {
  position: relative;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
  font-size: 0;
  width: 26px;
  height: 2px;
  background-color: #ededed;
  border-radius: 100px;
  -webkit-transition: background-color 0.2s ease-out;
  transition: background-color 0.2s ease-out;
}

.toggle span:before,
.toggle span:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ededed;
  border-radius: 100px;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}

.toggle span:before {
  bottom: calc(100% + 6px);
}

.toggle span:after {
  top: calc(100% + 6px);
}

.is-visible .toggle span {
  background-color: transparent;
}

.is-visible .toggle span:before {
  bottom: auto;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.is-visible .toggle span:after {
  top: auto;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div class="screen">
  <nav>
    <div class="toggle"><span>Menu</span></div>
    <div class="menu-container">
      <ul class="menu visually-hidden">
        <li><a>Home</a></li>
        <li class="has-children"><a>Category<span>more</span></a>
          <ul class="submenu">
            <li><a>jQuery</a></li>
            <li><a>HTML5</a></li>
            <li><a>CSS3</a></li>
          </ul>
        </li>
        <li><a>About</a></li>
        <li><a>Contact</a></li>
        <li class="has-children"><a>Social<span>more</span></a>
          <ul class="submenu">
            <li><a>Facebook</a></li>
            <li><a>Twitter</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/AxeLVaisper/multi-level-slide-mobile-menu-navigation-with-jquery-yjZOgz */
/* reset */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

* {
  box-sizing: border-box;
}

body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100vh;
  font-family: "Roboto", sans-serif;
  font-size: 18px;
}

.screen {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 480px;
  height: 568px;
  background-color: #ededed;
  overflow: hidden;
}
@media (max-height: 568px) {
  .screen {
    top: 24px;
    bottom: auto;
  }
}
@media (max-width: 400px) {
  .screen {
    top: 0;
    width: 100vw;
    height: 100vh;
  }
}

nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #242424;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.menu-container {
  position: relative;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: -webkit-transform 0.25s ease-out;
  transition: -webkit-transform 0.25s ease-out;
  transition: transform 0.25s ease-out;
  transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
}

.view-submenu .menu-container {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

ul {
  position: absolute;
  top: 60px;
  padding: 6px;
  width: 100%;
  height: 508px;
  color: #ededed;
  background-color: #313131;
}

ul li a {
  opacity: 0;
  display: block;
  padding: 10px 12px;
  position: relative;
  cursor: pointer;
  border-radius: 3px;
  -webkit-transform: translateY(12px);
  transform: translateY(12px);
  -webkit-transition: opacity 0.15s 0.1s ease-out,
    -webkit-transform 0.15s 0.1s ease-out;
  transition: opacity 0.15s 0.1s ease-out, -webkit-transform 0.15s 0.1s ease-out;
  transition: opacity 0.15s 0.1s ease-out, transform 0.15s 0.1s ease-out;
  transition: opacity 0.15s 0.1s ease-out, transform 0.15s 0.1s ease-out,
    -webkit-transform 0.15s 0.1s ease-out;
}

ul li.has-children span {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 12px 16px;
  text-indent: -9999px;
  background: #444;
}

ul li.has-children span:after {
  content: "";
  position: absolute;
  top: 0;
  right: 12px;
  bottom: 0;
  margin: auto;
  padding: 4px;
  width: 0px;
  height: 0px;
  cursor: pointer;
  font-size: 0;
  border-bottom: 2px solid #ededed;
  border-right: 2px solid #ededed;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

ul li.has-children span:hover:after {
  border-color: #bababa;
}

.menu {
  opacity: 0;
  -webkit-transition: background-color 0.25s ease-out, opacity 0.15s ease-out;
  transition: background-color 0.25s ease-out, opacity 0.15s ease-out;
}

.menu.is-visible {
  opacity: 1;
}

.menu.is-visible li a {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.view-submenu .menu {
  background-color: #3e3e3e;
}

.view-submenu .menu > li > a {
  opacity: 0;
  -webkit-transition: opacity 0.15s ease-out;
  transition: opacity 0.15s ease-out;
}

.submenu {
  position: absolute;
  top: 0;
  left: 100%;
  background-color: #313131;
}

.submenu li {
  margin-left: 60px;
}

.hide-submenu {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 508px;
  cursor: pointer;
  background-color: #313131;
  -webkit-transition: background-color 0.25s ease-out;
  transition: background-color 0.25s ease-out;
}

.hide-submenu:before {
  opacity: 0;
  content: "";
  position: absolute;
  top: 0;
  right: 12px;
  bottom: 0;
  margin: auto;
  padding: 4px;
  width: 6px;
  height: 6px;
  cursor: pointer;
  font-size: 0;
  border-bottom: 2px solid #ededed;
  border-right: 2px solid #ededed;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  left: 0;
  right: -6px;
  -webkit-transition: opacity 0.1s ease-out;
  transition: opacity 0.1s ease-out;
}

.view-submenu .hide-submenu {
  background-color: #3e3e3e;
}

.view-submenu .hide-submenu:before {
  opacity: 1;
  -webkit-transition: opacity 0.15s 0.3s ease-out;
  transition: opacity 0.15s 0.3s ease-out;
}

.toggle {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  top: 0;
  left: 18px;
  bottom: 0;
  margin: auto;
  cursor: pointer;
}

.toggle span {
  position: relative;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
  font-size: 0;
  width: 26px;
  height: 2px;
  background-color: #ededed;
  border-radius: 100px;
  -webkit-transition: background-color 0.2s ease-out;
  transition: background-color 0.2s ease-out;
}

.toggle span:before,
.toggle span:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ededed;
  border-radius: 100px;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}

.toggle span:before {
  bottom: calc(100% + 6px);
}

.toggle span:after {
  top: calc(100% + 6px);
}

.is-visible .toggle span {
  background-color: transparent;
}

.is-visible .toggle span:before {
  bottom: auto;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.is-visible .toggle span:after {
  top: auto;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}


/*Downloaded from https://www.codeseek.co/AxeLVaisper/multi-level-slide-mobile-menu-navigation-with-jquery-yjZOgz */
var nav = $("nav");
var menu = $(".menu");
var menuContainer = $(".menu-container");
var subMenu = $(".submenu");
var toggle = $(".toggle");
var subToggle = $(".has-children span");
var back = '<div class="hide-submenu"></div>';
var subHide = $(back);

// Toggle menu
toggle.on("click", function() {
  nav.toggleClass("is-visible");
  if (menu.hasClass("visually-hidden")) {
    menu.toggleClass("visually-hidden is-visible");
  } else {
    menu.removeClass("is-visible");
    // Wait for CSS animation
    setTimeout(function() {
      nav.removeClass("view-submenu");
      menu.addClass("visually-hidden");
    }, 200);
  }
});

// Add submenu hide bar
subHide.prependTo(subMenu);
var subHideToggle = $(".hide-submenu");

// Show submenu
subToggle.on("click", function() {
  nav.addClass("view-submenu");
  // Hide all the submenus...
  subMenu.hide();
  // ...except for the one being called
  $(this)
    .parents("li")
    .find(".submenu")
    .show();
});
// Hide submenu
subHideToggle.on("click", function() {
  nav.removeClass("view-submenu");
});

Comments