Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

🏠 » CSS » Create Cool Simple Sidebar Menu with Bootstrap 3 and Font Awesome

Create Cool Simple Sidebar Menu with Bootstrap 3 and Font Awesome

By ∙ ∙ CSS ∙ 138 Comments

Inspired by the bootstrap sidebar menu from wrapbootstrap.com, I create a cool simple sidebar menu using bootstrap 3 and font awesome framework.

create simple sidebar menu bootstrap

Simple sidebar menu / vertical dropdown menu was adopted from example simple sidebar from startbootstrap.com , i just modify to be more cool. The advantages from this sidebar, when the screen size equal to 768px and toggle button is clicked, the sidebar will be hidden and will only display the menus icon.

To beautify the icon in my bootstrap sidebar menu, i use the font awesome icon framework in order to the sidebar menu look more attractive .

View my bootstrap left sidebar menu as shown below

Create vertical dropdown bootstrap menu how to create sidebar dropdown with bootstrap

Let’s start creating left sidebar menu with boostrap 3. Initial preparation:

1. Make sure you have downloaded the boostrap 3 framework here

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Bootstrap is a framework for building responsive web design. Which means that the web interface created by bootstrapping will adjust the screen size of the browser we use both in desktop, tablet or mobile device. This feature can be enabled or disabled according to our own desires. By bootstrapping we also can build dynamic or static web.

2. Download the font awesome css to beautify the appearance of the icon here

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS “font awesome”.
Font awesome is a font web formed several icons for web interface, commonly used for Bootstrap, there are more than 100+ icons in Font awesome and will increase each its release.

3. Download Jquery-1.11.2.min.js here

4. Simple sidebar menu original file from startbootstrap.com. I just change some css file from simple sidebar menu from startbootstrap.com and add new javascript

Create css file as simple-sidebar.css and enter the following code

Create a javascript file as sidebar_menu.js and enter the following code

Create index html and copy the following code

Finish!! Perhaps the sidebar is not yet perfect. But it could be a tutorial / ideas to create bootstrap sidebar nicer than mine. Simply modify sidebar menu accordance with your wishes. You can see my another bootstrap tutorial here

For demo ” cool simple sidebar menu bootstrap 3 by seegatesite ” or you can download script below

Last update script  :

  • 9/9/2015 – fixed bug.

Reader Interactions

Comments

  5. Thanks you very much! I’m tweaking it for my RTL needs right now.
    Although I’m trying to get over a little bug – try changing font size to 16px and watch the li items getting indented increasingly…

    Reply

    • Did you ever find a solution for this? I Have a ton of links that need to be nested in the accordions and am running out of room. If i adjust the line-height of the sidebar it and causes the elements to be indented. Is there a way to keep this from happening?

      Reply

      • It appears that the issue is caused by the font awesome icons, which dont fit when line-height is reduced. this can be solved by changing the span class fa-lg to fa-sm and then reducing the line-height parameter.

        Reply

  9. When you toggle the sidebar to only show the icons, the page content does not expand. I have tried a few things, but I am not able to figure out how to get the page content wrapper to expand to the page when you toggle the sidebar. Can you think of a solution?

    E.g. If you toggle the sidebar in a desktop media, you will see the content does not expand, it just moves left.

    Reply

  10. I am not sure where my previous comment went, but it stated a bug where the page content wrapper does not expand when the sidebar is toggled to the left. You will notice when you hit the toggle button, the content just moves to the left but its container is not expanded. Any fix for this?

    Reply

  12. Hi there, everything is going well here and ofcourse every one is
    sharing information, that’s really good, keep up writing.

    Reply

  13. And why I can’t use the latest jquery ?
    I have tried to change from script src=”js/jquery-1.11.2.min.js” to script src=”js/jquery-1.11.3.min.js”

    and then it stop working…

    But thanks… it’s really good stuff…

    Reply

    • #sidebar-wrapper
      { height : 100% }
      causing scroll on initiial browser loading

      1. Suppose if we are having a header & footer in page and placed the sidebar menu with the above style
      Header style
      ——————
      .main-header {
      top: 0;
      right: 0;
      left: 0;
      height: 5%;
      background-color: #009530;
      border-color: transparent;
      margin: 0;
      }
      footer
      ———-
      footer {
      bottom: 0;
      background-color: #009530;
      color: #fff;
      width: 100%;
      position: fixed;
      padding-left: 15px;
      padding-right: 15px;
      height: 60px;
      z-index: 1000;
      }

      Copyright 2015 © Schneider Electric. All rights reserved.

      This will also cause scrolling on browser. currently we have handled with height:calc(100% – 55px); for fixing the scroll issue. but i think this is not a proper solution.

      2. One more suggestion instead of width: 250 px specifying in pixels, is it easier to modify in percentage wise?

      Reply

      • Remove height : 100% from #sidebar-wrapper and add the following:

        #sidebar-wrapper {
        top: 53px; /*the height of the navbar*/
        bottom: 0;
        overflow-x: hidden;
        }

        Reply

  19. Thank you very much this is great!
    Is there a way to tweak javascript or css so that the menu bar default state is hidden (shrinked)?
    Also, I dont know why, but it doesnt show icons on my computer, just some strange empty rectangles.

    Thank you,
    Cheers

    Reply

    • 1. If you need to hidden the menu bar default state ,edit script below on sidebar_menu.js

      $(document).ready(function() {initMenu();$("#menu-toggle-2").click();});

      2. Check with f12 for strange empty rectangles icon

      Reply

      • Thank you very much for replay!

        Yes, I wanted the menu bar to be collapsed all the time but to keep it popping out on mouse over. I tried with changing the sidebar_menu.js to something like this:

        $(document).ready(function() {initMenu();
        $(“#wrapper”).toggleClass(“toggled”)=true;
        });

        And It is working with this code, the menu bar is collapsed by default and it pops out on mouse over, but only on big and medium resolution. When the window is resized on small resolution (like mobile) then menu bar shows again in full width and I want to prevent that.

        My guess is that it has to do with “navigation bar” (on the top of the page) collapsing state. But I don`t know how to handle it.

        Thank you very much for your help 🙂

        Thank you, it is great

        Reply

  20. Great but I find your right side space is not expanding when tested and i removed the overflow hidden in your css file and the right side is expanding where i would like to add some content running to pages.
    Similary i need to expand the left side menu. I tested adding some more menu elements but its fixed and does not scroll down to show the rest of the menu elements. What to do sir?

    Reply

  22. Hi. I wanted to change the color of the tabs after clicking them. I’ve had progress (I managed to change the color of the other tabs) but I cant make the Dashboard tab lose it color when it is not the clicked tab. How can I do it? Thank youl.

    Reply

      • Never mind. I already solved my problem. But I still have another problem, how can I make the tabs toggable? I mean when I click on the tab, it shows the content, but when I click it again when the contents are shown, it doesn’t hide its contents. How can I make it like that? Thank you so much.

        Reply

  24. Good day i wonder if i can disable the hover button and do this automatically when the page load, and if you can help me with that.

    Reply

  25. Hey love this but my only issue is that it doesn’t go 100% height. If I add anything to the wrapper on the right side more than around a 1000px the sidebar stops and the content keeps going in the same size as above. So I added 2000px to the height property and the sidebar gets to the right length but that means I have to figure out the exact height. Obviously I can do this but wondering why the 100% height wouldn’t work.

    Reply

  26. I am wondering how to put a marker on the sidebar link that is active. Like when you click the shortcuts menu and it goes to that page. Instead of say a color change you put a triangle at the edge so it picks up the color of the main content area. I have seen this on other sites but can’t figure out how they do it. Thanks for the help!

    Reply

  27. Awesome, thanks ! just a little change that I had to make in the .js file:

    $(document).on(“click”, “#target-id”, function(e){
    {{ rest of the stuff }}
    });

    without this collapse button was not working. Otherwise perfect !

    Reply

  30. Great Menu.
    When we click on the content brought up in the center area after clicking a left side menu option the color of the menu changes to
    background: rgba(255, 255, 0, 0.701961);

    When we click the menu we have our yellow color by:
    .sidebar-nav li a:active,
    .sidebar-nav li a:focus {
    text-decoration: none;
    background: #ffff00;
    color:black;
    }
    in simple-sidebar.css

    Is there a way that we can keep the selected left menu option as #ffff00, preventing:
    background: rgba(255, 255, 0, 0.701961);
    from being the background color?

    Thanks!

    Reply

  32. Thanks for the great work you did with this.
    How can the I make only the page content scroll while both the nav bars remain fixed

    Reply

  34. great work but how make right to left , i changed all (****-right) or (right) to (***-left) or (left) and vise versa in css file also i use “” over bootstrap 3.3.6 , to rlt language , but always icons on the left and text on the right , how solve it? Note: iam new in those things

    Reply

  39. Hi Sigit, thanks you so much for your code, it is working perfectly and very elegant, instructions how to use so clear. Thanks a lot , great job!!

    Reply

  40. Hi! This is great! Wonderful work. I have a question.

    I see that if i uncomment $(‘#menu ul:first’).show(); I can get the first UL to expand by default. How can I make it so that the second or third or fourth is expanded by default? my first guess — ul:second doesn’t do it… internet hasn’t helped me find how to reference these subsequen UL items …. Thanks!

    Reply

    • A little searching in jquery — I found eq(n) where n is the index — so, menu ul:eq(3) will show fourth menu item… Thanks anyways!

      Reply

  41. thank you very much for the tutorial 😉 . but the icon didnt appear 🙁 . maybe there is something i missing?

    Reply

  42. How can we make the stack collapsible using the same line item link after it’s expanded? The only way to close them is by clicking another pill that’s also expandable.

    Reply

  43. Hey, great job! Just I’ve encoutered the problem of height 100% with page header of 60px causing 60px of vertical scroll in page. Have you find any solution? the height:calc(100% – 60px); statment seems to not working!

    Thanks in advance!

    Reply

  44. Thanks for this excellent tutorial.

    By your example, once I click the sidebar menu on “Dashboard” or “Shortcut”, it shows its corresponding submenu “link1” and “link2.”
    Is it possible that if I clink the same menu again (dashboard or Shortcut) then it collapses its submenu.

    The expected scenario is:
    When I click Dashboard in 1st time, it shows its submenu.
    When I click Dashboard (not click Shortcut) in 2nd time, it collapses its submenu.

    Thank you very much.

    Reply

  46. Hello, awesome job you did here! Could you give me a hint of how to stop the menu toggleing? I’m noob with jQuery 🙂

    Reply

  47. Great tut!
    Is it possible to have side bar on desktop and standard top bar on mobile?
    How can this be done?

    Also is it possible to click a link to show the submenu and click again to hide the submenu?

    Thanks

    Reply

  48. Hi, thanks for the great work. I noticed that the sidebar disappear in small devices. Do you know why and how to fix it. Another thing, can I use two instances (left and right) in one page?

    Reply

  49. Hello,

    Your tutorial includes expanding the UL when clicked to show sub items (Link 1 / Link 2).
    How can it be amended so that a second click hides the sub items again?

    Thanks

    Reply

    • I figured it out:

      function initMenu() {
      $(‘#menu ul’).hide();
      $(‘#menu ul’).children(‘.current’).parent().show();
      //$(‘#menu ul:first’).show();
      $(‘#menu li a’).click(
      function () {
      var checkElement = $(this).next();
      if ((checkElement.is(‘ul’)) && (checkElement.is(‘:visible’))) {
      $(‘#menu ul:visible’).slideDown(‘normal’);
      checkElement.slideUp(‘normal’);
      return false;
      }
      if ((checkElement.is(‘ul’)) && (!checkElement.is(‘:visible’))) {
      $(‘#menu ul:visible’).slideUp(‘normal’);
      checkElement.slideDown(‘normal’);
      return false;
      }

      }
      );
      }

      Reply

  50. Your facebook ‘likes’ were 721 when I followed your instruction in order to download your cool sidebar script. But after I augmented the figure to 722, I still could not download the script. It still remained ‘Locked’.

    Reply

      • I just did my friend. But when I clicked on the Facebook icon, all I saw was just the figure 726. How many times do I need to ‘like’ your site on Facebook before I am able to download the script? Please expatiate exactly on how one might succeed in this download. Cheers, Sigit

        Reply

  51. I checked again, but still could not download the script. How many times is someone supposed to go to Facebook and ‘like’ your site before being able to download the script please?
    Cheers.

    Reply

  53. Hi great work! Thank you. How can I fully hide the sidebar menu when toggled to close? (No icons appearing and just full content showing)

    Reply

  54. Thanks for the script. It is grant. I had a question. Would it be possible to have two branding for normal and mobile viewing? Also how would you add more links to the right of the header strip as it would be good for some informative labels maybe. I appreciate your help.
    Ben

    Reply

  55. hello,

    When i Click on the submenu (Link 1/ Link 2) with a a ref. (Ajax.ActionLink) the side bar collapses.

    How can i stop it??

    I tried several things in function initMenu(). but nothing works..

    Who can help me?

    Reply

  57. This is amazing. Is there a way to integrate this into Drupal 7. I’m using Bootstrap 3 theme there and trying to find a way to make my menu look like in this tutorial.

    Reply

  58. Looks great! Thank you, looking forward to reviewing your tutorial. Any tutorials on JSF and bootstrap or Facelets Templates

    Reply

  59. Really good one. But I have observed one issue.
    1. Open sub-menu of Dashboard
    2. Click menu toggling
    3. Sub-menu items / icons are not displaying.

    I have observed this is because sub-menu size is less and also whenever hover it highlights small portion instead of full line.

    Please help me to resolve the same.

    Reply

    • Simple example, give new attribute on a element

      [php]<a href=’#’ class=’go-to-menu’ menu-id=’3′ rel="nofollow">menu 3</a>[/php]
      [php]
      $(document).on(‘click’,’.go-to-menu’,function(){
      var menu = $(this).attr(‘menu-id’);
      var value = {
      menu-number= menu;
      };
      $.ajax(
      {
      url : "menu.php",
      type: "POST",
      data : value,
      success: function(data, textStatus, jqXHR)
      {
      // load content here
      },
      error: function(jqXHR, textStatus, errorThrown)
      {
      alert(textStatus);
      }
      });
      });
      [/php]

      I have not tried the above code, but that’s the basic code..hope useful

      Reply

  62. can when the page load Close the Navigation on click open… now by start the site is open the Navigation many thx!!

    Reply

  63. Hi, I’ve a question when in the page we’ve divs that generate scroll the sidebar menu not use the height 100%, appear a white space under of this.

    You can see this here: https:// postimg. org/image/ga156e4gj/

    Reply

    • thank you for correcting,

      fix the css like code below
      [php]
      #wrapper {
      padding-left: 0;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
      overflow: hidden;
      background-color: #000;
      }
      #sidebar-wrapper {
      z-index: 1000;
      position: absolute;
      left: 250px;
      width: 0;
      height: 100%;
      margin-left: -250px;
      overflow-y: auto;
      background: #000;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
      overflow: hidden;
      }
      #page-content-wrapper {
      position: absolute;
      padding: 15px;
      width: 100%;
      overflow-x: hidden;
      background-color: white;
      }
      [/php]

      Hope fix your problem

      Reply

  65. Hi, I tested the css and work, now the issue persist when the menu initialize with this code in the function initMenu() $(“#wrapper”).toggleClass(“toggled toggled-2”); for make the menu show only icons.

    Here you can see the issue:

    https : //mega.nz/#!TVNATBQQ!HCbWotWRvwcpBhO2LqDc8HWABIHps_WzrgxaKiK0DmM

    Reply

  68. Hello,

    How i can fix the toogle button. it always resize according the screen size. so on big screen it is far away on the right of the slidebar.

    Reply

  72. hay thank you for sharing , i am trying to include it in angular 2 project but am having some difficulties using jquery in angular 2 ,
    please can you give me the side bar menu in javascript or some other solution and thannk you so much

    Reply

  73. This is a great sidebar, thanks for sharing:) Can you help me with a modification? I would like to have the toggle menu button at the very left on the navbar (where u have placed the brand name) on both desktop and mobile devices. And a logo image at the middle of the navbar. I would really appreciate of you can help me, couse i can t figure it out :/

    Reply

  74. Awesome navbar. One question, is it possible to add the toggle button that is currently on the top header to actually display inside the left navigation bar?

    Reply

  77. Good example, I need small help on hove I don’t want to expand the menu how can I do that. I need to show or hide the menu on button click. Sub menu’s I want to display to the right how can I do that.

    Reply

Leave a Reply to Ed Risinger Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.