How to make show hide sidebar

Question

kazkuzzer007 0 Newbie Poster

9 Years Ago

I would like to create a sidebar like in the picture, but I do not know how to make it. How do I make it?

2 Contributors
6 Replies
5K Views
1 Day Discussion Span
Latest Post 9 Years Ago Latest Post by kazkuzzer007

All 6 Replies

JorgeM 958 Problem Solver

9 Years Ago

I am sure there are several ways to make this. One approach which shouldnt be too difficult is for you to create two sidebars. Show the thin one (#2) by default and hide the wider one (#1). Then, using javascript or jQuery (whatever makes you life easiser), on a certain event like hover, or click, hide sidebar #2, and show sidebar #1. Using jQuery, you can use some nice effects like show, hide, slide, toggle, etc...

using jQuery UI may be helpful as well so you dont have to write as much code.

http://api.jqueryui.com/slide-effect/?rdfrom=http://docs.jquery.com/mw/index.php?title=UI/Effects/Slide&redirect=no

if you use this jQuery UI slide effect, you can show #2, then on hover hide #1, and show then slide #2.

JorgeM 958 Problem Solver

9 Years Ago

maybe it would help to build a sample on jsfiddle.net so we can see what you are doing in action.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

kazkuzzer007 0 Newbie Poster · Answer 1 · 2014-08-20T16:17:21+00:00

Thanks for your answer. I have tried with this code:

$(document).ready(function(){
    $('.minimize-menu').click(function(){
          $('.minimize-menu > i').removeClass('fa-chevron-circle-left');
          $('.minimize-menu > i').addClass('fa-chevron-circle-right');
          $('#navbar-side').css({"width":"55px"});
          $('.menu-text').css({"display":"none"});
          $('#navbar-side > ul > li > a > b').remove();
     });
});

I have managed to create a number of image 1 into image number 2, but I could not make than the picture number 2 becomes number 1 picture

kazkuzzer007 0 Newbie Poster · Answer 2 · 2014-08-21T01:25:25+00:00

This is the full code.

index.php

<!DOCTYPE html>
<head>
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/main.js" type="text/javascript"></script>
</head>
<body>
    <div id="navbar-top"></div>
    <div class="handle">Menu</div>
    <div id="wrapper">
        <div id="navbar-side">
            <ul>
                <li><a href="#"><i class="fa fa-home"></i><span class="menu-text">Dashboard</span></a></li>
                <li><a href="#"><i class="fa fa-bar-chart-o"></i><span class="menu-text">Charts</span></a></li>
                <li><a href="#"><i class="fa fa-table"></i><span class="menu-text">Tables</span></a></li>
                <li><a href="#"><i class="fa fa-edit"></i><span class="menu-text">Form</span></a></li>
                <li><a href="#"><i class="fa fa-font"></i><span class="menu-text">Typography</span></a></li>
                <li><a href="#"><i class="fa fa-desktop"></i><span class="menu-text">Element</span></a></li>
                <li><a href="#"><i class="fa fa-wrench"></i><span class="menu-text">Grid</span></a></li>
                <li>
                    <a href="#"><i class="fa fa-caret-square-o-down"></i><span class="menu-text">Dropdown 1</span><b class="fa fa-angle-left"></b></a>
                        <ul>
                            <li><a href="#"><span class="menu-text">Sub Menu 1</span></a></li>
                            <li><a href="#"><span class="menu-text">Sub Menu 2</span></a></li>
                        </ul>
                </li>
                <li>
                    <a href="#"><i class="fa fa-caret-square-o-down"></i><span class="menu-text">Dropdown 2</span><b class="fa fa-angle-left"></b></a>
                        <ul>
                            <li><a href="#"><span class="menu-text">Sub Menu 1</span></a></li>
                            <li><a href="#"><span class="menu-text">Sub Menu 2</span></a></li>
                        </ul>
                </li>
                <li><a href="#" class="minimize-menu"><i class="fa fa-chevron-circle-left"></i><span class="menu-text">Minimize Menu</span></a></li>
            </ul>
        </div>
        <div id="main"></div>
    </div>
</body>
</html>

style.css

*{
    padding: 0;
    margin: 0;
}

body{
    min-width: 100%;
    min-height: 100%;
    padding-bottom: 0;
    color: #393939;
    font-family: sans-serif;
}

#navbar-top{
    width: 100%;
    height: 50px;
    position: fixed;
    background-color: #438eb9;
}
.handle{
    display: none;
}
#navbar-side{
    width: 189px;
    height: 100%;
    margin-top: 50px;
    position: fixed;
    background-color: #f2f2f2;
    border-right: 1px solid #ccc;
}

#navbar-side ul{
    overflow: hidden;
    padding: 0;
    margin: 0;
}

#navbar-side ul li{
    list-style: none;
    border-bottom: 1px solid #e5e5e5;
}

#navbar-side a{
    width: 100%;
    font-size: 14px;
    line-height: normal;
    padding: 10px 0 10px 20px;
    box-sizing: border-box;
    display: block;
    color: #555;
    text-decoration: none;
}

#navbar-side a:hover{
    padding-left: 17px;
    background-color: #fff;
    color: #08c;
    border-left: 3px solid #08c;
}

#navbar-side ul ul{
    display: none;
}

#navbar-side ul ul li a{
    padding-left: 30px;
    border-left: none;
}

#navbar-side ul ul li a:hover{
    padding-left: 30px;
    border-left: none;
}

#navbar-side .menu-text{
    margin-left: 20px;
}

#navbar-side b{
    float: right;
    margin-right: 17px;
}

main.js

$(document).ready(function(){

     $('#navbar-side > ul > li > a').click(function() {
          var checkElement = $(this).next();

          $('#navbar-side li a').removeClass('active');
          $(this).closest('a').addClass('active');  


          if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
               $(this).closest('a').removeClass('active');
               $(this).closest('a').addClass('nonactive');
               $('.nonactive b').addClass('fa-angle-left');
               $('.nonactive b').removeClass('fa-angle-down');

               checkElement.slideUp('normal');
          }

          if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
               $(this).closest('a').removeClass('nonactive');
               $('.active b').removeClass('fa-angle-left');
               $('.active b').addClass('fa-angle-down');

               $('#navbar-side ul ul:visible').slideUp('normal');
               checkElement.slideDown('normal');
          }

          if (checkElement.is('ul')) {
               return false;
          } else {
               return true; 
          }     
     });


     $('.minimize-menu').click(function(){
          $('.minimize-menu > i').removeClass('fa-chevron-circle-left');
          $('.minimize-menu > i').addClass('fa-chevron-circle-right');
          $('#navbar-side').css({"width":"55px"});
          $('.menu-text').css({"display":"none"});
          $('#navbar-side > ul > li > a > b').remove();

          $('.minimize-menu').addClass('maximize-menu');
     });
});

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 3 · 2014-08-21T19:46:24+00:00

Nice job... if you created it. if not, you should provide some credit to whoever did.

in any case, with a couple of small changes, it works as expected. take a look at the demo on jsfiddle.net -- > http://jsfiddle.net/jt6ag651/

kazkuzzer007 0 Newbie Poster · Answer 4 · 2014-08-22T02:05:18+00:00

kazkuzzer007 0 Newbie Poster

9 Years Ago

It's work. Thank you for your help.

How to make show hide sidebar

Recommended Answers Collapse Answers

All 6 Replies

Recommended Answers