Guest User

how to make show hide sidebar

a guest
Jan 13th, 2021
42
138 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