6 Replies Latest reply: Sep 8, 2014 2:17 AM by IT-Amigo RSS

    New Bootstrap 3 Navbar plugin for BC Community.

    IT-Amigo Community Member
    IT-Amigo Sep 7, 2014 11:08 AM

      Hello everyone!

       

      I have just finished creating a plugin that will set up all the settings in order to make Bootstrap Navbar work without having to hassle with CSS & Javascript, or having to

      add the class "dropdown" for each dropdown menu inside Dynamic Menu manager at the backend. It also lets you to choose between toggle and hover on the dropdown menu. So if you client changes his/her mind you just

      change the property "dropdownToggle" to false.

       

      If you can optimise to speed it up feel free to do so, just make sure you share it here afterwards.

       

      Download the plugin here http://www.it-amigo.se/LiteratureRetrieve.aspx?ID=131498

       

      Instrucitons

      Just add the plugin as any JQuery plugin and then add the following code to your html document.

       

      $('#top_navbar').bootstrapNav({

          // Dropdown Choice: Toggle(Bootstrap Default) = true, Hover Dropdown = false.

          dropdownToggle: true,

          // At what point should navbar go back to Toggle for Mobile Devices.

          breakpoint: 1199

      });

       

      Tutorial Video

       

      • 210 Views
      • Tags:
        • 1. Re: New Bootstrap 3 Navbar plugin for BC Community.
          Liam Dilley CommunityMVP
          Liam Dilley Sep 7, 2014 6:01 PM (in response to IT-Amigo)

          That is cool, but a few of us have done webinar's about frameworks etc.

          One line of CSS coverts it to a hover

          • 2. Re: New Bootstrap 3 Navbar plugin for BC Community.
            IT-Amigo Community Member
            IT-Amigo Sep 7, 2014 11:41 PM (in response to Liam Dilley)

            Thanks Liam. You should bring it to the next webinars, because the point with this was just to make the whole process faster.Even if you already know how to do it.

            I get my bootstrap 3 navbars up in 5 minutes instead of 30min-1h now and it works for Desktop,Tablet, Mobile straight away. It also gives you the Bootstrap "Active" mode straight in the package as well.

             

            My client appreciated a lot as well because he always forgets about adding the class "dropdown" for each dropdown menu.

             

            Adding the youtube video that seems to have got lost in the post.

            • 3. Re: New Bootstrap 3 Navbar plugin for BC Community.
              Liam Dilley CommunityMVP
              Liam Dilley Sep 7, 2014 11:59 PM (in response to IT-Amigo)

              .YOURNAV > li:hover >ul {

                   display: block;

              }


              Core basic way to do it - Very easy. If people want to add classes its just 2/3 lines of jQuery

              • 4. Re: New Bootstrap 3 Navbar plugin for BC Community.
                IT-Amigo Community Member
                IT-Amigo Sep 8, 2014 12:45 AM (in response to Liam Dilley)

                True, but you forget one part. I did that as well before but you get one problems when you go into mobile at least i got.

                When i held my finger over it the dropdown menu kept showing up for some reason, and then there is thing with always adding the class "dropdown" :-)

                 

                Perhaps i it wrong, i dont know :-P

                • 5. Re: New Bootstrap 3 Navbar plugin for BC Community.
                  Liam Dilley CommunityMVP
                  Liam Dilley Sep 8, 2014 1:24 AM (in response to IT-Amigo)

                  You do not have hover on mobile devices. If you had a menu item with dropdown and touched it then it would load the page, not the menu, so you would want it to stay down so you could select the sub menu items

                  Bootstrap 3 is responsive by default anyway, so you would be doing always on and your CSS media queries for a site anyway

                   

                  Lots will find your plugin useful, but I hardly use plugins these days because 3/4 lines of good code with CSS can do the same thing

                  • 6. Re: New Bootstrap 3 Navbar plugin for BC Community.
                    IT-Amigo Community Member
                    IT-Amigo Sep 8, 2014 2:17 AM (in response to Liam Dilley)

                    Ya you are correct. A good CSS3 Code and JQuery code and do the same thing. :-D

                     

                    About the bug i was talking about sometimes was that even if you had the css & javascript correct, if you held your finger on a dropdown menu for more then 2 seconds the dropdown kept showing up. I followed the steps from bcgurus and the end result was always the same. After a while i got frustrated thats why i went down this road and went with a JQuery plugin.

                     

                    The worst part was when the client had it so hard to decide between toggle and hover and others wanted the top & second level menus to be clickable.

                     

                    How come you don't use many plugins these days, they are awesome. Googles Polymer is seems to go down this road.. i mean build sites with many different of plugins / modules.