Guest User

how to make show hide sidebar

a guest
Jan 13th, 2021
61
56 days
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /** https://www.daniweb.com/programming/web-development/threads/483609/how-to-make-show-hide-sidebar **/
  2.  
  3.   <script src="/js/stringify.js?b36489e6dceb4e23da1fd46f45b9e5a233170201" charset="utf-8"></script>
  4.   <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
  5.   <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  6.   <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
  7. <script>
  8.      $('#navbar-side > ul > li > a').click(function() {
  9.           var checkElement = $(this).next();
  10.           $('#navbar-side li a').removeClass('active');
  11.           $(this).closest('a').addClass('active');  
  12.           if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
  13.                $(this).closest('a').removeClass('active');
  14.                $(this).closest('a').addClass('nonactive');
  15.                $('.nonactive b').addClass('fa-angle-left');
  16.                $('.nonactive b').removeClass('fa-angle-down');
  17.                checkElement.slideUp('normal');
  18.           }
  19.           if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
  20.                $(this).closest('a').removeClass('nonactive');
  21.                $('.active b').removeClass('fa-angle-left');
  22.                $('.active b').addClass('fa-angle-down');
  23.                $('#navbar-side ul ul:visible').slideUp('normal');
  24.                checkElement.slideDown('normal');
  25.           }
  26.           if (checkElement.is('ul')) {
  27.                return false;
  28.           } else {
  29.                return true;
  30.           }    
  31.      });
  32.      $('.minimize-menu').click(function()
  33.          {
  34.           if ( $( this ).hasClass( "minimize-menu" ) )
  35.           {
  36.               $('.minimize-menu > i').removeClass('fa-chevron-circle-left');
  37.               $('.minimize-menu > i').addClass('fa-chevron-circle-right');
  38.               $('#navbar-side').css({"width":"55px"});
  39.               $('.menu-text').css({"display":"none"});
  40.               $('#navbar-side > ul > li > a > b').hide();
  41.               $(this).removeClass('minimize-menu');
  42.               $(this).addClass('maximize-menu');
  43.           }
  44.           else
  45.           {
  46.               $(this).removeClass('maximize-menu');
  47.               $(this).addClass('minimize-menu');
  48.               $('.minimize-menu > i').addClass('fa-chevron-circle-left');
  49.               $('.minimize-menu > i').removeClass('fa-chevron-circle-right');
  50.               $('#navbar-side > ul > li > a > b').show();
  51.               $('.menu-text').css({"display":"inline"});
  52.               $('#navbar-side').css({"width":"189px"});
  53.  
  54.           }
  55.      });
  56.      </script>
  57.  
  58. <style>
  59. *{
  60.     padding: 0;
  61.     margin: 0;
  62. }
  63.  
  64. body{
  65.     min-width: 100%;
  66.     min-height: 100%;
  67.     padding-bottom: 0;
  68.     color: #393939;
  69.    font-family: sans-serif;
  70. }
  71.  
  72. #navbar-top{
  73.    width: 100%;
  74.     height: 50px;
  75.     position: fixed;
  76.     background-color: #438eb9;
  77. }
  78.  
  79. #navbar-side{
  80.    width: 189px;
  81.     height: 100%;
  82.     margin-top: 50px;
  83.     position: fixed;
  84.     background-color: #f2f2f2;
  85.    border-right: 1px solid #ccc;
  86. }
  87.  
  88. #navbar-side ul{
  89.    overflow: hidden;
  90.     padding: 0;
  91.     margin: 0;
  92. }
  93.  
  94. #navbar-side ul li{
  95.    list-style: none;
  96.     border-bottom: 1px solid #e5e5e5;
  97. }
  98.  
  99. #navbar-side a{
  100.    width: 100%;
  101.     font-size: 14px;
  102.     line-height: normal;
  103.     padding: 10px 0 10px 20px;
  104.     box-sizing: border-box;
  105.     display: block;
  106.     color: #555;
  107.    text-decoration: none;
  108. }
  109.  
  110. #navbar-side a:hover{
  111.    padding-left: 17px;
  112.     background-color: #fff;
  113.    color: #08c;
  114.    border-left: 3px solid #08c;
  115. }
  116.  
  117. #navbar-side ul ul{
  118.    display: none;
  119. }
  120.  
  121. #navbar-side ul ul li a{
  122.    padding-left: 30px;
  123.     border-left: none;
  124. }
  125.  
  126. #navbar-side ul ul li a:hover{
  127.    padding-left: 30px;
  128.     border-left: none;
  129. }
  130.  
  131. #navbar-side .menu-text{
  132.    margin-left: 20px;
  133. }
  134.  
  135. navbar-side b{
  136.     float: right;
  137.     margin-right: 17px;
  138. }
  139.  
  140. </style>
  141.  
  142.     <div id="navbar-top"></div>
  143.         <div id="navbar-side">
  144.             <ul>
  145.                 <li><a href="#"><i class="fa fa-home"></i><span class="menu-text">Dashboard</span></a></li>
  146.                 <li><a href="#"><i class="fa fa-bar-chart-o"></i><span class="menu-text">Charts</span></a></li>
  147.                 <li><a href="#"><i class="fa fa-table"></i><span class="menu-text">Tables</span></a></li>
  148.                 <li><a href="#"><i class="fa fa-edit"></i><span class="menu-text">Form</span></a></li>
  149.                 <li><a href="#"><i class="fa fa-font"></i><span class="menu-text">Typography</span></a></li>
  150.                 <li><a href="#"><i class="fa fa-desktop"></i><span class="menu-text">Element</span></a></li>
  151.                 <li><a href="#"><i class="fa fa-wrench"></i><span class="menu-text">Grid</span></a></li>
  152.                 <li>
  153.                     <a href="#"><i class="fa fa-caret-square-o-down"></i><span class="menu-text">Dropdown 1</span>&nbsp;<b class="fa fa-angle-left"></b></a>
  154.                         <ul>
  155.                             <li><a href="#"><span class="menu-text">Sub Menu 1</span></a></li>
  156.                             <li><a href="#"><span class="menu-text">Sub Menu 2</span></a></li>
  157.                         </ul>
  158.                 </li>
  159.                 <li>
  160.                     <a href="#"><i class="fa fa-caret-square-o-down"></i><span class="menu-text">Dropdown 2</span>&nbsp;<b class="fa fa-angle-left"></b></a>
  161.                         <ul>
  162.                             <li><a href="#"><span class="menu-text">Sub Menu 1</span></a></li>
  163.                             <li><a href="#"><span class="menu-text">Sub Menu 2</span></a></li>
  164.                         </ul>
  165.                 </li>
  166.                 <li><a href="#" class="minimize-menu"><i class="fa fa-chevron-circle-left"></i><span class="menu-text">Minimize Menu</span></a></li>
  167.             </ul>
  168.  
  169.         <div id="main"></div>
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×