0

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?

Attachments tanya.jpg 95.62 KB
2
Contributors
6
Replies
31
Views
2 Years
Discussion Span
Last Post by kazkuzzer007
0

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.

0

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

0

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

0

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');
     });
});
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.