Ads Top

How to create sidebar collapse in jquery?


Custom collapse sidebar: An example for sidebar collapsible without bootstrap, means you can create a sidebar using jquery and CSS. Here used methods are toggleClass() and removeClass(). For the CSS using pseudo-elements as :after and :before.

You can get code below for the collapsible sidebar example:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .menuContainer {
      background#eee;
      positionfixed;
      top0;
      right-260px;
      padding20px;
      height100%;
      width150px;
      transitionall 0.5s
    }

    .dropdownContainer {
      displaynone;
      positionabsolute;
      background#fff;
      border-radius5px;
    }

    .dropdownContainer::before {
      content'';
      border-top10px solid transparent;
      border-bottom10px solid #fff;
      border-left10px solid transparent;
      border-right10px solid transparent;
      positionabsolute;
      left0;
      right0;
      marginauto;
      text-aligncenter;
      width0;
      top-20px;
    }

    .dropdownContainer a {
      displayblock;
      font-size14px;
      color#333;
      padding8px 10px;
      font-familyarialsans-serif;
      text-decorationnone;
    }

    .dropdownContainer a:hover {
      background#0bf;
      color#fff;
    }

    .dropdownContainer a:hover:nth-of-type(1) {
      border-radius5px 5px 0 0;
    }

    .dropdownContainer a:hover:last-child {
      border-radius0 0 5px 5px;
      background#0bf;
    }

    .showSS {
      displayinline-block;
    }

    .showMenu {
      displayinline-block;
      right0px;
      transitionall 0.5s;
      z-index10000;
    }

    .menuWrapper {
      positionfixed;
      height100%;
      width100%;
      top0;
      left0;
      z-index9999;
    }

    .navClick {
      positionrelative;
      cursorpointer;
      right200px;
      floatright;
    }

    .mainMenu ul {
      list-stylenone;
      padding0;
    }

    .mainMenu ul>li {
      text-alignleft;
    }

    .mainMenu ul>li>a {
      color#333;
      padding15px 0;
      displayblock;
      text-decorationnone;
      transitionall 0.5;
      font-familyarialsans-serif;
      font-size16px;
    }

    .mainMenu ul>li>a:hover {
      color#0bf;
      transitionall 0.5;
    }

    .navClick .bar1,
    .navClick .bar2,
    .navClick .bar3 {
      width30px;
      height4px;
      background#0bf;
      margin7px 0;
      transition0.4s;
      displayblock;
    }

    .menuBack {
      cursorpointer;
      padding0;
      positionabsolute;
      right20px;
      top10px;
    }

    .menuBack::after {
      content'';
      width15px;
      height15px;
      border-right3px solid #333;
      border-bottom3px solid #333;
      positionabsolute;
      transform: rotate(-45deg);
      right20px;
      top20px;
    }

    .menuBack:hover::after {
      border-right3px solid #0bf;
      border-bottom3px solid #0bf;
    }

    .menuBack:hover {
      color#0bf;
    }

    .dropdowntoggleSS {
      positionrelative;
    }

    .dropdowntoggleSS::after {
      content'';
      positionabsolute;
      border-left7px solid transparent;
      border-top7px solid #333;
      border-right7px solid transparent;
      border-bottom7px solid transparent;
      width0;
      margin-left6px;
      top22px;
    }

    .dropdowntoggleSS:hover::after {
      border-top7px solid #0bf;
    }
  </style>
</head>

<body>
  <div class="navClick"><span class="bar1"></span><span class="bar2"></span><span class="bar3"></span></div>
  <div class="menuWrap"></div>
  <div class="menuContainer">
    <div class="mainMenu">
      <div class="menuBack"></div>
      <ul>
        <li><a href="https://www.anythinglearn.com/">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#" class="dropdowntoggleSS">Tutorial</a>
          <div class="dropdownContainer">
            <a href="#">HTML</a>
            <a href="#">React</a>
            <a href="#">Angular</a>
            <a href="#">Latest Angular</a>
            <a href="#">Javascript</a>
          </div>
        </li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(function () {
      $('.navClick').click(function () {
        $('.menuContainer').toggleClass('showMenu');
        $('.menuWrap').toggleClass('menuWrapper');
      });
      $('.menuWrap').click(function () {
        $(this).removeClass('menuWrapper');
        $('.menuContainer').removeClass('showMenu');
      });
      $('.menuBack').click(function () {
        $('.menuWrap').removeClass('menuWrapper');
        $('.menuContainer').removeClass('showMenu');
      });
      $('.dropdowntoggleSS').click(function () {
        $('.dropdownContainer').toggleClass('showSS');
      });
    });

  </script>
</body>

</html>

You will found result as given screenshot below:


No comments:

Copyright Reserved to Anything Learn. Powered by Blogger.