Side nav collapse to icon

An experiment involving a side navigation bar that collapses to icons on click

by Vijay Koushik

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="body">
  <div class="icon-bar acrylic">
    <a href="javascript:void(0)" id="toggleMenu"><i class="fa fa-bars"></i></a>
    <a class="" href="#"><i class="fa fa-home"></i><span class="nav-text collapse">Home</span></a>
    <a href="#"><i class="fa fa-search"></i><span class="nav-text collapse">Search</span></a>
    <a href="#"><i class="fa fa-envelope"></i><span class="nav-text collapse">Inbox</span></a>
    <a href="#"><i class="fa fa-globe"></i><span class="nav-text collapse">Notifications</span></a>
    <a href="#"><i class="fa fa-trash"></i><span class="nav-text collapse">Trash</span></a>
  </div>
  <div id="main">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac dictum erat, at ultrices sem. Curabitur purus sapien, mattis quis augue quis, vulputate rhoncus est. Ut convallis sem quis velit venenatis volutpat. Sed suscipit porttitor vestibulum. Maecenas
      placerat diam sem, quis tincidunt turpis efficitur ut. Vestibulum sed nisi eu ipsum dignissim ornare. Duis sit amet libero at lectus sagittis fringilla. Aenean fermentum quam ante. Nullam sed nisl ut ex dignissim accumsan. Ut dapibus finibus mattis.
    </p>
    <p>
      Phasellus luctus nibh non mattis varius. Cras suscipit lorem eget dolor bibendum malesuada in nec turpis. Fusce sed malesuada mauris, non elementum sapien. Aenean sed hendrerit est. Aliquam turpis sapien, pretium eu mollis mattis, aliquam vel massa. Ut
      sollicitudin consectetur eros non placerat. Morbi imperdiet auctor neque, at gravida libero posuere non. Suspendisse gravida cursus sem, pellentesque egestas libero dapibus vel. Donec pellentesque bibendum augue, ut laoreet lectus aliquam vitae.
    </p>
    <p>
      Vivamus fermentum placerat eros, dictum placerat justo pharetra id. Mauris at...

CSS

.icon-bar {
  width: 70px;
  /* Set a specific width */
  background-color: rgba(85, 85, 85, 0.5);
  /* Dark-grey background */
  height: 100%;
  position: fixed !important;
  left: 0;
  top: 0;
  transition: width 0.2s;
}

.icon-bar a {
  display: block;
  /* Make the links appear below each other instead of side-by-side */
  text-align: left;
  /* Center-align text */
  padding: 16px;
  /* Add some padding */
  transition: all 0.3s ease;
  /* Add transition for hover effects */
  color: white;
  /* White text color */
  font-size: 36px;
  /* Increased font-size */
  position: relative;
  z-index: 2;
}

.icon-bar a:hover {
  background: linear-gradient(to right,rgba(255, 255, 255, 0.5),rgba(255, 255, 255, 0));
  /* Add a hover color */
}

.active {
  background-color: #111;
  /* Add an active/current color */
}

.nav-text {
  text-decoration: none;
  padding-left: 15px;
}

.collapse {
  display: none;
}

#main {
  background: #fff;
  margin-left: 70px;
  transition: margin-left 0.3s;
}

#main p {
  padding: 12px;
}

.in {
  display: inline-block !important;
}

.expanded {
  width: 300px;
}

.toggle-left {
  margin-left: 300px !important;
}

#body {
  margin: 20px;
  position: relative;
}

.acrylic:before {
  content: " ";
  background: url('https://static.pexels.com/photos/207153/pexels-photo-207153.jpeg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  filter: blur(5px);
  z-index: -1
}

.acrylic {
  background: rgba(17, 17, 17, 1);
  position: relative;
  z-index: 1;
}

.acrylic:after {
  content: " ";
  background:...

JavaScript

$(document).ready(function() {
  $('#toggleMenu').click(function() {
    $('.icon-bar').toggleClass('expanded');
    $('#main').toggleClass('toggle-left');
    $('.collapse').toggleClass('in');
  })
});
//# sourceURL=sideNav.js