Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • custom side bar with the help of jquery

    • 0
    • 1
    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 77
    Comment on it

    Hello Readers
    In this article I will guide you how to create custom side bar with the help of jquery.

    Here is the HTML

    <section id="slideBox" class="open">
              <nav id="menu">
                    <ul>
                        <li><a href="">Home</a></li>
                        <li><a href="">About Us</a></li>
                        <li><a href="">Gallery</a></li>
                        <li><a href="">Location</a></li>
                    </ul>
                </nav>
                <div id="slideBar">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </section>
    


    Here is the CSS

    *{
            padding :0px;
        margin:0px;
        }
            #slideBox {
            height: 100%;
            width: 260px;
            float: right;
            position: fixed;
            z-index: 12333300;
            text-align: left;
            left: -215px;
            }
    
    #menu{width:215px;height:100%; float:left;
    border-top: solid;
    border-color: #DDD;
    border-width: 1px;
        color:white;
    -webkit-box-shadow: 2px 0px 2px rgba(0,0,0,.5);
    -moz-box-shadow: 2px 0px 2px rgba(0,0,0,.5);
    box-shadow: 2px 0px 2px rgba(0,0,0,0.5);
    background: #717171;
    }
    
    
    
    #slideBar {
    width: 45px;
    background-color: rgb(218, 218, 218);
    float: right;
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px;}
    
    
    #slideBox li a {
    color: white;
    display: block;
    padding:10px;
    text-decoration: none;
    }
    
    #slideBox li a:hover {
    color: #AAA;
    
    }
    
    #slideBox li {
    list-style: none;
    text-align: left;
    border-top: solid;
    border-color: #ddd;
    border-width: 1px;
    font-size: 20px;
    width: 100%;
    }
    
    #slideBar span{
        display: block;
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        -ms-border-radius:5px;
        -o-border-radius:5px;
        border-radius:5px;
        height: 3px;
      margin: 5px;
      padding: 2px;
      background: #000;
    }
    


    Here is the JS

    $(document).ready(function(){
        $('#slideBar').on('click', function(){
              var $this = $("#slideBox");
              if ($this.hasClass('open')) {
                    $this.animate({
                      left : '0px'
                    }, 500).removeClass('open');
                  } 
              else {
                    $this.animate({
                      left : -215
                    }, 500).addClass('open');
                  }
                });
            });
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: