Vertical multi-level menu

In this example below you will see how to do a Vertical multi-level menu with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Vertical multi-level menu</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body class="js-navbar-block-scroll">
  <header class="header">
    <div class="skip-nav">
      <ul>
        <li><a href="#navigation">Aller au menu</a></li>
        <li><a href="#content" accesskey="s">Aller au contenu</a></li>
      </ul>
    </div>
    <nav class="navbar navbar-default" role="navigation" id="navigation">
      <div class="container-fluid">
        <div class="navbar-header js-navbar-will-push">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
					<span></span>
					<span></span>
					<span></span>
				</button>
          <a class="navbar-brand" href="#" title="accueil">
            <!-- logo borrowed from Codepen for the proto -->
            <svg class="svg-logo" viewBox="0 0 100 100"><path d="M100 34.2c-.4-2.6-3.3-4-5.3-5.3-3.6-2.4-7.1-4.7-10.7-7.1-8.5-5.7-17.1-11.4-25.6-17.1-2-1.3-4-2.7-6-4-1.4-1-3.3-1-4.8 0-5.7 3.8-11.5 7.7-17.2 11.5L5.2 29C3 30.4.1 31.8 0 34.8c-.1 3.3 0 6.7 0 10v16c0 2.9-.6 6.3 2.1 8.1 6.4 4.4 12.9 8.6 19.4 12.9 8 5.3 16 10.7 24 16 2.2 1.5 4.4 3.1 7.1 1.3 2.3-1.5 4.5-3 6.8-4.5 8.9-5.9 17.8-11.9 26.7-17.8l9.9-6.6c.6-.4 1.3-.8 1.9-1.3 1.4-1 2-2.4 2-4.1V37.3c.1-1.1.2-2.1.1-3.1 0-.1 0 .2 0 0zM54.3 12.3L88 34.8 73 44.9 54.3 32.4V12.3zm-8.6 0v20L27.1 44.8 12 34.8l33.7-22.5zM8.6 42.8L19.3 50 8.6 57.2V42.8zm37.1 44.9L12 65.2l15-10.1 18.6 12.5v20.1zM50 60.2L34.8 50 50 39.8 65.2 50 50 60.2zm4.3 27.5v-20l18.6-12.5 15 10.1-33.6 22.4zm37.1-30.5L80.7 50l10.8-7.2-.1 14.4z"></path></svg>
          </a>
        </div>
        <div class="collapse navbar-collapse" id="navbar">
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a href="#" title="" class="js-has-submenu">
                <div class="navbar__label">Item 1 -</div>
              </a>
              <div class="submenu js-submenu">
                <ul class="submenu__list">
                  <li>
                    <a href="#" title="Retour" class="js-submenu__back">
                      <div class="navbar__label"><i class="icon-simply-left"></i> Retour</div>
                    </a>
                  </li>
                  <li>
                    <a href="#" title="">
                      <div class="navbar__label">Item 11</div>
                    </a>
                  </li>
                  <li>
                    <a href="#" title="">
                      <div class="navbar__label">Item 12</div>
                    </a>
                  </li>
                  <li>
                    <a href="#" title="" class="js-has-submenu">
                      <div class="navbar__label">Item 13 -</div>
                    </a>
                    <div class="submenu js-submenu">
                      <ul class="submenu__list">
                        <li>
                          <a href="#" title="Retour" class="js-submenu__back">
                            <div class="navbar__label"><i class="icon-simply-left"></i> Retour</div>
                          </a>
                        </li>
                        <li>
                          <a href="#" title="">
                            <div class="navbar__label">Item 131</div>
                          </a>
                        </li>
                        <li>
                          <a href="#" title="">
                            <div class="navbar__label">Item 132</div>
                          </a>
                        </li>
                        <li>
                          <a href="#" title="">
                            <div class="navbar__label">Item 133</div>
                          </a>
                        </li>
                        <li>
                          <a href="#" title="">
                            <div class="navbar__label">Item 134</div>
                          </a>
                        </li>
                        <li>
                          <a href="#" title="">
                            <div class="navbar__label">Item 135</div>
                          </a>
                        </li>
                        <li>
                          <a href="#" title="">
                            <div class="navbar__label">Item 136</div>
                          </a>
                        </li>
                      </ul>
                      <div class="submenu__before js-submenu__back"></div>
                    </div>
                  </li>
                  <li>
                    <a href="#" title="">
                      <div class="navbar__label">Item 14</div>
                    </a>
                  </li>
                  <li>
                    <a href="#" title="" class="js-has-submenu">
                      <div class="navbar__label">Item 15 -</div>
                    </a>
                    <div class="submenu js-submenu">
                      <ul class="submenu__list">
                        <li>
                          <a href="#" title="Retour" class="js-submenu__back">
                            <div class="navbar__label"><i class="icon-simply-left"></i> Retour</div>
                          </a>
                        </li>
                        <li>
                          <a href="#" title="">
                            <div class="navbar__label">Item 151</div>
                          </a>
                        </li>
                        <li>
                          <a href="#" title="">
                            <div class="navbar__label">Item 152</div>
                          </a>
                        </li>
                        <li>
                          <a href="#" title="">
                            <div class="navbar__label">Item 153</div>
                          </a>
                        </li>
                        <li>
                          <a href="#" title="">
                            <div class="navbar__label">Item 154</div>
                          </a>
                        </li>
                        <li>
                          <a href="#" title="">
                            <div class="navbar__label">Item 155</div>
                          </a>
                        </li>
                      </ul>
                      <div class="submenu__before js-submenu__back"></div>
                    </div>
                  </li>
                </ul>
                <div class="submenu__before js-submenu__back"></div>
              </div>
            </li>
            <li>
              <a href="#" title="" class="js-has-submenu">
                <div class="navbar__label">Item 2 -</div>
              </a>
              <div class="submenu js-submenu">
                <ul class="submenu__list">
                  <li>
                    <a href="#" title="Retour" class="js-submenu__back">
                      <div class="navbar__label"><i class="icon-simply-left"></i> Retour</div>
                    </a>
                  </li>
                  <li>
                    <a href="#" title="">
                      <div class="navbar__label">Item 21</div>
                    </a>
                  </li>
                  <li>
                    <a href="#" title="" class="js-has-submenu">
                      <div class="navbar__label">Item 22 -</div>
                    </a>
                    <div class="submenu js-submenu">
                      <ul class="submenu__list">
                        <li>
                          <a href="#" title="Retour" class="js-submenu__back">
                            <div class="navbar__label"><i class="icon-simply-left"></i> Retour</div>
                          </a>
                        </li>
                        <li>
                          <a href="#" title="">
                            <div class="navbar__label">Item 221</div>
                          </a>
                        </li>
                        <li>
                          <a href="#" title="">
                            <div class="navbar__label">Item 222</div>
                          </a>
                        </li>
                        <li>
                          <a href="#" title="">
                            <div class="navbar__label">Item 223</div>
                          </a>
                        </li>
                      </ul>
                      <div class="submenu__before js-submenu__back"></div>
                    </div>
                  </li>
                  <li>
                    <a href="#" title="A">
                      <div class="navbar__label">Item 23</div>
                    </a>
                  </li>
                  <li>
                    <a href="#" title="">
                      <div class="navbar__label">Item 24</div>
                    </a>
                  </li>
                </ul>
                <div class="submenu__before js-submenu__back"></div>
              </div>
            </li>
            <li>
              <a href="#" title="" class="js-has-submenu">
                <div class="navbar__label">Item 3 -</div>
              </a>
              <div class="submenu js-submenu">
                <ul class="submenu__list">
                  <li>
                    <a href="#" title="Retour" class="js-submenu__back">
                      <div class="navbar__label"><i class="icon-simply-left"></i> Retour</div>
                    </a>
                  </li>
                  <li>
                    <a href="#" title="" class="js-has-submenu">
                      <div class="navbar__label">Item 31 -</div>
                    </a>
                    <div class="submenu js-submenu">
                      <ul class="submenu__list">
                        <li>
                          <a href="#" title="Retour" class="js-submenu__back">
                            <div class="navbar__label"><i class="icon-simply-left"></i> Retour</div>
                          </a>
                        </li>
                        <li>
                          <a href="#" title="">
                            <div class="navbar__label">Item 311</div>
                          </a>
                        </li>
                        <li>
                          <a href="#" title="">
                            <div class="navbar__label">Item 312</div>
                          </a>
                        </li>
                        <li>
                          <a href="#" title="">
                            <div class="navbar__label">Item 313</div>
                          </a>
                        </li>
                        <li>
                          <a href="#" title="">
                            <div class="navbar__label">Item 314</div>
                          </a>
                        </li>
                        <li>
                          <a href="#" title="">
                            <div class="navbar__label">Item 315</div>
                          </a>
                        </li>
                      </ul>
                      <div class="submenu__before js-submenu__back"></div>
                    </div>
                  </li>
                  <li>
                    <a href="#" title="Collectivités locales et associations" class="js-has-submenu">
                      <div class="navbar__label">Item 32</div>
                    </a>
                    <div class="submenu js-submenu">
                      <ul class="submenu__list">
                        <li>
                          <a href="#" title="Retour" class="js-submenu__back">
                            <div class="navbar__label"><i class="icon-simply-left"></i> Retour</div>
                          </a>
                        </li>
                        <li>
                          <a href="#" title="">
                            <div class="navbar__label">Item 321</div>
                          </a>
                        </li>
                        <li>
                          <a href="#" title="">
                            <div class="navbar__label">Item 322</div>
                          </a>
                        </li>
                        <li>
                          <a href="#" title="">
                            <div class="navbar__label">Item 323</div>
                          </a>
                        </li>
                        <li>
                          <a href="#" title="">
                            <div class="navbar__label">Item 324</div>
                          </a>
                        </li>
                        <li>
                          <a href="#" title="">
                            <div class="navbar__label">Item 325</div>
                          </a>
                        </li>
                        <li>
                          <a href="#" title="">
                            <div class="navbar__label">Item 326</div>
                          </a>
                        </li>
                      </ul>
                      <div class="submenu__before js-submenu__back"></div>
                    </div>
                  </li>
                </ul>
                <div class="submenu__before js-submenu__back"></div>
              </div>
            </li>
            <li>
              <a href="#" title="">
                <div class="navbar__label">Item 4</div>
              </a>
            </li>
            <li>
              <a href="#" title="">
                <div class="navbar__label">Item 5</div>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <hr class="header-border-bottom js-navbar-will-push">
  </header>

  <div class="navbar-focus-overlay js-navbar-will-push js-close-navbar"></div>

  <main class="main js-navbar-will-push" id="content">

  </main>

</body>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/webshim/1.15.10/dev/shims/matchMedia.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/tibomahe/vertical-multi-level-menu-QEzyPa */
.skip-nav ul {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  list-style: none;
  margin-bottom: 0;
}
.skip-nav ul:before, .skip-nav ul:after {
  content: " ";
  display: table;
}
.skip-nav ul:after {
  clear: both;
}
@media (min-width: 768px) {
  .skip-nav ul {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .skip-nav ul {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .skip-nav ul {
    width: 1170px;
  }
}
.skip-nav ul > li {
  float: left;
  padding-right: 15px;
}
.skip-nav ul > li > a {
  color: #fff;
  font-size: 11px;
  display: none;
}

.navbar {
  border: 0;
  margin: 0;
  min-height: 50px;
  background: transparent;
}
@media (min-width: 992px) {
  .navbar {
    min-height: 80px;
  }
}
@media (min-width: 1200px) {
  .navbar {
    min-height: 100px;
  }
}
.navbar .navbar-header {
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  z-index: 3;
}
@media (min-width: 992px) {
  .navbar .navbar-header {
    width: auto;
  }
}
.navbar .navbar-toggle {
  width: 40px;
  height: 40px;
  padding: 20px;
  border: none;
  z-index: 9999;
  margin: 5px 15px 5px 0;
  display: block;
  float: left;
}
@media (min-width: 992px) {
  .navbar .navbar-toggle {
    display: none;
  }
}
.navbar .navbar-toggle span {
  display: block;
  height: 2px;
  width: 20px;
  background: red;
  border-radius: 2px;
  position: absolute;
  left: 10px;
  transition: transform 0.8s, opacity 0.2s;
}
.navbar .navbar-toggle span:nth-child(1) {
  top: 21px;
  transform: translateY(-7px);
}
.navbar .navbar-toggle span:nth-child(2) {
  top: 21px;
}
.navbar .navbar-toggle span:nth-child(3) {
  top: 21px;
  transform: translateY(7px);
}
.navbar .navbar-toggle:hover {
  cursor: pointer;
  background: transparent;
}
.navbar .navbar-toggle:hover span {
  background: #b30000;
}
.navbar .navbar-toggle:focus {
  background: transparent;
}
.navbar .navbar-toggle:focus span {
  background: red;
}
.navbar .navbar-toggle:not(.collapsed) span {
  background: red;
}
.navbar .navbar-toggle:not(.collapsed) span:nth-child(1) {
  transform: translateY(0) rotate(45deg);
}
.navbar .navbar-toggle:not(.collapsed) span:nth-child(2) {
  opacity: 0;
}
.navbar .navbar-toggle:not(.collapsed) span:nth-child(3) {
  transform: translateY(0) rotate(-45deg);
}
.navbar .navbar-brand {
  margin: 0 !important;
  padding: 10px;
  height: 50px;
  float: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 992px) {
  .navbar .navbar-brand {
    float: left;
    position: relative;
    padding: 20px;
    height: 80px;
  }
}
@media (min-width: 1200px) {
  .navbar .navbar-brand {
    height: 100px;
  }
}
.navbar .navbar-brand .svg-logo {
  height: 100%;
}
.navbar .navbar-nav {
  margin: 0;
}
.navbar .navbar-nav li a {
  padding: 0 10px;
  line-height: 50px;
}
@media (min-width: 992px) {
  .navbar .navbar-nav li a {
    line-height: 80px;
  }
}
@media (min-width: 1200px) {
  .navbar .navbar-nav li a {
    line-height: 100px;
  }
}
.navbar .navbar-collapse {
  background: #ddd;
  padding: 0;
  margin: 0;
  display: block;
  min-height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  overflow: hidden;
  opacity: 0;
}
@media (min-width: 992px) {
  .navbar .navbar-collapse {
    background: #fff;
    min-height: 0;
    width: 100%;
    position: fixed;
    z-index: 2;
    opacity: 1;
  }
}
@media (max-width: 991px) {
  .navbar .navbar-collapse:after {
    content: '';
    width: 10px;
    height: 100vh;
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#33000000', GradientType=1);
    position: absolute;
    top: 0;
    right: 0;
  }
  .navbar .navbar-collapse .navbar-nav {
    margin: 0;
  }
  .navbar .navbar-collapse .navbar-nav li {
    transition: background 0.2s;
  }
  .navbar .navbar-collapse .navbar-nav li a {
    color: #333;
    padding-left: 15px;
    box-shadow: 0 0 0.5px 0 rgba(0, 0, 0, 0.5);
    position: relative;
    height: 65px;
    display: table-cell;
    vertical-align: middle;
    width: 250px;
    line-height: 1.5;
    font-size: 12px;
  }
  .navbar .navbar-collapse .navbar-nav li:hover, .navbar .navbar-collapse .navbar-nav li.active {
    background: #919191;
  }
  .navbar .navbar-collapse .navbar-nav li:hover > a, .navbar .navbar-collapse .navbar-nav li.active > a {
    color: #fff;
    background: #919191;
    position: relative;
    text-decoration: none;
  }
  .navbar .navbar-collapse.collapsing {
    opacity: 1;
  }
  .navbar .navbar-collapse.in {
    z-index: 2;
    opacity: 1;
  }
}
.navbar .submenu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  z-index: 2;
  transform: translateX(-100%);
  transition: transform 0.2s;
}
@media (max-width: 991px) {
  .navbar .submenu {
    display: block;
  }
}
.navbar .submenu .submenu,
.navbar .submenu .submenu .submenu__list li a {
  width: 230px;
}
.navbar .submenu .submenu .submenu,
.navbar .submenu .submenu .submenu .submenu__list li a {
  width: 210px;
}
.navbar .submenu .submenu__list {
  height: 100vh;
  background: #b7b7b7;
  width: calc(100% - 20px);
  list-style: none;
  padding: 0;
  position: relative;
}
.navbar .submenu .submenu__before {
  position: absolute;
  right: 0;
  top: 0;
  height: 100vh;
  width: 20px;
  z-index: 1;
  border-left: 1px solid #333;
  background: #aaaaaa;
}
.navbar .submenu .js-submenu__back .navbar__label {
  font-style: italic;
  opacity: 0.5;
}
.navbar .submenu.submenu--open {
  transform: translateX(0);
}
.navbar .submenu.submenu--open .submenu__list:after {
  display: block;
}

.header-border-bottom {
  position: fixed;
  left: 0;
  top: 50px;
  width: 100%;
  height: 5px;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1A000000', endColorstr='#00000000', GradientType=0);
  z-index: 1;
  margin: 0;
  border: 0;
}
@media (min-width: 992px) {
  .header-border-bottom {
    top: 80px;
  }
}
@media (min-width: 1200px) {
  .header-border-bottom {
    top: 100px;
  }
}

.navbar-focus-overlay {
  position: fixed;
  z-index: 2;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
  background: #333;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.navbar-focus-overlay.js-navbar-will-push.navbar-is-open {
  visibility: visible;
  opacity: 0.8;
}
@media (min-width: 992px) {
  .navbar-focus-overlay {
    display: none;
  }
}

@media (max-width: 992px) {
  .js-navbar-will-push {
    transform: translate(0);
    transition: transform 0.4s;
  }
  .js-navbar-will-push.navbar-is-open {
    transform: translateX(250px);
  }
}

@media (max-width: 992px) {
  .js-navbar-block-scroll.navbar-is-open {
    overflow: hidden;
  }
}

.main {
  background: grey;
  height: 100vh;
}


/*Downloaded from https://www.codeseek.co/tibomahe/vertical-multi-level-menu-QEzyPa */
//Bootstrap 'screen-md-min'
var mq = window.matchMedia('(max-width: 992px)');
mq.addListener(mobileNavbar);

//Move content on navbar open
$('#navbar').on('show.bs.collapse hide.bs.collapse', function() {
  $('.js-submenu').removeClass('submenu--open');
  $('.js-navbar-will-push, .js-navbar-block-scroll').toggleClass('navbar-is-open');
});
//Close navigation
$('.js-close-navbar').on('click', function() {
  $('#navbar').collapse('hide');
});

//Manage mobile navigation
mobileNavbar(mq);

function mobileNavbar() {
  if (mq.matches) {
    //Manage the multi-level dropdown on mobile
    $('.js-has-submenu').on('click', function(event) {
      event.preventDefault();
      var $target = $(event.currentTarget);
      $target.next('.js-submenu').toggleClass('submenu--open');
    });
    $('.js-submenu__back').on('click', function(event) {
      event.preventDefault();
      var $target = $(event.currentTarget),
        $targetSubmenu = $target.closest('.submenu'),
        $targetSubmenuFollowing = $target.closest('.submenu').find('.submenu');
      $targetSubmenu.closest('.submenu').toggleClass('submenu--open');
      //Remove all submenus when the supmenu is closed
      if ($targetSubmenuFollowing.length) {
        $targetSubmenuFollowing.each(function(index, element) {
          $(element).removeClass('submenu--open');
        });
      }
    });
  } else {
    $('.js-has-submenu').off('click');
  }
}

Comments