Drop Down Menu using Bootstrap

[Kedar_Sapkota]

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.

[larseee]

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

[intheair]

@Lar

No that is for 2.5 not 3.0....

And no it doesnt work.

[mediaguru]

Anyone find a solution for this yet?

[Cas87]

Anyone find a solution for this yet?

+1 for a solution to this!

[intheair]

Must be top secret!

[Ichtus84]

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]

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]

Finally a solution, thanks Ichtus84!

[sniper_david]

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 think solution its find now. thanks for a Ichtus84.

[intheair]

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

[ryf]

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]

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]

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]

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]

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]

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

[mamboline]

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?

[mamboline]

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;
}

[krishunt]

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]

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]

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>

[pishro]

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: http://forum.joomla.org/viewtopic.php?f ... 4#p3095022

[brontman]

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]

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]

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]

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]

Hello every one,
I have a issue, java script stop working when i use the search module, any ideea what's happening?

[yohebon]

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: http://forum.joomla.org/viewtopic.php?f=706&t=829080