LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

CSS
@import url("https://getbootstrap.com/dist/css/bootstrap.css");
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css");
body {
  background: none repeat scroll 0 0 white;
}

nav.sidebar-menu-collapsed {
  width: 50px;
}

nav.sidebar-menu-expanded {
  width: 106px;
}

nav.sidebar {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  background: none repeat scroll 0 0 #0099ff;
  color: white;
  padding: 20px 10px;
}

nav.sidebar a#justify-icon {
  outline: 0;
  color: white;
  font-size: 24px;
  font-style: normal;
}

nav.sidebar a#logout-icon {
  outline: 0;
  color: white;
  font-size: 24px;
  font-style: normal;
  position: absolute;
  bottom: 10px;
  left: 10px;
}

nav.sidebar ul {
  margin: 0;
  padding: 0;
  margin-top: 60px;
}

nav.sidebar ul li {
  margin: 0;
  padding: 0;
  margin-top: 20px;
  list-style-type: none;
}

nav.sidebar ul li a.expandable {
  outline: 0;
  color: white;
  text-decoration: none;
  font-size: 20px;
}

nav.sidebar ul li a.expandable:hover {
  color: #bbbbbb;
}

nav.sidebar ul li a.expandable span.expanded-element {
  margin-left: 2px;
  display: none;
  font-size: 11px;
  position: relative;
  bottom: 2px;
}

nav.sidebar ul li.active {
  background: none repeat scroll 0 0 black;
  border-radius: 4px;
  text-align: center;
  margin-left: -4px;
  padding: 4px;
}

nav.sidebar ul li.active a.expandable {
  color: white !important;
}

nav.sidebar ul li.active a.expandable:hover {
  color: white !important;
}
JS
(function() {
  $(function() {
    var collapseMyMenu, expandMyMenu, hideMenuTexts, showMenuTexts;
    expandMyMenu = function() {
      return $("nav.sidebar").removeClass("sidebar-menu-collapsed").addClass("sidebar-menu-expanded");
    };
    collapseMyMenu = function() {
      return $("nav.sidebar").removeClass("sidebar-menu-expanded").addClass("sidebar-menu-collapsed");
    };
    showMenuTexts = function() {
      return $("nav.sidebar ul a span.expanded-element").show();
    };
    hideMenuTexts = function() {
      return $("nav.sidebar ul a span.expanded-element").hide();
    };
    return $("#justify-icon").click(function(e) {
      if ($(this).parent("nav.sidebar").hasClass("sidebar-menu-collapsed")) {
        expandMyMenu();
        showMenuTexts();
        $(this).css({
          color: "#000"
        });
      } else if ($(this).parent("nav.sidebar").hasClass("sidebar-menu-expanded")) {
        collapseMyMenu();
        hideMenuTexts();
        $(this).css({
          color: "#FFF"
        });
      }
      return false;
    });
  });

}).call(this);
Host Instantly Drag and Drop Website Builder

 

Description

Bootstrap SideBar
Term
Mon, 11/27/2017 - 21:34

Related Codes

Pen ID
Pen ID
Pen ID