Pro Sidebar Tempate HTML

 html code 

<div class="layout has-sidebar fixed-sidebar fixed-header">

  <aside id="sidebar" class="sidebar break-point-lg has-bg-image">

    <div class="image-wrapper">

      <img src="https://user-images.githubusercontent.com/25878302/144499035-2911184c-76d3-4611-86e7-bc4e8ff84ff5.jpg" alt="sidebar background" />

    </div>

    <div class="sidebar-layout">

      <div class="sidebar-header">

        <span style="

                text-transform: uppercase;

                font-size: 15px;

                letter-spacing: 3px;

                font-weight: bold;

              ">Pro Sidebar</span>

      </div>

      <div class="sidebar-content">

        <nav class="menu open-current-submenu">

          <ul>

            <li class="menu-item sub-menu">

              <a href="#">

                <span class="menu-icon">

                  <i class="ri-vip-diamond-fill"></i>

                </span>

                <span class="menu-title">Components</span>

                <span class="menu-suffix">&#x1F525;</span>

              </a>

              <div class="sub-menu-list">

                <ul>

                  <li class="menu-item">

                    <a href="#">

                      <span class="menu-title">Grid</span>

                    </a>

                  </li>

                  <li class="menu-item">

                    <a href="#">

                      <span class="menu-title">Layout</span>

                    </a>

                  </li>

                  <li class="menu-item sub-menu">

                    <a href="#">

                      <span class="menu-title">Forms</span>

                    </a>

                    <div class="sub-menu-list">

                      <ul>

                        <li class="menu-item">

                          <a href="#">

                            <span class="menu-title">Input</span>

                          </a>

                        </li>

                        <li class="menu-item">

                          <a href="#">

                            <span class="menu-title">Select</span>

                          </a>

                        </li>

                        <li class="menu-item sub-menu">

                          <a href="#">

                            <span class="menu-title">More</span>

                          </a>

                          <div class="sub-menu-list">

                            <ul>

                              <li class="menu-item">

                                <a href="#">

                                  <span class="menu-title">CheckBox</span>

                                </a>

                              </li>

                              <li class="menu-item">

                                <a href="#">

                                  <span class="menu-title">Radio</span>

                                </a>

                              </li>

                              <li class="menu-item sub-menu">

                                <a href="#">

                                  <span class="menu-title">Want more ?</span>

                                  <span class="menu-suffix">&#x1F914;</span>

                                </a>

                                <div class="sub-menu-list">

                                  <ul>

                                    <li class="menu-item">

                                      <a href="#">

                                        <span class="menu-prefix">&#127881;</span>

                                        <span class="menu-title">You made it </span>

                                      </a>

                                    </li>

                                  </ul>

                                </div>

                              </li>

                            </ul>

                          </div>

                        </li>

                      </ul>

                    </div>

                  </li>

                </ul>

              </div>

            </li>

            <li class="menu-item sub-menu">

              <a href="#">

                <span class="menu-icon">

                  <i class="ri-bar-chart-2-fill"></i>

                </span>

                <span class="menu-title">Charts</span>

              </a>

              <div class="sub-menu-list">

                <ul>

                  <li class="menu-item">

                    <a href="#">

                      <span class="menu-title">Pie chart</span>

                    </a>

                  </li>

                  <li class="menu-item">

                    <a href="#">

                      <span class="menu-title">Line chart</span>

                    </a>

                  </li>

                  <li class="menu-item">

                    <a href="#">

                      <span class="menu-title">Bar chart</span>

                    </a>

                  </li>

                </ul>

              </div>

            </li>

            <li class="menu-item sub-menu">

              <a href="#">

                <span class="menu-icon">

                  <i class="ri-shopping-cart-fill"></i>

                </span>

                <span class="menu-title">E-commerce</span>

              </a>

              <div class="sub-menu-list">

                <ul>

                  <li class="menu-item">

                    <a href="#">

                      <span class="menu-title">Products</span>

                    </a>

                  </li>

                  <li class="menu-item">

                    <a href="#">

                      <span class="menu-title">Orders</span>

                    </a>

                  </li>

                  <li class="menu-item">

                    <a href="#">

                      <span class="menu-title">credit card</span>

                    </a>

                  </li>

                </ul>

              </div>

            </li>

            <li class="menu-item sub-menu">

              <a href="#">

                <span class="menu-icon">

                  <i class="ri-global-fill"></i>

                </span>

                <span class="menu-title">Maps</span>

              </a>

              <div class="sub-menu-list">

                <ul>

                  <li class="menu-item">

                    <a href="#">

                      <span class="menu-title">Google maps</span>

                    </a>

                  </li>

                  <li class="menu-item">

                    <a href="#">

                      <span class="menu-title">Open street map</span>

                    </a>

                  </li>

                </ul>

              </div>

            </li>

            <li class="menu-item sub-menu">

              <a href="#">

                <span class="menu-icon">

                  <i class="ri-brush-3-fill"></i>

                </span>

                <span class="menu-title">Theme</span>

              </a>

              <div class="sub-menu-list">

                <ul>

                  <li class="menu-item">

                    <a href="#">

                      <span class="menu-title">Dark</span>

                    </a>

                  </li>

                  <li class="menu-item">

                    <a href="#">

                      <span class="menu-title">Light</span>

                    </a>

                  </li>

                </ul>

              </div>

            </li>

            <li class="menu-item">

              <a href="#">

                <span class="menu-icon">

                  <i class="ri-book-2-fill"></i>

                </span>

                <span class="menu-title">Documentation</span>

              </a>

            </li>

            <li class="menu-item">

              <a href="#">

                <span class="menu-icon">

                  <i class="ri-calendar-fill"></i>

                </span>

                <span class="menu-title">Calendar</span>

              </a>

            </li>

            <li class="menu-item">

              <a href="#">

                <span class="menu-icon">

                  <i class="ri-service-fill"></i>

                </span>

                <span class="menu-title">Examples</span>

              </a>

            </li>

          </ul>

        </nav>

      </div>

      <div class="sidebar-footer"><span>Sidebar footer</span></div>

    </div>

  </aside>

  <div id="overlay" class="overlay"></div>

  <div class="layout">

    <header class="header">

      <a id="btn-collapse" href="#">

        <i class="ri-menu-line ri-xl"></i>

      </a>

      <a id="btn-toggle" href="#" class="sidebar-toggler break-point-lg">

        <i class="ri-menu-line ri-xl"></i>

      </a>

    </header>

    <main class="content">

      <div>

        <h1>Pro Sidebar</h1>

        <p>

          Responsive layout with advanced sidebar menu built with SCSS and vanilla Javascript

        </p>

        <p>

          Full Code and documentation available on  <a href="https://github.com/azouaoui-med/pro-sidebar-template" target="_blank">Github</a>

        </p>

        <div>

          <a href="https://github.com/azouaoui-med/pro-sidebar-template" target="_blank">

            <img alt="GitHub stars" src="https://img.shields.io/github/stars/azouaoui-med/pro-sidebar-template?style=social" />

          </a>

          <a href="https://github.com/azouaoui-med/pro-sidebar-template" target="_blank">

            <img alt="GitHub forks" src="https://img.shields.io/github/forks/azouaoui-med/pro-sidebar-template?style=social" />

          </a>

        </div>

      </div>

      <div>

        <h2>Features</h2>

        <ul>

          <li>Fully responsive</li>

          <li>Collapsable sidebar</li>

          <li>Multi level menu</li>

          <li>RTL support</li>

          <li>Customizable</li>

        </ul>

      </div>

      <div>

        <h2>Resources</h2>

        <ul>

          <li>

            <a target="_blank" href="https://github.com/azouaoui-med/css-pro-layout">

              Css Pro Layout</a>

          </li>

          <li>

            <a target="_blank" href="https://github.com/popperjs/popper-core"> Popper Core</a>

          </li>

          <li>

            <a target="_blank" href="https://remixicon.com/"> Remix Icons</a>

          </li>

        </ul>

      </div>

      <footer class="footer">

        <small style="margin-bottom: 20px; display: inline-block">

          © 2022 made with

          <span style="color: red; font-size: 18px">&#10084;</span> by -

          <a target="_blank" href="https://azouaoui.netlify.com"> Mohamed Azouaoui </a>

        </small>

        <br />

        <div>

          <a href="https://github.com/azouaoui-med" target="_blank" rel="noopener noreferrer">

            <img alt="GitHub followers" src="https://img.shields.io/github/followers/azouaoui-med?label=github&style=social" />

          </a>

          <a href="https://twitter.com/azouaoui_med" target="_blank" rel="noopener noreferrer">

            <img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/azouaoui_med?label=twitter&style=social" />

          </a>

        </div>

      </footer>

    </main>

    <div class="overlay"></div>

  </div>

</div>

CSS ( SCSS) CODE

$text-color: #b3b8d4;

$secondary-text-color: #dee2ec;

$bg-color: #0c1e35;

$secondary-bg-color: #0b1a2c;

$border-color: rgba(#535d7d, 0.3);

$sidebar-header-height: 64px;

$sidebar-footer-height: 64px;

.layout {

  z-index: 1;

  .header {

    box-shadow: 1px 1px 4px #9aa0b9;

    display: flex;

    align-items: center;

    padding: 20px;

  }

  .content {

    padding: 20px;

    display: flex;

    flex-direction: column;

  }

  .footer {

    text-align: center;

    margin-top: auto;

    margin-bottom: 20px;

    padding: 20px;

  }

  &.rtl {

    .header {

      box-shadow: -1px 1px 4px #9aa0b9;

    }

  }

}

.sidebar {

  color: $text-color;

  overflow-x: hidden !important;

  position: relative;

  background-color: $bg-color;

  .image-wrapper {

    overflow:hidden;

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    opacity: 0.2;

    z-index: 1;

    display: none;

    > img {

      width: 100%;

      height: 100%;

      object-fit: cover;

      object-position: center;

    }

  }

  &.has-bg-image .image-wrapper {

    display: block;

  }

  .sidebar-layout {

    height: 100%;

    display: flex;

    flex-direction: column;

    position: relative;

    z-index: 2;

    .sidebar-header {

      height: $sidebar-header-height;

      min-height: $sidebar-header-height;

      display: flex;

      align-items: center;

      padding: 0 20px;

      border-bottom: 1px solid $border-color;

      > span {

        overflow: hidden;

        white-space: nowrap;

        text-overflow: ellipsis;

      }

    }

    .sidebar-content {

      flex-grow: 1;

      padding: 10px 0;

    }

    .sidebar-footer {

      height: $sidebar-footer-height;

      min-height: $sidebar-footer-height;

      display: flex;

      align-items: center;

      border-top: 1px solid $border-color;

      padding: 0 20px;

      > span {

        overflow: hidden;

        white-space: nowrap;

        text-overflow: ellipsis;

      }

    }

  }

}

@keyframes swing {

  0%,

  30%,

  50%,

  70%,

  100% {

    transform: rotate(0deg);

  }

  10% {

    transform: rotate(10deg);

  }

  40% {

    transform: rotate(-10deg);

  }

  60% {

    transform: rotate(5deg);

  }

  80% {

    transform: rotate(-5deg);

  }

}

.layout {

  .sidebar {

    .menu {

      ul {

        list-style-type: none;

        padding: 0;

        margin: 0;

      }

      .menu-item {

        a {

          display: flex;

          align-items: center;

          height: 50px;

          padding: 0 20px;

          color: $text-color;

          .menu-icon {

            font-size: 1.2rem;

            width: 35px;

            min-width: 35px;

            height: 35px;

            line-height: 35px;

            text-align: center;

            display: inline-block;

            margin-right: 10px;

            border-radius: 2px;

            transition: color 0.3s;

            i {

              display: inline-block;

            }

          }

          .menu-title {

            font-size: 0.9rem;

            overflow: hidden;

            text-overflow: ellipsis;

            white-space: nowrap;

            flex-grow: 1;

            transition: color 0.3s;

          }

          .menu-prefix,

          .menu-suffix {

            display: inline-block;

            padding: 5px;

            opacity: 1;

            transition: opacity 0.3s;

          }

          &:hover {

            .menu-title {

              color: $secondary-text-color;

            }

            .menu-icon {

              color: $secondary-text-color;

              i {

                animation: swing ease-in-out 0.5s 1 alternate;

              }

            }

            &::after {

              border-color: $secondary-text-color !important;

            }

          }

        }

        &.sub-menu {

          position: relative;

          > a {

            &::after {

              content: "";

              transition: transform 0.3s;

              border-right: 2px solid currentcolor;

              border-bottom: 2px solid currentcolor;

              width: 5px;

              height: 5px;

              transform: rotate(-45deg);

            }

          }

          > .sub-menu-list {

            padding-left: 20px;

            display: none;

            overflow: hidden;

            z-index: 999;

          }

          &.open {

            > a {

              &::after {

                transform: rotate(45deg);

              }

            }

          }

        }

        &.active {

          > a {

            .menu-title {

              color: $secondary-text-color;

            }

            &::after {

              border-color: $secondary-text-color;

            }

            .menu-icon {

              color: $secondary-text-color;

            }

          }

        }

      }

      > ul > .sub-menu > .sub-menu-list {

        background-color: $secondary-bg-color;

      }

      &.icon-shape-circle,

      &.icon-shape-rounded,

      &.icon-shape-square {

        .menu-item a .menu-icon {

          background-color: $secondary-bg-color;

        }

      }

      &.icon-shape-circle .menu-item a .menu-icon {

        border-radius: 50%;

      }

      &.icon-shape-rounded .menu-item a .menu-icon {

        border-radius: 4px;

      }

      &.icon-shape-square .menu-item a .menu-icon {

        border-radius: 0;

      }

    }

    &:not(.collapsed) {

      .menu > ul {

        > .menu-item {

          &.sub-menu {

            > .sub-menu-list {

              visibility: visible !important;

              position: static !important;

              transform: translate(0, 0) !important;

            }

          }

        }

      }

    }

    &.collapsed {

      .menu > ul {

        > .menu-item {

          > a {

            .menu-prefix,

            .menu-suffix {

              opacity: 0;

            }

          }

          &.sub-menu {

            > a {

              &::after {

                content: "";

                width: 5px;

                height: 5px;

                background-color: currentcolor;

                border-radius: 50%;

                display: inline-block;

                position: absolute;

                right: 10px;

                top: 50%;

                border: none;

                transform: translateY(-50%);

              }

              &:hover {

                &::after {

                  background-color: $secondary-text-color;

                }

              }

            }

            > .sub-menu-list {

              transition: none !important;

              width: 200px;

              margin-left: 3px !important;

              border-radius: 4px;

              display: block !important;

            }

          }

          &.active {

            > a {

              &::after {

                background-color: $secondary-text-color;

              }

            }

          }

        }

      }

    }

    &.has-bg-image {

      .menu {

        &.icon-shape-circle,

        &.icon-shape-rounded,

        &.icon-shape-square {

          .menu-item a .menu-icon {

            background-color: rgba($secondary-bg-color, 0.6);

          }

        }

      }

      &:not(.collapsed) {

        .menu {

          > ul > .sub-menu > .sub-menu-list {

            background-color: rgba($secondary-bg-color, 0.6);

          }

        }

      }

    }

  }

  &.rtl {

    .sidebar {

      .menu {

        .menu-item {

          a {

            .menu-icon {

              margin-left: 10px;

              margin-right: 0;

            }

          }

          &.sub-menu {

            > a {

              &::after {

                transform: rotate(135deg);

              }

            }

            > .sub-menu-list {

              padding-left: 0;

              padding-right: 20px;

            }

            &.open {

              > a {

                &::after {

                  transform: rotate(45deg);

                }

              }

            }

          }

        }

      }

      &.collapsed {

        .menu > ul {

          > .menu-item {

            &.sub-menu {

              a::after {

                right: auto;

                left: 10px;

              }

              > .sub-menu-list {

                margin-left: -3px !important;

              }

            }

          }

        }

      }

    }

  }

}

* {

  box-sizing: border-box;

}

body {

  margin: 0;

  height: 100vh;

  font-family: "Roboto", sans-serif;

  color: #212529;

}

a {

  text-decoration: none;

}

@media (max-width: 992px) {

  #btn-collapse {

    display: none;

  }

}

JS CODE

const ANIMATION_DURATION = 300;

const SIDEBAR_EL = document.getElementById("sidebar");

const SUB_MENU_ELS = document.querySelectorAll(

  ".menu > ul > .menu-item.sub-menu"

);

const FIRST_SUB_MENUS_BTN = document.querySelectorAll(

  ".menu > ul > .menu-item.sub-menu > a"

);

const INNER_SUB_MENUS_BTN = document.querySelectorAll(

  ".menu > ul > .menu-item.sub-menu .menu-item.sub-menu > a"

);

class PopperObject {

  instance = null;

  reference = null;

  popperTarget = null;

  constructor(reference, popperTarget) {

    this.init(reference, popperTarget);

  }

  init(reference, popperTarget) {

    this.reference = reference;

    this.popperTarget = popperTarget;

    this.instance = Popper.createPopper(this.reference, this.popperTarget, {

      placement: "right",

      strategy: "fixed",

      resize: true,

      modifiers: [

        {

          name: "computeStyles",

          options: {

            adaptive: false

          }

        },

        {

          name: "flip",

          options: {

            fallbackPlacements: ["left", "right"]

          }

        }

      ]

    });

    document.addEventListener(

      "click",

      (e) => this.clicker(e, this.popperTarget, this.reference),

      false

    );

    const ro = new ResizeObserver(() => {

      this.instance.update();

    });

    ro.observe(this.popperTarget);

    ro.observe(this.reference);

  }

  clicker(event, popperTarget, reference) {

    if (

      SIDEBAR_EL.classList.contains("collapsed") &&

      !popperTarget.contains(event.target) &&

      !reference.contains(event.target)

    ) {

      this.hide();

    }

  }

  hide() {

    this.instance.state.elements.popper.style.visibility = "hidden";

  }

}

class Poppers {

  subMenuPoppers = [];

  constructor() {

    this.init();

  }

  init() {

    SUB_MENU_ELS.forEach((element) => {

      this.subMenuPoppers.push(

        new PopperObject(element, element.lastElementChild)

      );

      this.closePoppers();

    });

  }

  togglePopper(target) {

    if (window.getComputedStyle(target).visibility === "hidden")

      target.style.visibility = "visible";

    else target.style.visibility = "hidden";

  }

  updatePoppers() {

    this.subMenuPoppers.forEach((element) => {

      element.instance.state.elements.popper.style.display = "none";

      element.instance.update();

    });

  }

  closePoppers() {

    this.subMenuPoppers.forEach((element) => {

      element.hide();

    });

  }

}

const slideUp = (target, duration = ANIMATION_DURATION) => {

  const { parentElement } = target;

  parentElement.classList.remove("open");

  target.style.transitionProperty = "height, margin, padding";

  target.style.transitionDuration = `${duration}ms`;

  target.style.boxSizing = "border-box";

  target.style.height = `${target.offsetHeight}px`;

  target.offsetHeight;

  target.style.overflow = "hidden";

  target.style.height = 0;

  target.style.paddingTop = 0;

  target.style.paddingBottom = 0;

  target.style.marginTop = 0;

  target.style.marginBottom = 0;

  window.setTimeout(() => {

    target.style.display = "none";

    target.style.removeProperty("height");

    target.style.removeProperty("padding-top");

    target.style.removeProperty("padding-bottom");

    target.style.removeProperty("margin-top");

    target.style.removeProperty("margin-bottom");

    target.style.removeProperty("overflow");

    target.style.removeProperty("transition-duration");

    target.style.removeProperty("transition-property");

  }, duration);

};

const slideDown = (target, duration = ANIMATION_DURATION) => {

  const { parentElement } = target;

  parentElement.classList.add("open");

  target.style.removeProperty("display");

  let { display } = window.getComputedStyle(target);

  if (display === "none") display = "block";

  target.style.display = display;

  const height = target.offsetHeight;

  target.style.overflow = "hidden";

  target.style.height = 0;

  target.style.paddingTop = 0;

  target.style.paddingBottom = 0;

  target.style.marginTop = 0;

  target.style.marginBottom = 0;

  target.offsetHeight;

  target.style.boxSizing = "border-box";

  target.style.transitionProperty = "height, margin, padding";

  target.style.transitionDuration = `${duration}ms`;

  target.style.height = `${height}px`;

  target.style.removeProperty("padding-top");

  target.style.removeProperty("padding-bottom");

  target.style.removeProperty("margin-top");

  target.style.removeProperty("margin-bottom");

  window.setTimeout(() => {

    target.style.removeProperty("height");

    target.style.removeProperty("overflow");

    target.style.removeProperty("transition-duration");

    target.style.removeProperty("transition-property");

  }, duration);

};

const slideToggle = (target, duration = ANIMATION_DURATION) => {

  if (window.getComputedStyle(target).display === "none")

    return slideDown(target, duration);

  return slideUp(target, duration);

};

const PoppersInstance = new Poppers();

/**

 * wait for the current animation to finish and update poppers position

 */

const updatePoppersTimeout = () => {

  setTimeout(() => {

    PoppersInstance.updatePoppers();

  }, ANIMATION_DURATION);

};

/**

 * sidebar collapse handler

 */

document.getElementById("btn-collapse").addEventListener("click", () => {

  SIDEBAR_EL.classList.toggle("collapsed");

  PoppersInstance.closePoppers();

  if (SIDEBAR_EL.classList.contains("collapsed"))

    FIRST_SUB_MENUS_BTN.forEach((element) => {

      element.parentElement.classList.remove("open");

    });

  updatePoppersTimeout();

});

/**

 * sidebar toggle handler (on break point )

 */

document.getElementById("btn-toggle").addEventListener("click", () => {

  SIDEBAR_EL.classList.toggle("toggled");

  updatePoppersTimeout();

});

/**

 * toggle sidebar on overlay click

 */

document.getElementById("overlay").addEventListener("click", () => {

  SIDEBAR_EL.classList.toggle("toggled");

});

const defaultOpenMenus = document.querySelectorAll(".menu-item.sub-menu.open");

defaultOpenMenus.forEach((element) => {

  element.lastElementChild.style.display = "block";

});

/**

 * handle top level submenu click

 */

FIRST_SUB_MENUS_BTN.forEach((element) => {

  element.addEventListener("click", () => {

    if (SIDEBAR_EL.classList.contains("collapsed"))

      PoppersInstance.togglePopper(element.nextElementSibling);

    else {

      const parentMenu = element.closest(".menu.open-current-submenu");

      if (parentMenu)

        parentMenu

          .querySelectorAll(":scope > ul > .menu-item.sub-menu > a")

          .forEach(

            (el) =>

              window.getComputedStyle(el.nextElementSibling).display !==

                "none" && slideUp(el.nextElementSibling)

          );

      slideToggle(element.nextElementSibling);

    }

  });

});

/**

 * handle inner submenu click

 */

INNER_SUB_MENUS_BTN.forEach((element) => {

  element.addEventListener("click", () => {

    slideToggle(element.nextElementSibling);

  });

});

Read More

Bootstrap Sidebar Menu HTML

 HTML CODE

head>

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

</head>

<body>

   <nav class="navbar navbar-default no-margin">

      <!-- Brand and toggle get grouped for better mobile display -->

      <div class="navbar-header fixed-brand">

         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" id="menu-toggle">

<span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>

</button>

         <a class="navbar-brand" href="#"><i class="fa fa-rocket fa-4"></i> M-33</a>

      </div>

      <!-- navbar-header-->

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

         <ul class="nav navbar-nav">

            <li class="active">

               <button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2"> <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>

               </button>

            </li>

         </ul>

      </div>

      <!-- bs-example-navbar-collapse-1 -->

   </nav>

   <div id="wrapper">

      <!-- Sidebar -->

      <div id="sidebar-wrapper">

         <ul class="sidebar-nav nav-pills nav-stacked" id="menu">

            <li class="active">

               <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-dashboard fa-stack-1x "></i></span> Dashboard</a>

               <ul class="nav-pills nav-stacked" style="list-style-type:none;">

                  <li><a href="#">link1</a></li>

                  <li><a href="#">link2</a></li>

               </ul>

            </li>

            <li>

               <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span>Shortcut</a>

               <ul class="nav-pills nav-stacked" style="list-style-type:none;">

                  <li><a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span>link1</a></li>

                  <li><a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span>link2</a></li>

               </ul>

            </li>

            <li>

               <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-cloud-download fa-stack-1x "></i></span>Overview</a>

            </li>

            <li>

               <a href="#"> <span class="fa-stack fa-lg pull-left"><i class="fa fa-cart-plus fa-stack-1x "></i></span>Events</a>

            </li>

            <li>

               <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-youtube-play fa-stack-1x "></i></span>About</a>

            </li>

            <li>

               <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-wrench fa-stack-1x "></i></span>Services</a>

            </li>

            <li>

               <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a>

            </li>

         </ul>

      </div>

      <!-- /#sidebar-wrapper -->

      <!-- Page Content -->

      <div id="page-content-wrapper">

         <div class="container-fluid xyz">

            <div class="row">

               <div class="col-lg-12">

                  <h1>Simple Admin Sidebar With Bootstrap by <a href="http://http://codepen.io/hughbalboa/">@hughbalboa</a></h1>

                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident laudantium nobis cum dignissimos ex inventore, velit blanditiis. Quod laborum soluta quidem culpa officia eligendi, quam, recusandae iste aliquid amet odit! </p>

               </div>

            </div>

         </div>

      </div>

      <!-- /#page-content-wrapper -->

   </div>

   <!-- /#wrapper -->

   <!-- jQuery -->

</body>

</html>

CSS CODE

 

.nav-pills > li > a {

   border-radius: 0;

}

#wrapper {

   padding-left: 0;

   -webkit-transition: all 0.5s ease;

   -moz-transition: all 0.5s ease;

   -o-transition: all 0.5s ease;

   transition: all 0.5s ease;

   overflow: hidden;

}

#wrapper.toggled {

   padding-left: 250px;

   overflow: hidden;

}

#sidebar-wrapper {

   z-index: 1000;

   position: absolute;

   left: 250px;

   width: 0;

   height: 100%;

   margin-left: -250px;

   overflow-y: auto;

   background: #000;

   -webkit-transition: all 0.5s ease;

   -moz-transition: all 0.5s ease;

   -o-transition: all 0.5s ease;

   transition: all 0.5s ease;

}

#wrapper.toggled #sidebar-wrapper {

   width: 250px;

}

#page-content-wrapper {

   position: absolute;

   padding: 15px;

   width: 100%;

   overflow-x: hidden;

}

.xyz {

   min-width: 360px;

}

#wrapper.toggled #page-content-wrapper {

   position: relative;

   margin-right: 0px;

}

.fixed-brand {

   width: auto;

}

/* Sidebar Styles */

.sidebar-nav {

   position: absolute;

   top: 0;

   width: 250px;

   margin: 0;

   padding: 0;

   list-style: none;

   margin-top: 2px;

}

.sidebar-nav li {

   text-indent: 15px;

   line-height: 40px;

}

.sidebar-nav li a {

   display: block;

   text-decoration: none;

   color: #999999;

}

.sidebar-nav li a:hover {

   text-decoration: none;

   color: #fff;

   background: rgba(255, 255, 255, 0.2);

   border-left: red 2px solid;

}

.sidebar-nav li a:active,

.sidebar-nav li a:focus {

   text-decoration: none;

}

.sidebar-nav > .sidebar-brand {

   height: 65px;

   font-size: 18px;

   line-height: 60px;

}

.sidebar-nav > .sidebar-brand a {

   color: #999999;

}

.sidebar-nav > .sidebar-brand a:hover {

   color: #fff;

   background: none;

}

.no-margin {

   margin: 0;

}

@media (min-width: 768px) {

   #wrapper {

      padding-left: 250px;

   }

   .fixed-brand {

      width: 250px;

   }

   #wrapper.toggled {

      padding-left: 0;

   }

   #sidebar-wrapper {

      width: 250px;

   }

   #wrapper.toggled #sidebar-wrapper {

      width: 250px;

   }

   #wrapper.toggled-2 #sidebar-wrapper {

      width: 50px;

   }

   #wrapper.toggled-2 #sidebar-wrapper:hover {

      width: 250px;

   }

   #page-content-wrapper {

      padding: 20px;

      position: relative;

      -webkit-transition: all 0.5s ease;

      -moz-transition: all 0.5s ease;

      -o-transition: all 0.5s ease;

      transition: all 0.5s ease;

   }

   #wrapper.toggled #page-content-wrapper {

      position: relative;

      margin-right: 0;

      padding-left: 250px;

   }

   #wrapper.toggled-2 #page-content-wrapper {

      position: relative;

      margin-right: 0;

      margin-left: -200px;

      -webkit-transition: all 0.5s ease;

      -moz-transition: all 0.5s ease;

      -o-transition: all 0.5s ease;

      transition: all 0.5s ease;

      width: auto;

   }

}

JS CODE

$("#menu-toggle").click(function(e) {

   e.preventDefault();

   $("#wrapper").toggleClass("toggled");

});

$("#menu-toggle-2").click(function(e) {

   e.preventDefault();

   $("#wrapper").toggleClass("toggled-2");

   $('#menu ul').hide();

});

function initMenu() {

   $('#menu ul').hide();

   $('#menu ul').children('.current').parent().show();

   //$('#menu ul:first').show();

   $('#menu li a').click(

      function() {

         var checkElement = $(this).next();

         if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {

            return false;

         }

         if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {

            $('#menu ul:visible').slideUp('normal');

            checkElement.slideDown('normal');

            return false;

         }

      }

   );

}

$(document).ready(function() {

   initMenu();

});

Read More

Bootstap Side menu HTML

HTML CODE 

<script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>

<body>

    <nav class='sidebar sidebar-menu-collapsed'>

      <a href='#' id='justify-icon'>

        <span class='glyphicon glyphicon-align-justify'></span>

      </a>

      <ul>

        <li class='active'>

          <a class='expandable' href='#' title='Dashboard'>

            <span class='glyphicon glyphicon-home collapsed-element'></span>

            <span class='expanded-element'>Dashboard</span>

          </a>

        </li>

        <li>

          <a class='expandable' href='#' title='APIs'>

            <span class='glyphicon glyphicon-wrench collapsed-element'></span>

            <span class='expanded-element'>APIs</span>

          </a>

        </li>

        <li>

          <a class='expandable' href='#' title='Settings'>

            <span class='glyphicon glyphicon-cog collapsed-element'></span>

            <span class='expanded-element'>Settings</span>

          </a>

        </li>

        <li>

          <a class='expandable' href='#' title='Account'>

            <span class='glyphicon glyphicon-user collapsed-element'></span>

            <span class='expanded-element'>Account</span>

          </a>

        </li>

      </ul>

      <a href='#' id='logout-icon' title='Logout'>

        <span class='glyphicon glyphicon-off'></span>

      </a>

    </nav>

  </body>

CSS (SCSS) CODE

import "compass/css3";

@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 CODE 

(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);

Read More

HTML-Double sidebar HTML

 html code

        <button type="button">

            <svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M12 15a3 3 0 100-6 3 3 0 000 6z" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19.622 10.395l-1.097-2.65L20 6l-2-2-1.735 1.483-2.707-1.113L12.935 2h-1.954l-.632 2.401-2.645 1.115L6 4 4 6l1.453 1.789-1.08 2.657L2 11v2l2.401.655L5.516 16.3 4 18l2 2 1.791-1.46 2.606 1.072L11 22h2l.604-2.387 2.651-1.098C16.697 18.831 18 20 18 20l2-2-1.484-1.75 1.098-2.652 2.386-.62V11l-2.378-.605z" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>

        </button>

        <button type="button">

            <svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M2 11V4.6a.6.6 0 01.6-.6h6.178a.6.6 0 01.39.144l3.164 2.712a.6.6 0 00.39.144H21.4a.6.6 0 01.6.6V11M2 11v8.4a.6.6 0 00.6.6h18.8a.6.6 0 00.6-.6V11M2 11h20" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>

        </button>

    </nav>

</aside>

<aside class="sidebar">

    <nav>

        <button type="button">

            <svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M12 16a4 4 0 100-8 4 4 0 000 8z" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M21 7.353v9.294a.6.6 0 01-.309.525l-8.4 4.666a.6.6 0 01-.582 0l-8.4-4.666A.6.6 0 013 16.647V7.353a.6.6 0 01.309-.524l8.4-4.667a.6.6 0 01.582 0l8.4 4.667a.6.6 0 01.309.524zM3.528 7.294L8.4 10m12.1-2.722L15.6 10M12 21v-5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>

            <span>Blockchick</span>

        </button>

        <button type="button">

            <svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M5 12v6s0 3 7 3 7-3 7-3v-6" stroke="#ffffff" stroke-width="1.5"></path><path d="M5 6v6s0 3 7 3 7-3 7-3V6" stroke="#ffffff" stroke-width="1.5"></path><path d="M12 3c7 0 7 3 7 3s0 3-7 3-7-3-7-3 0-3 7-3z" stroke="#ffffff" stroke-width="1.5"></path></svg>

            <span>DataRiver</span>

        </button>

        <button type="button">

            <svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M2 14v-4a1 1 0 011-1h2.697a1 1 0 00.555-.168l4.193-2.796A1 1 0 0112 6.87V17.13a1 1 0 01-1.555.832l-4.193-2.795A1 1 0 005.697 15H3a1 1 0 01-1-1z" stroke="#ffffff" stroke-width="1.5"></path><path d="M16.5 7.5S18 9 18 11.5s-1.5 4-1.5 4M19.5 4.5S22 7 22 11.5s-2.5 7-2.5 7" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>

            <span>AudioVibe</span>

        </button>

        <button type="button">

            <svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M12 4v16M8 9v6M20 10v4M4 10v4M16 7v10" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>

            <span>SoundBlast</span>

        </button>

        <button type="button">

            <svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M13.848 13.317L9.505 18.28a2 2 0 01-3.01 0l-4.343-4.963a2 2 0 010-2.634L6.495 5.72a2 2 0 013.01 0l4.343 4.963a2 2 0 010 2.634z" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M13 19l4.884-5.698a2 2 0 000-2.604L13 5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17 19l4.884-5.698a2 2 0 000-2.604L17 5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">

            <span>Levels</span>

        </button>

        <button type="button">

            <svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M5 20v-1a7 7 0 017-7v0a7 7 0 017 7v1M12 12a4 4 0 100-8 4 4 0 000 8z" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>

            <span>Accounts</span>

        </button>

        <button type="button">

            <svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M16 12h1.4a.6.6 0 01.6.6v6.8a.6.6 0 01-.6.6H6.6a.6.6 0 01-.6-.6v-6.8a.6.6 0 01.6-.6H8m8 0V8c0-1.333-.8-4-4-4S8 6.667 8 8v4m8 0H8" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>

            <span>Security</span>

        </button>

    </nav>

</aside>

<p class="text-info">Change the width of the screen, below 500px, to see how the sidebar is hidden.</p>

<p class="text-dev">Development of  <a href="https://github.com/frontend-joe/css-sidebars" target="_blank">Frontend Joe</a></p>

css code

* {

    box-sizing: border-box;

    font-family: Arial, Helvetica, sans-serif;

}

body {

    background: #202124;

}

button {

    background: transparent;

    border: 0;

    padding: 0;

    cursor: pointer;

}

.toolbar,

.sidebar,

.burger {

    position: fixed;

    top: 0;

}

.toolbar {

    z-index: 3;

    left: 0;

    width: 72px;

    height: 100%;

    background: #0b5ed7;

    transition: 0.4s;

}

.sidebar {

    z-index: 2;

    left: 72px;

    width: 200px;

    height: 100%;

    background: #0d6efd;

    transition: 0.4s;

}

@media (width < 500px) {

    .sidebar {

        translate: -100% 0;

    }

    body.open .sidebar {

        translate: 0 0;

    }

}

.burger {

    z-index: 1;

    left: 72px;

    display: grid;

    place-items: center;

    width: 72px;

    height: 64px;

    background:  url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHN0cm9rZS13aWR0aD0iMS41IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgY29sb3I9IiNmZmZmZmYiPjxwYXRoIGQ9Ik0zIDVoMThNMyAxMmgxOE0zIDE5aDE4IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvcGF0aD48L3N2Zz4=) no-repeat center center;

}

body.open .burger {

    left: auto;

    right: 0;

    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHN0cm9rZS13aWR0aD0iMS41IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgY29sb3I9IiNmZmZmZmYiPjxwYXRoIGQ9Ik02Ljc1OCAxNy4yNDNMMTIuMDAxIDEybTUuMjQzLTUuMjQzTDEyIDEybTAgMEw2Ljc1OCA2Ljc1N00xMi4wMDEgMTJsNS4yNDMgNS4yNDMiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9wYXRoPjwvc3ZnPg==) no-repeat no-repeat center center;

}

@media (width >= 500px) {

    .burger {

        display: none;

    }

}

.sidebar > nav {

    display: grid;

}

button {

    position: relative;

    display: flex;

    gap: 10px;

    align-items: center;

    width: 100%;

    height: 60px;

    padding: 0 20px;

}

button > img {

    width: 20px;

    height: 20px;

}

.toolbar img {

    width: 28px;

    height: 28px;

}

.sidebar > nav > button > span {

    border-radius: 4px;

    color: #f9f9f9;

    font-size: 12px;

    font-weight: 200;

    letter-spacing: 2px;

    line-height: 1;

    transition: 0.4s;

}

.text-dev {

    color: #ffffff;

    position: fixed;

    bottom: 0;

    text-align: center;

    width: 100%;

}

.text-dev a {

    color: #0d6efd;

    font-weight: 800;

}

.text-info {

    font-size: 1.5rem;

    color: #ffffff;

    text-align: center;

    width: 100%;

    padding: 2rem 1rem 1rem 5.5rem;

}

@media (width >= 500px) {

    .text-info {

        padding: 2rem 1rem 1rem 18rem;

    }

}

JS

const toggleSidebar = () => document.body.classList.toggle("open");

Read More