Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Slidebar Menu plugin in Jquery

    @swati.kothiyal
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 544
    Comment on it

    We can create a slidebar menu using jquery slidebar plugin. It is a jQuery plugin that gives a slidebar menu for easily implementing in the web pages.

    We have to include slidebars.js in our source files.

    Here is an example that shows how to implement this plugin:

    1. <!doctype html>
    2. <html>
    3.  
    4.    <head>
    5.       <title>Slidebars Menu</title>
    6.       <meta name = "viewport" content = "width = device-width, 
    7.          initial-scale = 1.0, minimum-scale = 1.0, 
    8.          maximum-scale = 1.0, user-scalable = no">
    9.       <link rel = "stylesheet" href = "slidebars.css">
    10.       <link rel = "stylesheet" href = "example-styles.css">
    11.    </head>
    12.  
    13.    <body>
    14.  
    15.       <div id = "sb-site">
    16.  
    17.          <ul>
    18.             <li class = "sb-toggle-left">Click here to slide menu</li> 
    19.          </ul>
    20.       </div>
    21.  
    22.       <div class = "sb-slidebar sb-left sb-style-push">
    23.          <p>1</p>
    24.          <hr/>
    25.          <p>2</p>
    26.          <hr/>
    27.          <p>3</p>
    28.          <hr/>
    29.          <p>4</p>
    30.          <hr/>
    31.       </div>
    32.  
    33.       <script 
    34.          src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>    
    35.       <script src = "slidebars.js"></script>
    36.  
    37.       <script>
    38.          (function($) {
    39.             $(document).ready(function() {
    40.                $.slidebars();
    41.             });
    42.          }) (jQuery);
    43.       </script>
    44.  
    45.    </body>
    46.  
    47. </html>
    HTML5 css3 Javascript JQuery
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: