Drop Down Menu using Bootstrap

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
User avatar
Kedar_Sapkota
Joomla! Apprentice
Joomla! Apprentice
Posts: 16
Joined: Tue Sep 11, 2012 3:22 am
Location: Kathmandu, Nepal
Contact:

Drop Down Menu using Bootstrap

Postby Kedar_Sapkota » Tue Nov 13, 2012 6:03 am

How to create menu in Joomla 3 using bootstrap.I am familiar with bootstrap and joomla 3 so I have created some templates too but the drop down part is hurting me.i need a quick help.Thanks in advance. :(
Kedar Sapkota(Web programmer/designer)
http://www.kedarsapkota.com.np

larseee
Joomla! Apprentice
Joomla! Apprentice
Posts: 17
Joined: Sun Jun 15, 2008 1:09 pm

Re: Drop Down Menu using Bootstrap

Postby larseee » Thu Nov 29, 2012 9:24 am

I use the default Joomla example data and put the Main Menu Module to position top-menu. To match the correct CSS class I need to add " nav-dropdown" in the Menu Class Suffix (Extensions -> Module Manager -> Main Menu -> Edit -> Advanced Options)


Quoted form this article: http://magazine.joomla.org/issues/issue ... om-Scratch

User avatar
intheair
Joomla! Apprentice
Joomla! Apprentice
Posts: 44
Joined: Wed Jan 25, 2012 8:59 am
Contact:

Re: Drop Down Menu using Bootstrap

Postby intheair » Wed Jan 02, 2013 4:30 pm

@Lar

No that is for 2.5 not 3.0....

And no it doesnt work.
Joomla Templates & Support
www.razortemplates.com

User avatar
mediaguru
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 142
Joined: Mon Sep 19, 2005 3:56 am
Location: USA
Contact:

Re: Drop Down Menu using Bootstrap

Postby mediaguru » Thu Jan 10, 2013 6:22 pm

Anyone find a solution for this yet?

Cas87
Joomla! Apprentice
Joomla! Apprentice
Posts: 8
Joined: Mon Jan 14, 2013 8:58 pm
Location: Scunthorpe
Contact:

Re: Drop Down Menu using Bootstrap

Postby Cas87 » Mon Jan 14, 2013 9:38 pm

mediaguru wrote:Anyone find a solution for this yet?


+1 for a solution to this!

User avatar
intheair
Joomla! Apprentice
Joomla! Apprentice
Posts: 44
Joined: Wed Jan 25, 2012 8:59 am
Contact:

Re: Drop Down Menu using Bootstrap

Postby intheair » Tue Jan 15, 2013 8:57 am

Must be top secret! :(
Joomla Templates & Support
www.razortemplates.com

Ichtus84
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Wed Jan 23, 2013 11:46 am

Re: Drop Down Menu using Bootstrap

Postby Ichtus84 » Wed Jan 23, 2013 11:50 am

I found the solution to creating a dropdownmenu in Joomla 3.0 using Bootstrap...

Code: Select all

<script type="text/javascript">
  (function($){   
    $(document).ready(function(){
      // dropdown
      $('.parent').addClass('dropdown');
      $('.parent > a').addClass('dropdown-toggle');
      $('.parent > a').attr('data-toggle', 'dropdown');
      $('.parent > a').append('<b class="caret"></b>');
      $('.parent > ul').addClass('dropdown-menu');
    });
  })(jQuery);
</script>

Put it in the index.php file at the bottom and reupload it.

If it still doen't work update /media/jui/js/bootstrap.min.js . It's using version 2.1 and now it is version 2.2.

If you testing it on iPhone and the dropdown isn't working well add next 2 lines in the head

Code: Select all

<meta name="apple-mobile-web-app-capable" content="yes"><!-- To make the URL and button bars disappear -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

shuyo
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Tue Jan 29, 2013 10:25 pm

Re: Drop Down Menu using Bootstrap

Postby shuyo » Tue Jan 29, 2013 10:43 pm

Your solution works great, but only after I manaully added bootstrap-dropdown.js to index.php.

Code: Select all

<script src="<?php echo $this->baseurl ?>/plugins/system/twbootstrap/js/bootstrap/bootstrap-dropdown.js"></script>

bigdean10
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Tue Feb 12, 2013 1:43 am

Re: Drop Down Menu using Bootstrap

Postby bigdean10 » Tue Feb 12, 2013 2:07 am

Finally a solution, thanks Ichtus84!

sniper_david
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Thu Aug 18, 2005 2:24 pm

Re: Drop Down Menu using Bootstrap

Postby sniper_david » Mon Feb 18, 2013 9:36 am

Works great.

I have upgrade to bootstrap 2.3.0 ( media/jui )
and place the javadcript file from ichtus84 in the index.php of my template.

Everything is working fine.

johnclr
I've been banned!
Posts: 12
Joined: Thu Feb 21, 2013 6:37 am
Location: USA
Contact:

Re: Drop Down Menu using Bootstrap

Postby johnclr » Fri Mar 01, 2013 6:22 am

i think solution its find now. thanks for a Ichtus84.

User avatar
intheair
Joomla! Apprentice
Joomla! Apprentice
Posts: 44
Joined: Wed Jan 25, 2012 8:59 am
Contact:

Re: Drop Down Menu using Bootstrap

Postby intheair » Thu Mar 28, 2013 1:50 pm

I am finding that using Ichtus84's solution that some dropdowns work and others don't, can any one else confirm this?
Joomla Templates & Support
www.razortemplates.com

ryf
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Tue Jan 22, 2013 8:28 pm

Re: Drop Down Menu using Bootstrap

Postby ryf » Tue Apr 02, 2013 12:43 pm

Hi

Thanks for this. This all works also with bootstrap 2.3.1. However I have a side effect. As soon as I use the bootstrap-min.js (bootstrap 2.3.1) with the relatet css files the menu in Joomla 3.0.3 backend is not longer working. For e.g I can no longer access in the top menu extensions and select than modules... nothing happens..

The workaround is to select modules via "system" and than "control panel" from there it works to select modules. Same effect for content but not for extension manager. As soon as swap back to bootstrap 2.1 (the standard installed one on Joomla 3.03) all works... but no the drop down on ipad or iphone :-(.

Anyone same effect or a solution for this?

Luegge
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Sat Apr 27, 2013 1:17 pm

Re: Drop Down Menu using Bootstrap

Postby Luegge » Sat Apr 27, 2013 1:24 pm

I found a solution to the problem with the back-end not functioning any more. Instead of upgrading the bootstrap version and including bootstrap-dropdown.js, simply add the following to the top of the template (I include jQuery to avoid any conflict with mootools, such that the jQuery namespace is not '$' any more, but 'jQuery'):

Code: Select all

JHtml::_('jquery.framework');
JHtml::_('bootstrap.framework');


Then change the code snippet of Ichtus84 to the following:

Code: Select all

jQuery(document).ready(function(){
        // dropdown
        jQuery('.parent').addClass('dropdown');
        jQuery('.parent > a').addClass('dropdown-toggle');
        jQuery('.parent > a').attr('data-toggle', 'dropdown');
        jQuery('.parent > a').attr('href','#');
        jQuery('.parent > a').append('<span class="caret"></span>');
        jQuery('.parent > ul').addClass('dropdown-menu');
    });


With this, my dropdown menus work both in the back-end and the front-end.

o2co
I've been banned!
Posts: 14
Joined: Wed May 15, 2013 7:49 am

Re: Drop Down Menu using Bootstrap

Postby o2co » Thu May 30, 2013 8:17 am

hi Ichtus84
tank you i search a lot for find a solution
finaly i find your soultion and its work for me
thank again

benjoman
Joomla! Intern
Joomla! Intern
Posts: 60
Joined: Thu Nov 26, 2009 12:24 pm

Re: Drop Down Menu using Bootstrap

Postby benjoman » Sat Jun 29, 2013 10:43 am

hello,
i'm useing joomla 3.1 with the protostar template.
this is the page of site were i testing the code: http://[no tiny url]/1cyDyBr (used bitly because site saying the domain is spam - use bit_dot_ly instead of "no tiny url")

i need help to make a menu it nav-collapse and look like the bootstrap css design... the template design take over and the menu icon in tablet and smartphones not working...

i pasted the code in the protostar template

Code: Select all

<!-- Begin Navbar-->
    <?php if ($this->countModules('position-9')): ?>
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse"
          data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">ALS</a>
          <div class="nav-collapse collapse">
            <jdoc:include type="modules" name="position-9" style="none" />
          </div>
        </div>
      </div>
    </div><!--End navbar-->
    <?php endif; ?>


pasted the JHtml code and script of Luegge

the dropdown is working but not in when collapsing to tablet and smartphones mode...

any one know whats the problem ?

Luegge
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Sat Apr 27, 2013 1:17 pm

Re: Drop Down Menu using Bootstrap

Postby Luegge » Mon Jul 01, 2013 5:21 am

Hi benjoman,

I have not tried this, but looking at the bootstrap documentation site, you could try the following:

change

Code: Select all

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

to

Code: Select all

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-responsive-collapse">


as well as

Code: Select all

<div class="nav-collapse collapse">

to

Code: Select all

<div class="nav-collapse collapse nav-responsive-collapse">

turdi
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Mon Jul 22, 2013 10:17 am

Re: Drop Down Menu using Bootstrap

Postby turdi » Mon Jul 22, 2013 10:43 am

intheair wrote:I am finding that using Ichtus84's solution that some dropdowns work and others don't, can any one else confirm this?


Yep, i'm experiencing strange behavior...

It collapses, work's once and then stop's working... Tested in Google Chrome and Android Chrome.

Any suggestion's how to fix?

Here's the page: www.turdidesigns.com

User avatar
mamboline
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Wed Oct 05, 2005 12:42 pm
Location: Beograd, Serbia
Contact:

Re: Drop Down Menu using Bootstrap

Postby mamboline » Sun Aug 25, 2013 7:56 pm

Perhaps this solution is not working anymore with new Bootstrap 3.0.0. Actually, it works, but only for the first level of submenu items. Any thoughts?
http://www.hotjoomlatemplates.com - Joomla templates
http://www.designdestiny.net - Design and Joomla development

User avatar
mamboline
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Wed Oct 05, 2005 12:42 pm
Location: Beograd, Serbia
Contact:

Re: Drop Down Menu using Bootstrap

Postby mamboline » Sun Aug 25, 2013 8:31 pm

Perhaps I found a solution myself. I am not sure if this is connected with Bootstrap version, but this will make your sub-sub menus to work.

Code: Select all

<script type="text/javascript">
      (function(jQuery){   
        jQuery(document).ready(function(){
          // dropdown
          jQuery('.parent').addClass('dropdown');
          jQuery('.parent > a').addClass('dropdown-toggle');
          jQuery('.parent > a').attr('data-toggle', 'dropdown');
          jQuery('.parent > a').append('<b class="caret"></b>');
          jQuery('.parent > ul').addClass('dropdown-menu');
          jQuery('ul.dropdown-menu li.dropdown a.dropdown-toggle').hover(
              function () {
                jQuery('ul.dropdown-menu li.dropdown').removeClass('open');
                jQuery(this).parent().addClass('open');
              }
          );
        });
      })(jQuery);
    </script>


Finally, you just need to move the third level to the left/right in CSS:

Code: Select all

ul.nav-child ul.nav-child {
   left: 150px;
   top:0;
}
http://www.hotjoomlatemplates.com - Joomla templates
http://www.designdestiny.net - Design and Joomla development

krishunt
Joomla! Intern
Joomla! Intern
Posts: 99
Joined: Wed Feb 08, 2012 8:37 pm

Re: Drop Down Menu using Bootstrap

Postby krishunt » Tue Oct 01, 2013 1:56 pm

Ichtus84's solution seems to almost work for me, in that the dropdown carets are now showing up, but when I click on a dropdown, instead of revealing the submenus, I am taken to the page that is linked from the top level menu item. How can I either remove the link from the top level menu item, or change the handler from on click to on hover? As far as I know, each menu item has to link to something.

I tried $('.parent > a').click(function(e){e.preventDefault();}); and it didn't have any effect.

krishunt
Joomla! Intern
Joomla! Intern
Posts: 99
Joined: Wed Feb 08, 2012 8:37 pm

Re: Drop Down Menu using Bootstrap

Postby krishunt » Tue Oct 01, 2013 4:06 pm

I think I solved this by changing the menu item type from Single Article to External URL, and entering a URL of #. The dropdown is showing up now! Woo, yay.

lynxbishop
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Sat Nov 02, 2013 2:50 am

Re: Drop Down Menu using Bootstrap

Postby lynxbishop » Sat Nov 02, 2013 3:00 am

I've attach my mod_menu files, but my mod_menu parent link doesn't have any function because i'am following the bootstrap navmenu structure. In the style.css you can remove the comment to make the menu hover able.

1. Copy the files to your template file
2. load the necessary files
3. Go to module, main menu, option, add navbar-nav to Menu Class Suffix
4. Example of my test navmenu

Code: Select all

    <div class="navbar-wrapper">
      <div class="container">

        <div class="navbar navbar-inverse navbar-static-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Project name</a>
            </div>
            <div class="navbar-collapse collapse">
                <jdoc:include type="modules" name="navbar" style="none" />
            </div>
          </div>
        </div>

      </div>
    </div>
You do not have the required permissions to view the files attached to this post.

User avatar
pishro
Joomla! Explorer
Joomla! Explorer
Posts: 285
Joined: Tue Oct 09, 2012 7:22 am

Re: Drop Down Menu using Bootstrap

Postby pishro » Sat Nov 02, 2013 4:31 am

lynxbishop wrote:I've attach my mod_menu files, but my mod_menu parent link doesn't have any function because i'am following the bootstrap navmenu structure. In the style.css you can remove the comment to make the menu hover able.

1. Copy the files to your template file
2. load the necessary files
3. Go to module, main menu, option, add navbar-nav to Menu Class Suffix
4. Example of my test navmenu
i suggest is quote joomla! master imanickam this topic: viewtopic.php?f=713&t=821594#p3095022

brontman
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Wed Nov 06, 2013 8:44 am

Re: Drop Down Menu using Bootstrap

Postby brontman » Wed Nov 06, 2013 11:25 am

Hi,
I'm using Joomla! 3.1 with protostar template, and have noticed that the 1st level sub-menu shows up as expected on hover, but nested sub-menus don't.

This is the CSS I've used to fix this behavior:

Code: Select all

ul.nav-child li { position: relative; }
ul.nav-child li.parent:hover > ul.nav-child {
   display: block;
   position: absolute;
   left: 100%;
   top:0;
}

(the alternating position relative/absolute is necessary for correct alignment)

Remark: to avoid making changes to the original template.css file, you can put the code in your own custom stylesheet, and add a reference to it in the template's index.php file, (SITE_ROOT_FOLDER/templates/TEMPLATE_NAME/index.php), e.g.:

Code: Select all

$doc->addStyleSheet('templates/'.$this->template.'/css/myStyle.css');

Another small detail is the sub-menus' "bubble" style, with a little triangle added at the top using pseudo-elements' border effects.
Since my menu is assigned to position-1 (top), a bubble emanating from the top only looks good for the first level sub-menu.
For subsequent levels, the drop down elements are aligned to the right of their respective parent elements, so the bubble should emanate from the left, or be changed altogether...

There are several ways to simply hide the triangle effect, for example...

Code: Select all

ul.nav-child li.parent:hover > ul.nav-child:before
ul.nav-child li.parent:hover > ul.nav-child:after { display: none; }

Code: Select all

ul.nav-child li.parent:hover > ul.nav-child:before
ul.nav-child li.parent:hover > ul.nav-child:after { border-color: rgba(0,0,0,0); }

...Or to make the bubble emanate from the left:

Code: Select all

ul.nav-child li.parent:hover > ul.nav-child:before {/*triangle's gray border*/
   border-top: 8px solid rgba(0, 0, 0, 0);
   border-right: 8px solid rgba(0, 0, 0, 0.2);
   border-bottom: 8px solid rgba(0, 0, 0, 0);
   border-left: 8px solid rgba(0, 0, 0, 0);
   content: "";
   display: inline-block;
   position: absolute;
   right: 100%;
   top: 6px;
}
ul.nav-child li.parent:hover > ul.nav-child:after {/*triangle's white background*/
   border-top: 6px solid rgba(0, 0, 0, 0);
   border-right: 6px solid #FFFFFF;
   border-bottom: 6px solid rgba(0, 0, 0, 0);
   border-left: 6px solid rgba(0, 0, 0, 0);
   content: "";
   display: inline-block;
   position: absolute;
   right: 100%;
   top: 7px;
}


Important note: I haven't tried this in all browsers yet, so it's recommended to test the behavior...
Hope that helps :)

Levan
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Wed Nov 06, 2013 11:55 pm

Re: Drop Down Menu using Bootstrap

Postby Levan » Fri Nov 08, 2013 11:10 pm

After reading a variety of sources - and trying to decide whether writing a custom module was a going to be faster
this is the script block I ended up with

Code: Select all

jQuery(document).ready(function(){
// dropdown
jQuery('.parent').addClass('dropdown');
jQuery('.parent > a').addClass('dropdown-toggle');
jQuery('.parent > a').attr('data-toggle', 'dropdown');
//save the href to add it back to submenu items
var j = jQuery('.parent > a').attr('href')
jQuery('.parent > a').attr('href','#');
jQuery('.parent > a').append('<span class="caret"></span>');
jQuery('.parent > ul').addClass('dropdown-menu');
jQuery('.nav-child .parent').removeClass('dropdown');
//dropdown submenus
jQuery('.nav-child .parent').addClass('dropdown-submenu');
jQuery('.dropdown-submenu > a').attr('href',j);
jQuery('.dropdown-submenu > a').removeAttr('class');
jQuery('.dropdown-submenu > a').removeAttr('data-toggle', 'dropdown');
jQuery('.dropdown-submenu > a > span').remove();
});

this enables full dropdown submenus and ensures those subs have the link intact (you cant use a link on the highest level as it needs to be clicked to open the dropdown...

Lev

Levan
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Wed Nov 06, 2013 11:55 pm

Re: Drop Down Menu using Bootstrap

Postby Levan » Thu Nov 21, 2013 1:36 am

Update to the code below from above

Code: Select all

jQuery(document).ready(function(){
// dropdown
jQuery('.parent').addClass('dropdown');
jQuery('.parent > a').addClass('dropdown-toggle');
jQuery('.parent > a').attr('data-toggle', 'dropdown');
jQuery('.nav > .parent > a').attr('href','#');
jQuery('.parent > a').append('<span class="caret"></span>');
jQuery('.parent > ul').addClass('dropdown-menu');
jQuery('.nav-child .parent').removeClass('dropdown');
//dropdown submenus
jQuery('.nav-child .parent').addClass('dropdown-submenu');
jQuery('.dropdown-submenu > a').removeAttr('class');
jQuery('.dropdown-submenu > a').removeAttr('data-toggle', 'dropdown');
jQuery('.dropdown-submenu > a > span').remove();
});

this enables full dropdown submenus and ensures those subs have the link intact (you cant use a link on the highest level as it needs to be clicked to open the dropdown...

Lev[/quote]

kogos
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Tue Oct 22, 2013 7:21 am

Re: Drop Down Menu using Bootstrap

Postby kogos » Sun Jan 26, 2014 6:52 am

on the code about, you CAN use a link on the highest level when dropdown is set to open on hover... just replace

Code: Select all

jQuery('.nav > .parent > a').attr('href','#');

with:

Code: Select all

jQuery('.nav > .parent > a').attr('data-toggle','#');

constant1n
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Mon Jan 27, 2014 11:31 pm

Re: Drop Down Menu using Bootstrap

Postby constant1n » Tue Jan 28, 2014 10:32 am

Hello every one,
I have a issue, java script stop working when i use the search module, any ideea what's happening?
You do not have the required permissions to view the files attached to this post.

yohebon
Joomla! Apprentice
Joomla! Apprentice
Posts: 36
Joined: Tue Sep 03, 2013 5:15 am

Re: Drop Down Menu using Bootstrap

Postby yohebon » Sun Feb 23, 2014 7:12 am

constant1n wrote:I have a issue, java script stop working when i use the search module, any ideea what's happening?

please see this post about Javascript not working after upgrading to 3.2: viewtopic.php?f=706&t=829080


Return to “Templates for Joomla! 3.x”

Who is online

Users browsing this forum: rahuljoomdev and 4 guests