8+ JavaScript Sidebar Menu Examples

This post contains a total of 8+ Hand-Picked JavaScript Sidebar Menu Examples with Source Code. All these Sidebar menus are made using JavaScript and Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

JavaScript Sidebar Menu Examples

1. By Avinash

Made by Avinash. Simple Responsive JavaScript Sidebar Menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto'>
<style>
body, html {
  height: 100%;
  overflow: hidden;
  margin: 0;
  font-family: 'Roboto', sans-serif;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.container {
  height: 100%;
  display: flex;
}
.container > .left {
  width: 30%;
  max-width: 300px;
}
.container > .right {
  position: relative;
  flex-grow: 1;
  background-color: #f5d500;
  color: #d50a1f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5em;
  font-weight: bold;
}
.menu input[type=radio],
.menu-toggle {
  display: none;
}
.menu .collapsed-menu {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: max-height .1s ease-out,
              opacity 0.1s ease-in;
}
.menu > li > label,
.collapsed-menu li {
  display: block;
  cursor: pointer;
  padding: 0.7em;
}
.collapsed-menu li {
  padding-left: 2em;
}
.menu > li > label:hover,
.collapsed-menu li:hover {
  background-color: #d9d9d9; 
}
.menu input[type=radio]:checked ~ .collapsed-menu {
  max-height: 300px;
  opacity: 1;
  visibility: visible;
  transition: max-height .35s ease-out,
              opacity 0.1s ease-in 0.2s;
}

@media(max-width: 640px) {
  .container {
    overflow: hidden;
    transform: translateX(-300px);
    width: calc(100% + 300px);
    transition: transform 0.2s ease-out;
  }
  .container > .left {
    min-width: 300px;
  }
  .menu-toggle {
    display: block;
    position: absolute;
    cursor: pointer;
    left: 20px;
    top: 20px;
  }
  .menu-toggle div {
    width: 35px;
    height: 5px;
    background-color: #555;
    margin: 6px 0;
  }
}
</style>
</head>
<body>
  <div class="container">
    <div class="left">
      <ul class="menu">
        <li>
          <input type="radio" id="menu-css" name="menu-item" />
          <label for="menu-css">CSS</label>
          <ul class="collapsed-menu">
            <li>Color</li>
            <li>Grid</li>
            <li>Helpers</li>
            <li>Media</li>
            <li>Pulse</li>
          </ul>
        </li>
        <li>
          <input type="radio" id="menu-component" name="menu-item" />
          <label for="menu-component">Component</label>
          <ul class="collapsed-menu">
            <li>Badges</li>
            <li>Buttons</li>
            <li>Breadcumbs</li>
            <li>Cards</li>
            <li>Chips</li>
          </ul>
        </li>
        <li>
          <input type="radio" id="menu-js" name="menu-item" />
          <label for="menu-js">Javascript</label>
          <ul class="collapsed-menu">
            <li>Carausel</li>
            <li>Collapsible</li>
            <li>Dialogs</li>
            <li>Dropdown</li>
            <li>Parallax</li>
          </ul>
        </li>
        <li>
          <input type="radio" id="menu-mobile" name="menu-item" />
          <label for="menu-mobile">Mobile</label>
          <ul class="collapsed-menu">
            <li>Navbar</li>
            <li>Toast</li>
            <li>Media</li>
            <li>Tabs</li>
            <li>Hamburger</li>
          </ul>
        </li>
        <li>
          <input type="radio" id="menu-showcase" name="menu-item" />
          <label for="menu-showcase">Showcase</label>
          <ul class="collapsed-menu">
            <li>Gold</li>
            <li>Silver</li>
            <li>Trophies</li>
            <li>Medals</li>
            <li>Bronze</li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="right">
      <div class="menu-toggle">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="text-container"></div>
    </div>
  </div>
      <script>
let isMenuOpen = false,mq;
document.querySelectorAll('.collapsed-menu > li').forEach(el => {
  el.addEventListener('click', event => {
    document.querySelector('.right > .text-container').innerHTML = event.target.innerHTML;
    if (window.matchMedia) {
      mq = window.matchMedia('(min-width: 640px)');
      onMediaChange(mq);
    }
  });
});
document.querySelector('.menu-toggle').addEventListener('click', () => {
  if (!isMenuOpen) {
    openMenu();
  } else {
    closeMenu();
  }
});

if (window.matchMedia) {
  mq = window.matchMedia('(min-width: 640px)');
  mq.addListener(onMediaChange);
}

function closeMenu() {
  document.querySelector('.container').style.transform = 'translateX(-300px)';
  isMenuOpen = false;
}

function openMenu() {
  document.querySelector('.container').style.transform = 'translateX(0)';
  isMenuOpen = true;
}

function onMediaChange(mq) {
  if (mq.matches) {
    document.querySelector('.container').style.transform = 'translateX(0)';
  } else {
    closeMenu();
  }
}
    </script>
</body>
</html>

2. By Jack Cohle

Made by Jack Cohle. Advanced Multi level sidebar menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&amp;subset=latin-ext" rel="stylesheet">
  <link rel='stylesheet' href='https://cdn.materialdesignicons.com/2.1.99/css/materialdesignicons.min.css'>
<style>
body {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #777;
  line-height: normal;
  background-color: #eee;
}

.sidebar-navigation {
  width: 400px;
  height: auto;
  background-color: #fff;
  margin: 50px auto;
  webkit-box-shadow: 3px 5px 10px 0px rgba(0, 0, 0, 0.16);
  -moz-box-shadow: 3px 5px 10px 0px rgba(0, 0, 0, 0.16);
  box-shadow: 3px 5px 10px 0px rgba(0, 0, 0, 0.16);
}
.sidebar-navigation .title {
  display: block;
  font-size: 1.2em;
  background-color: #1e1e1e;
  padding: 20px 25px;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.sidebar-navigation > ul > li > a {
  text-transform: uppercase;
}
.sidebar-navigation ul {
  margin: 0;
  padding: 0;
}
.sidebar-navigation ul li {
  display: block;
}
.sidebar-navigation ul li a {
  position: relative;
  display: block;
  font-size: 1em;
  font-weight: 600;
  padding: 20px 25px;
  text-decoration: none;
  color: #2e2e2e;
  letter-spacing: 0.02em;
  border-bottom: 1px solid #eee;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.sidebar-navigation ul li a em {
  font-size: 24px;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  padding: 5px;
  border-radius: 50%;
}
.sidebar-navigation ul li:hover > a, .sidebar-navigation ul li.selected > a {
  background-color: #ecf0f1;
  color: #495d62;
  border-color: rgba(255, 255, 255, 0.1);
}
.sidebar-navigation ul li ul {
  display: none;
}
.sidebar-navigation ul li ul.open {
  display: block;
}
.sidebar-navigation ul li ul li a {
  color: #495d62;
  border-color: rgba(255, 255, 255, 0.1);
}
.sidebar-navigation ul li ul li a:before {
  content: "";
  width: 10px;
  height: 1px;
  margin-right: 5px;
  display: inline-block;
  vertical-align: middle;
  background-color: #495d62;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.sidebar-navigation ul li ul li:hover > a, .sidebar-navigation ul li ul li.selected > a {
  background-color: #e6ebed;
}
.sidebar-navigation ul li ul li:hover > a:before, .sidebar-navigation ul li ul li.selected > a:before {
  margin-right: 10px;
}
.sidebar-navigation ul li ul li.selected.selected--last > a {
  background-color: #94aab0;
  color: #fff;
}
.sidebar-navigation ul li ul li.selected.selected--last > a:before {
  background-color: #fff;
}

.subMenuColor1 {
  background-color: #fbfcfc;
}

.subMenuColor2 {
  background-color: white;
}

.subMenuColor2 {
  background-color: white;
}

.subMenuColor2 {
  background-color: white;
}

.subMenuColor2 {
  background-color: white;
}

.subMenuColor2 {
  background-color: white;
}

.subMenuColor2 {
  background-color: white;
}

.subMenuColor2 {
  background-color: white;
}

.subMenuColor2 {
  background-color: white;
}

.subMenuColor2 {
  background-color: white;
}
</style>
</head>
<body>
  <div class="sidebar-navigation">
  <strong class="title">Sidebar Menu</strong>
  <ul>
      <li><a href="#">Application <em class="mdi mdi-chevron-down"></em></a>
          <ul>
              <li><a href="#">Mobile <em class="mdi mdi-chevron-down"></em></a>
              <ul>
                  <li><a href="#">Social media</a></li>
                  <li><a href="#">Security</a></li>
                  <li><a href="#">Project</a></li>
                  <li><a href="#">Hardware</a></li>
                  <li><a href="#">Activity <em class="mdi mdi-chevron-down"></em></a>
                      <ul>
                          <li><a href="#">Social media</a></li>
                          <li><a href="#">Security</a></li>
                          <li><a href="#">Project</a></li>
                          <li><a href="#">Hardware</a></li>
                          <li><a href="#">Activity</a></li>
                      </ul>
                  </li>
              </ul>
              </li>
              <li><a href="#">Technology</a></li>
              <li><a href="#">Game</a></li>
              <li><a href="#">Software</a></li>
              <li><a href="#">Internet</a></li>
          </ul>
      </li>
      <li><a href="#">Game</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Review <em class="mdi mdi-chevron-down"></em></a>
          <ul>
              <li><a href="#">All Reviews</a></li>
              <li><a href="#">Galleries</a></li>
              <li class="selected"><a href="#">How To</a></li>
              <li><a href="#">Mobile</a></li>
              <li><a href="#">Software</a></li>
              <li><a href="#">Lists</a></li>
              <li><a href="#">Game</a></li>
              <li><a href="#">Technology</a></li>
              <li><a href="#">Social Media</a></li>
              <li><a href="#">Internet</a></li>
              <li><a href="#">Security</a></li>
              <li><a href="#">Comparison</a></li>
              <li><a href="#">Campaign</a></li>
              <li><a href="#">Hardware</a></li>
          </ul>
      </li>
      <li><a href="#">Video</a></li>
      <li><a href="#">Q-A</a></li>
  </ul>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
      <script>
$(function () {
  var $ul = $('.sidebar-navigation > ul');

  $ul.find('li a').click(function (e) {
    var $li = $(this).parent();

    if ($li.find('ul').length > 0) {
      e.preventDefault();

      if ($li.hasClass('selected')) {
        $li.removeClass('selected').find('li').removeClass('selected');
        $li.find('ul').slideUp(400);
        $li.find('a em').removeClass('mdi-flip-v');
      } else {

        if ($li.parents('li.selected').length == 0) {
          $ul.find('li').removeClass('selected');
          $ul.find('ul').slideUp(400);
          $ul.find('li a em').removeClass('mdi-flip-v');
        } else {
          $li.parent().find('li').removeClass('selected');
          $li.parent().find('> li ul').slideUp(400);
          $li.parent().find('> li a em').removeClass('mdi-flip-v');
        }

        $li.addClass('selected');
        $li.find('>ul').slideDown(400);
        $li.find('>a>em').addClass('mdi-flip-v');
      }
    }
  });


  $('.sidebar-navigation > ul ul').each(function (i) {
    if ($(this).find('>li>ul').length > 0) {
      var paddingLeft = $(this).parent().parent().find('>li>a').css('padding-left');
      var pIntPLeft = parseInt(paddingLeft);
      var result = pIntPLeft + 20;

      $(this).find('>li>a').css('padding-left', result);
    } else {
      var paddingLeft = $(this).parent().parent().find('>li>a').css('padding-left');
      var pIntPLeft = parseInt(paddingLeft);
      var result = pIntPLeft + 20;

      $(this).find('>li>a').css('padding-left', result).parent().addClass('selected--last');
    }
  });

  var t = ' li > ul ';
  for (var i = 1; i <= 10; i++) {if (window.CP.shouldStopExecution(0)) break;
    $('.sidebar-navigation > ul > ' + t.repeat(i)).addClass('subMenuColor' + i);
  }window.CP.exitedLoop(0);

  var activeLi = $('li.selected');
  if (activeLi.length) {
    opener(activeLi);
  }

  function opener(li) {
    var ul = li.closest('ul');
    if (ul.length) {

      li.addClass('selected');
      ul.addClass('open');
      li.find('>a>em').addClass('mdi-flip-v');

      if (ul.closest('li').length) {
        opener(ul.closest('li'));
      } else {
        return false;
      }

    }
  }

});
    </script>
</body>
</html>

3. By Piyush

Made by Piyush. Multilevel JavaScript Sidebar Menu with Collapsing accordion using Active Class. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css'>
<style>
* {
	margin: 0;
	padding: 0;
}
/* Scrollbar-effect------- */
#accordian::-webkit-scrollbar {
    width: 5px;
    height: 8px;
}
#accordian::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #e4e4e4;
}
#accordian::-webkit-scrollbar-thumb {
    background: #0089ff;
    border-radius: 10px;
    transition: 0.5s;
}
#accordian::-webkit-scrollbar-thumb:hover {
    background: #d5b14c;
    transition: 0.5s;
}



/* --------- */
body {
	background: #4EB889;
	font-family: Nunito, arial, verdana;
}

#accordian {
	background: #fff;
	width: 250px;
	padding: 10px;
	float: left;
	height: 100vh;
	overflow-x: hidden;
}


#accordian a {
	
	
	
}


i {
	margin-right: 10px;
}

#accordian li {
	list-style-type: none;
}

#accordian ul li a{
	color: #9c9c9c;
	text-decoration: none;
	font-size: 15px;
	display: block;
/* 	line-height: 34px; */
	padding: 12px 15px;
	transition: all 0.15s;
	position: relative;
	border-radius: 3px;
}

#accordian>ul.show-dropdown>li.active>a,
#accordian>ul>li>ul.show-dropdown>li.active>a,
#accordian>ul>li>ul>li>ul.show-dropdown>li.active>a,
#accordian>ul>li>ul>li>ul>li>ul.show-dropdown>li.active>a,
#accordian>ul>li>ul>li>ul>li>ul>li>ul.show-dropdown>li.active>a{
	background-color: #a8d4fb;
    color: #0089ff;
    box-shadow: 0px 1px 2px rgba(0, 137, 255, 0.2);
}

#accordian>ul>li>ul,
#accordian>ul>li>ul>li>ul,
#accordian>ul>li>ul>li>ul>li>ul,
#accordian>ul>li>ul>li>ul>li>ul>li>ul {
	display: none;
}


#accordian>ul>li.active>ul.show-dropdown,
#accordian>ul>li>ul>li.active>ul.show-dropdown,
#accordian>ul>li>ul>li>ul>li.active>ul.show-dropdown,
#accordian>ul>li>ul>li>ul>li>ul>li.active>ul.show-dropdown {
	display: block;
}

#accordian>ul>li>ul,
#accordian>ul>li>ul>li>ul,
#accordian>ul>li>ul>li>ul>li>ul,
#accordian>ul>li>ul>li>ul>li>ul>li>ul {
	padding-left: 20px;
}

#accordian a:not(:only-child):after {
	content: "\f105";
    position: absolute;
    right: 20px;
    top: 14px;
    font-size: 15px;
    font-family: "Font Awesome 5 Free";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 900;
    transition: 0.5s;
}

#accordian .active>a:not(:only-child):after {
		transform: rotate(90deg);
}
</style>
</head>
<body>
  <div id="accordian">
            <ul class="show-dropdown">
                <li>
                    <a href="javascript:void(0);"><i class="fas fa-tachometer-alt"></i>Dashboard</a>
                </li>
                <li>
                    <a href="javascript:void(0);"><i class="far fa-address-book"></i>Address Book</a>
                    <ul>
                        <li><a href="javascript:void(0);">Reports</a></li>
                        <li><a href="javascript:void(0);">Search</a></li>
                        <li><a href="javascript:void(0);">Graphs</a></li>
                        <li><a href="javascript:void(0);">Settings</a></li>
                    </ul>
                </li>
                <li class="active">
                    <a href="javascript:void(0);"><i class="far fa-clone"></i>Components</a>
                    <ul class="show-dropdown">
                        <li><a href="javascript:void(0);">Today's tasks</a></li>
                        <li class="active">
                            <a href="javascript:void(0);">DrillDown (active)</a>
                            <ul class="show-dropdown">
                                <li><a href="javascript:void(0);">Today's tasks</a></li>
                                <li class="active"><a href="javascript:void(0);">Urgent</a></li>
                                <li>
                                    <a href="javascript:void(0);">Overdues</a>
                                    <ul>
                                        <li><a href="javascript:void(0);">Today's tasks</a></li>
                                        <li><a href="javascript:void(0);">Urgent</a></li>
                                        <li><a href="javascript:void(0);">Overdues</a></li>
                                        <li><a href="javascript:void(0);">Recurring</a></li>
                                        <li>
                                            <a href="javascript:void(0);">Calendar</a>
                                            <ul>
                                                <li><a href="javascript:void(0);">Current Month</a></li>
                                                <li><a href="javascript:void(0);">Current Week</a></li>
                                                <li><a href="javascript:void(0);">Previous Month</a></li>
                                                <li><a href="javascript:void(0);">Previous Week</a></li>
                                                <li><a href="javascript:void(0);">Next Month</a></li>
                                                <li><a href="javascript:void(0);">Next Week</a></li>
                                                <li><a href="javascript:void(0);">Team Calendar</a></li>
                                                <li><a href="javascript:void(0);">Private Calendar</a></li>
                                                <li><a href="javascript:void(0);">Settings</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li><a href="javascript:void(0);">Recurring</a></li>
                                <li><a href="javascript:void(0);">Settings</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Overdues</a>
                            <ul>
                                <li><a href="javascript:void(0);">Today's tasks</a></li>
                                <li><a href="javascript:void(0);">Urgent</a></li>
                                <li><a href="javascript:void(0);">Overdues</a></li>
                                <li><a href="javascript:void(0);">Recurring</a></li>
                                <li><a href="javascript:void(0);">Settings</a></li>
                            </ul>
                        </li>
                        <li><a href="javascript:void(0);">Recurring</a></li>
                        <li><a href="javascript:void(0);">Settings</a></li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);"><i class="far fa-calendar-alt"></i>Calendar</a>
                    <ul>
                        <li><a href="javascript:void(0);">Current Month</a></li>
                        <li><a href="javascript:void(0);">Current Week</a></li>
                        <li><a href="javascript:void(0);">Previous Month</a></li>
                        <li><a href="javascript:void(0);">Previous Week</a></li>
                        <li><a href="javascript:void(0);">Next Month</a></li>
                        <li><a href="javascript:void(0);">Next Week</a></li>
                        <li><a href="javascript:void(0);">Team Calendar</a></li>
                        <li><a href="javascript:void(0);">Private Calendar</a></li>
                        <li><a href="javascript:void(0);">Settings</a></li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);"><i class="far fa-chart-bar"></i>Charts</a>
                    <ul>
                        <li><a href="javascript:void(0);">Global favs</a></li>
                        <li><a href="javascript:void(0);">My favs</a></li>
                        <li><a href="javascript:void(0);">Team favs</a></li>
                        <li><a href="javascript:void(0);">Settings</a></li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);"><i class="far fa-copy"></i>Documents</a>
                </li>
                <li>
                    <a href="javascript:void(0);"><i class="far fa-bookmark"></i>Bookmarks</a>
                </li>
                <li>
                    <a href="javascript:void(0);"><i class="far fa-envelope"></i>Mail</a>
                </li>
                <li>
                    <a href="javascript:void(0);"><i class="far fa-heart"></i>Favorite</a>
                </li>

            </ul>
        </div>
  <script src='https://code.jquery.com/jquery-3.4.1.min.js'></script>
      <script>
$(document).ready(function () {
  $("#accordian a").click(function () {
    var link = $(this);
    var closest_ul = link.closest("ul");
    var parallel_active_links = closest_ul.find(".active");
    var closest_li = link.closest("li");
    var link_status = closest_li.hasClass("active");
    var count = 0;

    closest_ul.find("ul").slideUp(function () {
      if (++count == closest_ul.find("ul").length) {
        parallel_active_links.removeClass("active");
        parallel_active_links.children("ul").removeClass("show-dropdown");
      }
    });

    if (!link_status) {
      closest_li.children("ul").slideDown().addClass("show-dropdown");
      closest_li.parent().parent("li.active").find('ul').find("li.active").removeClass("active");
      link.parent().addClass("active");
    }
  });
});

// --------for-active-class-on-other-page-----------
jQuery(document).ready(function ($) {
  // Get current path and find target link
  var path = window.location.pathname.split("/").pop();

  // Account for home page with empty path
  if (path == '') {
    path = 'index.html';
  }

  var target = $('#accordian li a[href="' + path + '"]');
  // Add active class to target link
  target.parents("li").addClass('active');
  target.parents("ul").addClass("show-dropdown");
});
    </script>
</body>
</html>

4. By Ivan

Made by Ivan. Simple sidebar menu with Icons. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> 
<style>
body {
	font-family: sans-serif;
	font-size: 16px;
	color: #fff;
}
ul.sidebar-menu {
    margin: 0;
    padding: 0;
    max-width: 400px;
    list-style: none;
    list-style-type: none;
}
.sidebar-menu li a span {
	margin-right: 20px;
  color: #fff;
}
.sidebar-menu li a  {
	background-color: #4d5158;
	padding: 20px 25px;
	display: block;
	text-decoration: none;
	color: #fff;
}
.sidebar-menu li a:hover  {
	background-color: #52565d;
	padding: 20px 25px;
	display: block;
	text-decoration: none;
	color: #fff;
}
li.have-children ul {
	padding: 0px;
} 
li.have-children ul li a {
	background-color: #3c3636;
	padding-left: 62px;
} 
li.have-children ul li a:hover {
  color: #fff;
	background-color: #52565d;
	padding-left: 62px;
} 
li.have-children, li {
	position: relative;
}
.have-children span::after {
  position: absolute;
  right: 30px;
  content: "\f054";
  color: #fff;
  transition: all .5s;
}
li.active.have-children span::after {
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}
.sidebar-menu .have-children > ul {
    display: none;
}
</style>
</head>
<body>
  <ul class="sidebar-menu">
    <li><span class="nav-section-title"></span></li>
    <li class="have-children"><a href="#"><span class="fa fa-university"></span>Exhibitions</a>
      <ul>
        <li><a href="#">Add Exhibition</a></li>
        <li><a href="#">View Exhibitions</a></li>
      </ul>
    </li>
    <li class="have-children"><a href="#"><span class="fa fa-tags"></span>Category</a>
      <ul>
        <li><a href="#">Add Category</a></li>
        <li><a href="#">View Categories</a></li>
      </ul>
    </li>
    <li class="have-children"><a href="#"><span class="fa fa-trophy"></span>Award</a>
      <ul>
        <li><a href="#">Add Award</a></li>
        <li><a href="#">View Awards</a></li>
      </ul>
    </li>
    <li class="have-children"><a href="#"><span class="fa fa-gavel"></span>Jury</a>
      <ul>
        <li><a href="#">Add Jury</a></li>
        <li><a href="#">View Juries</a></li>
      </ul>
    </li>
    <li class="have-children"><a href="#"><span class="fa fa-user-o"></span>Author</a>
      <ul>
        <li><a href="#">Add Author</a></li>
        <li><a href="#">View Authors</a></li>
      </ul>
    </li>
    <li><a href="#"><span class="fa fa-picture-o"></span>Gallery</a></li>
    <li class="have-children"><a href="#"><span class="fa fa-flag"></span>Reports</a>
      <ul>
        <li><a href="#">View Judging points</a></li>
        <li><a href="#">Create Acceptances List</a></li>
        <li><a href="#">Create Awarded List</a></li>
        <li><a href="#">View Candidates for Awards</a></li>
        <li><a href="responsive_table.html">Send Report Cards</a></li>
      </ul>
    </li>
    <li><a href="#"><span class="fa fa-envelope-o"></span>Messages</a></li>
    <li><a href="#"><span class="fa fa-gear"></span>Configuration</a></li>
  </ul>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
      <script>
$(document).ready(function () {

  $(".sidebar-menu > li.have-children a").on("click", function (i) {
    i.preventDefault();
    if (!$(this).parent().hasClass("active")) {
      $(".sidebar-menu li ul").slideUp();
      $(this).next().slideToggle();
      $(".sidebar-menu li").removeClass("active");
      $(this).parent().addClass("active");
    } else
    {
      $(this).next().slideToggle();
      $(".sidebar-menu li").removeClass("active");
    }
  });
});
    </script>
</body>
</html>

5. By Muhammad Fadzrin Madu

Made by Muhammad Fadzrin Madu. JavaScript Side Menu Bar with sub-menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'>
<style>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  user-select: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.btn{
  position: absolute;
  top: 15px;
  left: 45px;
  height: 45px;
  width: 45px;
  text-align: center;
  background: #1b1b1b;
  border-radius: 3px;
  cursor: pointer;
  transition: left 0.4s ease;
}
.btn.click{
  left: 260px;
}
.btn span{
  color: white;
  font-size: 28px;
  line-height: 45px;
}
.btn.click span:before{
  content: '\f00d';
}
.sidebar{
  position: fixed;
  width: 250px;
  height: 100%;
  left: -250px;
  background: #1b1b1b;
  transition: left 0.4s ease;
}
.sidebar.show{
  left: 0px;
}
.sidebar .text{
  color: white;
  font-size: 25px;
  font-weight: 600;
  line-height: 65px;
  text-align: center;
  background: #1e1e1e;
  letter-spacing: 1px;
}
nav ul{
  background: #1b1b1b;
  height: 100%;
  width: 100%;
  list-style: none;
}
nav ul li{
  line-height: 60px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
nav ul li:last-child{
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
nav ul li a{
  position: relative;
  color: white;
  text-decoration: none;
  font-size: 18px;
  padding-left: 40px;
  font-weight: 500;
  display: block;
  width: 100%;
  border-left: 3px solid transparent;
}
nav ul li.active a{
  color: cyan;
  background: #1e1e1e;
  border-left-color: cyan;
}
nav ul li a:hover{
  background: #1e1e1e;
}
nav ul ul{
  position: static;
  display: none;
}
nav ul .feat-show.show{
  display: block;
}
nav ul .serv-show.show1{
  display: block;
}
nav ul ul li{
  line-height: 42px;
  border-top: none;
}
nav ul ul li a{
  font-size: 17px;
  color: #e6e6e6;
  padding-left: 80px;
}
nav ul li.active ul li a{
  color: #e6e6e6;
  background: #1b1b1b;
  border-left-color: transparent;
}
nav ul ul li a:hover{
  color: cyan!important;
  background: #1e1e1e!important;
}
nav ul li a span{
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  font-size: 22px;
  transition: transform 0.4s;
}
nav ul li a span.rotate{
  transform: translateY(-50%) rotate(-180deg);
}
.content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #202020;
  z-index: -1;
  text-align: center;
}
.content .header{
  font-size: 45px;
  font-weight: 600;
}
.content p{
  font-size: 30px;
  font-weight: 500;
}
</style>
</head>
<body>
  <div class="btn">
  <span class="fas fa-bars"></span>
</div>
<nav class="sidebar">
  <div class="text">
    Side Menu
  </div>
  <ul>
    <li class="active"><a href="#">Dashboard</a></li>
    <li>
      <a href="#" class="feat-btn">Features
        <span class="fas fa-caret-down first"></span>
      </a>
      <ul class="feat-show">
        <li><a href="#">Pages</a></li>
        <li><a href="#">Elements</a></li>
      </ul>
    </li>
    <li>
      <a href="#" class="serv-btn">Services
        <span class="fas fa-caret-down second"></span>
      </a>
      <ul class="serv-show">
        <li><a href="#">App Design</a></li>
        <li><a href="#">Web Design</a></li>
      </ul>
    </li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Overview</a></li>
    <li><a href="#">Shortcuts</a></li>
    <li><a href="#">Feedback</a></li>
  </ul>
</nav>
<div class="content">
  <div class="header">
    Sidebar Menu with sub-menu
  </div>
  <p>
    HTML CSS & Javascript
  </p>
</div>
  <script src='https://code.jquery.com/jquery-3.4.1.js'></script>
      <script>
$('.btn').click(function () {
  $(this).toggleClass("click");
  $('.sidebar').toggleClass("show");
});
$('.feat-btn').click(function () {
  $('nav ul .feat-show').toggleClass("show");
  $('nav ul .first').toggleClass("rotate");
});
$('.serv-btn').click(function () {
  $('nav ul .serv-show').toggleClass("show1");
  $('nav ul .second').toggleClass("rotate");
});
$('nav ul li').click(function () {
  $(this).addClass("active").siblings().removeClass("active");
});
    </script>
</body>
</html>

6. By Karim Khan

Made by Karim Khan. Simple Responsive Sidebar menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.2.0/css/all.css'> 
<style>
.menu-wrapper {
    background-color: Tomato;
    position: absolute;
    top: 0;
    left: -100%;
    bottom: 0;
    width: 250px;
     /* overflow-y: auto;  */
}


.closeNavIcon-responsive {
    display: inline-block;
}

@keyframes move-sidebar {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0%);
    }
}

@keyframes move-sidebar-inside {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-100%);
    }
}

.menu-wrapper.show {
    left: 0;
    animation: move-sidebar 1s cubic-bezier(.01,.87,.36,.99);
}

.menu-wrapper.hide {
    left: 0;
    animation: move-sidebar-inside 1s cubic-bezier(.01,.87,.36,.99) 1 normal forwards;
}

.menu {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
}

.menu li {
    display: block;
    position: relative;
}

.menu li ul {
    background-color: #ec5539;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
    height: 0;
}

.menu li.active>ul {
    height: initial;
}

.menu a {
    color: #DDD;
    text-decoration: none;
    padding: 10px 5px;
    display: block;
    position: relative;
}

.menu a:hover,
.menu a:hover>i:first-child,
.menu li.active>a,
.menu li.active>a i {
    background-color: gold;
    color: #000;
}

.menu a .cavet {
    position: absolute;
    right: 10px;
    transform: rotate(0deg);
    transition: transform 0.5s;
    display: inline-block;
    width: 20px;
}

.menu li.active>a .cavet {
    transform: rotate(90deg);
}

.menu li+li a {
    border-top: 1px solid #ec5539;
}

.menu a i {
    display: inline-block;
    padding-right: 10px;
    text-align: center;
    width: 20px;
    color: #fff;
}

.menu,
.menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

::selection {
    background-color: none;
}

/* menu animated icon */
.menu-icon, .menu-icon:before, .menu-icon:after{
    display: inline-block;
    background-color: rgb(255, 255, 255);
    height: 5px;
    width: 30px;
    transition: transform 0.5s cubic-bezier(.01,.87,.36,.99);
    transform-origin: left;
    border-radius: 2px;
}

.menu-icon:before, .menu-icon:after{
    content: "";
    position: absolute;
    left: 0;
}

.menu-icon{
    position: relative;
    transition: background-color 5;
    animation: fadeIn 1s cubic-bezier(.01,.87,.36,.99) 0s 1 normal forwards;
}

.menu-icon:before{
    top: 210%;
}

.menu-icon:after{
    bottom: 210%;
}

.menu-icon.active{
    animation: fadeOut 0.5s cubic-bezier(.01,.87,.36,.99) 0s 1 normal forwards;
}

@keyframes fadeOut{
    from{background-color: rgb(255, 255, 255);}
    to{background-color: rgba(255, 255, 255, 0);}
}

@keyframes fadeIn{
    from{background-color: rgba(255, 255, 255, 0);}
    to{background-color: rgb(255, 255, 255);}
}

.menu-icon.active:before{
    transform: rotate(-45deg);
}

.menu-icon.active:after{
    transform: rotate(45deg);
}

.menu-wrapper{

}

.menu-icon-wrapper{
    height: 40px;
    position: relative;
    top: 38px;
    width: 50px;
    background: Tomato;
    position: absolute;
    left: 100%;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.menu-icon-wrapper a{
   margin-top: 18px;
   margin-left: 10px;
}
</style>
</head>
<body>
  <div class="menu-wrapper show">
            <div class="menu-icon-wrapper">
               <a href="" class="menu-icon active"></a>
            </div>
            <ul class="menu">
                <li><a href=""><i class="fas fa-tachometer-alt"></i> Dashboard</a></li>
                <li><a href=""><i class="fab fa-html5"></i> HTML</a></li>
                <li><a>
                    <i class="fab fa-css3-alt"></i> CSS <span class='cavet'><i class="fas fa-caret-right"></i></span></a>
                    <ul>
                        <li><a href=""><i class="fas fa-mobile"></i> Bootstrap</a></li>
                        <li><a href=""><i class="fas fa-glasses"></i> Semantic UI</a></li>
                    </ul>
                </li>
                <li><a href=""><i class="fab fa-php"></i> PHP</a></li>
                <li><a href=""><i class="fas fa-database"></i> Mysql</a></li>
                <li>
                    <a><i class="fab fa-js"></i> Javascript <span class='cavet'><i class="fas fa-caret-right"></i></span></a>
                    <ul>
                        <li><a href=""><i class="fab fa-vuejs"></i> Vue</a></li>
                        <li>
                            <a><i class="fab fa-react"></i> React <span class='cavet'><i class="fas fa-caret-right"></i></span></a>
                            <ul>
                                <li><a href=""><i class="fas fa-mobile"></i> React Native</a></li>
                                <li><a href=""><i class="fas fa-glasses"></i> React Augmented</a></li>
                            </ul>
                        </li>
                        <li><a href=""><i class="fab fa-angular"></i> Angular</a></li>
                    </ul>
                </li>
            </ul>
        </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
      <script>
$(".menu li").click(function (event) {
  event.stopPropagation(); //stop trigger parent
  var el = $(this).parents("li").siblings();
  el = el.length == 0 ? $(this).siblings() : el;
  el.find(".active").addBack().removeClass("active");

  if ($(this).hasClass("active")) {
    $(this).find(".active").addBack().removeClass("active");
  } else {
    $(this).addClass("active");
  }
});

// responsive menu for mobile and tablet
var responsive = function () {
  var s = 500;
  $(window).resize(function () {
    windowSize(s);
  });
  windowSize(s);
};

var windowSize = function (s) {
  var w = $(window).width();
  if (w <= s) {
    $(".menu-icon").removeClass("active");
    $(".menu-wrapper").addClass("hide").removeClass("show");
  } else {
    $(".menu-icon").addClass("active");
    $(".menu-wrapper").addClass("show").removeClass("hide");
  }
};

responsive();

$(".menu-icon").click(function (e) {
  e.preventDefault();
  $(this).toggleClass("active");

  //set default
  //$(this).parents(".menu-wrapper").addClass("hide").removeClass("show");

  if ($(this).hasClass("active")) {
    $(this).parents(".menu-wrapper").addClass("show").removeClass("hide");

  } else {
    $(this).parents(".menu-wrapper").addClass("hide").removeClass("show");
  }
});
    </script>
</body>
</html>

7. By Andhika Rachmat Ibrahim

Made by Andhika Rachmat Ibrahim. Basic Sidebar menu with Icons and Toggle Button. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css'>
<style>
.pusher {
  padding: 1em;
  transition: transform 0.2s linear;
}
.pusher.push {
  transform: translate3d(84px, 0, 0) !important;
  transition: transform 0.2s !important;
}
.pusher #toggle-btn {
  display: block;
}

.ui.left {
  transition: width 0.2s linear;
}
.ui.left .item {
  transition: transform 0.2s linear;
}
.ui.left .item i {
  transition: transform 0.2s linear;
}
.ui.left.labeled.icon {
  width: 84px !important;
}
.ui.left.labeled.icon .item {
  transition: transform 0.2s linear;
}
.ui.left.labeled.icon .item i {
  transition: transform 0.2s linear;
}
</style>
</head>
<body>
  <div class="ui left demo vertical inverted visible sidebar menu">
	<a class="item">
		<i class="home icon"></i>
		Home
	</a>
	<a class="item">
		<i class="block layout icon"></i>
		Topics
	</a>
	<a class="item">
		<i class="smile icon"></i>
		Friends
	</a>
</div>
<div class="pusher">
  <a href="#" id="toggle-btn">Toggle</a>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.js'></script>
      <script>
$("#toggle-btn").click(function () {
  $(".ui.sidebar").
  toggleClass("labeled icon");
  $(this).parent().toggleClass('push');
});
    </script>
</body>
</html>

8. By Tom Miller

Made by Tom Miller. JavaScript sidebar menu with Hamburger option. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://raw.githubusercontent.com/CKGrafico/Segoe-mdl2-assets-css/master/mdl2.css'>
<style>
html {
  height: 100%;
}

body {
  height: 100%;
  background: linear-gradient(#ffc2a4, #2f8882);
}

.bottom {
  position: absolute;
  bottom: 0;
  width: inherit;
}

.sidemenu {
  height: 100%;
  width: 50px;
  background: rgba(255, 255, 255, 0.4);
  transform: all 0.7s ease;
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}
.sidemenu .toggler {
  display: inline-block;
  width: 46px;
  margin-bottom: 0.5rem;
}
.sidemenu .item {
  border: 2px solid transparent;
}
.sidemenu .item:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.sidemenu i {
  color: #000000;
  padding: 16px;
  line-height: 21px;
  width: 21px;
  height: 21px;
}
.sidemenu span {
  display: none;
  color: #000000;
}

.closebtn {
  float: right;
  display: none;
}
</style>
</head>
<body>
  <div class="sidemenu">
 <div class="toggler item">
<a href="javascript:void(0)" onclick="toggleNav()">
 <i class="fa fa-bars fa-fw fa-lg" aria-hidden="true"></i>
 </a>
</div>
 <!--
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">
 <i class="fa fa-times fa-fw fa-2x" aria-hidden="true"></i>
 </a>
-->
  <div class="container">
  <div class="item">
<i class="fa fa-home fa-fw fa-lg" aria-hidden="true"></i>
    <span class="text-wrapper">Home</span>
  </div>
    <div class="item">
<i class="fa fa-home fa-fw fa-lg" aria-hidden="true"></i>
      <span class="text-wrapper">Home</span>
  </div>
    <div class="item">
<i class="fa fa-home fa-fw fa-lg" aria-hidden="true"></i>
      <span class="text-wrapper">Home</span>
  </div>
    <div class="item">
<i class="fa fa-home fa-fw fa-lg" aria-hidden="true"></i>
      <span class="text-wrapper">Home</span>
  </div>
    <div class="item">
<i class="fa fa-home fa-fw fa-lg" aria-hidden="true"></i>
      <span class="text-wrapper">Home</span>
  </div>
  </div>
  <div class="bottom item">
<i class="fa fa-cog fa-fw fa-lg" aria-hidden="true"></i>
    <span class="text-wrapper">Settings</span>
  </div>
</div>
  <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
  <script src='https://use.fontawesome.com/b7b3409bc5.js'></script>
      <script>
function setClassStyle(className, attribute, value) {
  var a = document.getElementsByClassName(className);
  for (var i = 0; i < a.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    a[i].style[attribute] = value;}window.CP.exitedLoop(0);
}
//Use Add or Remove class instead of style
function toggleNav() {
  if (document.querySelector(".sidemenu").hasAttribute("is-open")) {
    document.getElementsByClassName("sidemenu")[0].style.width = "50px";
    setClassStyle("text-wrapper", "display", "none");
    document.querySelector(".sidemenu").removeAttribute("is-open");
    document.querySelector(".sidemenu").setAttribute("is-closed", "");
  } else
  {
    document.getElementsByClassName("sidemenu")[0].style.width = "250px";
    setClassStyle("text-wrapper", "display", "initial");
    document.querySelector(".sidemenu").removeAttribute("is-closed");
    document.querySelector(".sidemenu").setAttribute("is-open", "");
  }
}
    </script>
</body>
</html>

9. By Sweta shrestha

Made by Sweta shrestha. Expanding Sidebar menu that expands on hover. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
* {
  box-sizing: border-box;
}

body {
  background-image: linear-gradient(0deg, #a1c4fd 0%, #c2e9fb 100%);
  font-family: "Open Sans", sans-serif;
  margin: 0;
}

nav {
  background: #262626;
  float: left;
  height: 100vh;
  left: 0;
  margin-right: 0;
  overflow: auto;
  padding: 0;
  transition: width 0.3s ease;
  position: fixed;
  top: 0;
  width: 63px;
  z-index: 1;
}
nav ul {
  margin: 0;
  padding: 0;
}
nav ul li {
  list-style: none;
}
nav ul li + li {
  border-top: 1px solid rgba(237, 237, 237, 0.05);
}
nav ul li a {
  color: #fff;
  display: block;
  font-size: 13px;
  height: 63px;
  opacity: 0.3;
  padding: 22px 0 22px 64px;
  position: relative;
  text-decoration: none;
  white-space: nowrap;
}
nav ul li a:hover {
  opacity: 1;
}
nav.hovered {
  width: 210px;
}
nav.hovered .support span {
  opacity: 0;
}
nav.hovered .support p {
  opacity: 1;
}

nav ul li a:before {
  background: url("https://www.dropbox.com/s/e817153nrze0hgo/ic-sprite.png?raw=1") no-repeat;
  content: "";
  width: 35px;
  height: 35px;
  position: absolute;
  top: 24%;
  right: auto;
  bottom: auto;
  left: 12px;
}
nav ul li.activities a:before {
  background-position: 0 0;
}
nav ul li.organisation a:before {
  background-position: 0 -59px;
}
nav ul li.published-files a:before {
  background-position: 0 -125px;
}
nav ul li.documents a:before {
  background-position: 0 -188px;
}
nav ul li.downloads a:before {
  background-position: 0 -252px;
}
nav ul li.settings a:before {
  background-position: 0 -316px;
}
nav ul li.activity-log a:before {
  background-position: 0 -379px;
}

.support {
  padding: 16px 13px 0;
}
.support span {
  background: url(https://www.dropbox.com/s/e817153nrze0hgo/ic-sprite.png?raw=1) no-repeat 0 -436px;
  display: block;
  height: 34px;
  text-indent: -9999px;
  transition: opacity 0.3s ease;
  width: 34px;
}
.support p {
  color: rgba(255, 255, 255, 0.3);
  display: block !important;
  font-size: 12px;
  padding: 0 7px;
  width: 181px;
  height: 48px;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.support p a {
  color: #00a8ff;
}

section {
  height: 100vh;
  margin-left: 63px;
  position: relative;
  width: calc(100% - 63px);
  transition: margin-left 0.5s ease;
}
section span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 40px;
  left: 50%;
  position: absolute;
  top: 50%;
  transition: all 2s ease-in-out;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

nav.hovered + section {
  margin-left: 210px;
  width: calc(100% - 210px);
}

@media all and (min-height: 500px) {
  .support, .support span {
    bottom: 20px;
    position: absolute;
  }
}
</style>
</head>
<body>
  <nav>
  <ul>
    <li class="activities"><a href="#">Activities</a></li>
    <li class="organisation"><a href="">Organisation</a></li>
    <li class="published-files"><a href="">Published Files</a></li>
    <li class="documents"><a href="#">Documents</a></li>
    <li class="downloads"><a href="#">Downloads</a></li>
    <li class="settings"><a href="#">Settings</a></li>
    <li class="activity-log"><a href="#">Activity log</a></li>
  </ul>
  <div class="support">
    <span>icon</span>
  </div>
</nav>
<section>
  <span>Hover on Menu</span>
</section>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
      <script>
$(document).ready(function () {
  $('nav').hover(function () {
    $(this).addClass('hovered');
  }, function () {
    $(this).removeClass('hovered');
  });

  $('nav ul li a').hover(function () {
    var content = $(this).html();
    $('section span').html(content);
  }, function () {
    $('section span').html("Hover on Menu");
  });
});
    </script>
</body>
</html>