Subscribe - It's FREE!!

Stay Connected Here

Stay Updated With Us Here



Google

Create a responsive menu similar to facebook mobile with Bootstrap using Sidr plugin


Share with WhatsApp


Create a responsive menu similar to facebook mobile with Bootstrap using Sidr plugin


Nowdays responsive design of website is very necessary and in that too if your navigation is very good looking and easy to use then site is always gets remembered by the viewer. In this post I am going to share the code about how to create responsive menu like facebook using very famous and widely adopted plugin "sidr" i.e. too with very famous responsive framework "Bootstrap".
 

Recommended Book "JavaScript and JQuery: Interactive Front-End Web Development" to learn how to make your websites more interactive and your interfaces more interesting and intuitive (From Basic to Advanced)

Bootstrap is already comes with responsive menu but sidr menu looks more awesome. So I thought lets try to use sidr plugin with bootstrap and here is the code. :-)

If you are very new to Bootstrap, I will recommend you to read this post about What is Bootstrap.

<!DOCTYPE html>
<html>
<head>
    <title>Sidr Plugin with Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet"
        media="screen">
    <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
    <!-- sidr dark theme css -->
    <link href="http://www.berriart.com/sidr/javascripts/sidr/stylesheets/jquery.sidr.dark.css"
        rel="Stylesheet" />
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <button type="button" id="btnRespNav" class="btn btn-navbar" style="float: left">
                    <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
                    </span>
                </button>
                <a class="brand" href="#">IMInfo.in</a>
                <div class="nav-collapse collapse">
                    <ul class="nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Products</a></li>
                        <li><a href="#">Clients</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </div>
    </div>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.min.js"></script>
    <!-- sidr js -->
    <script src="http://www.berriart.com/sidr/javascripts/sidr/jquery.sidr.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $('.btn-navbar').sidr({
                name: 'respNav',
                source: '.nav-collapse', 
            });
        });

         //this code is close sidr menu if clicked outside  {optional}
         $(document).bind("click", function () {
             $.sidr('close', 'respNav');
         });
    </script>
</body>
</html>

 

and below is the live fiddle of the same code.


You can download Sidr plugin from here.

Hope you have liked this post. Do share your thought on it in comment section below.

 



If you enjoyed this post take 5 seconds to share it! Be Socialable. :-)

Share with WhatsApp

Posts To Read Next

How to create thumbnail image using HTML5 Canvas,Javascript

This post will help you to understand the code to create actual thumbnail image using HTML5 Canvas and javascript.


What is Bootstrap(One of the best free HTML CSS framework for responsive web applications)

In this post I will try to answer the question 'What is Bootstrap?', which is one of the widely used opensource HTML and CSS framework or you can say front end framework. I will also introduce some useful sites for BootStrap.


Visual Studio Code - Lighweight but powerful source code editor available for Windows, OS X and Linux

Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, OS X and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (C++, C#, Python, PHP) and runtimes.


How to post JSON string as a string in jQuery AJAX

Know how to post JSON String as string to the action method of controller in MVC.


How to call click or any event only once in jQuery

Know how to execute an click event or any event only once for any element in jQuery. Perform action only once and even not required to unbind event.


Your opinion is valuable for us! Comments, suggetions are welcome.


Submit your Email Id to stay updated with us and get notified with our new posts. It's FREE!
We know this popup is disturbing you!
But We would greatly appreciate if you share us with your friends below!

It will not take more than 2 seconds but will motivate us greatly to write more,share more!

x