Bootstrap drop down menus

General questions relating to Joomla! 3.x.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10
Locked
boogily
Joomla! Guru
Joomla! Guru
Posts: 733
Joined: Mon Mar 09, 2009 2:06 am

Bootstrap drop down menus

Post by boogily » Wed Nov 14, 2012 12:48 am

I love bootstrap. I've got a few elements of bootstrap to work on a 3.0 site. Nice!

Now, I'm just trying to implement a 'bootstrap' drop down. I was hoping there was a class suffix I could implement, but it's not looking like it at the moment.

Anyone wanna shed some light on how to call a dropdown menu bootstrap style in J3.0?

Thx
http://www.happydogwebproductions.com
"Minneapolis and St Paul web design and development"

boogily
Joomla! Guru
Joomla! Guru
Posts: 733
Joined: Mon Mar 09, 2009 2:06 am

Re: Bootstrap drop down menus

Post by boogily » Tue Nov 20, 2012 6:06 pm

Tried adding

Code: Select all

<script type="text/javascript">
  (function($){   
    $('.dropdown-toggle').dropdown();
    $(document).ready(function(){
      // dropdown
      $('.item-103').addClass('dropdown');
      $('.item-103 > a').addClass('dropdown-toggle');
      $('.item-103 > a').attr('data-toggle', 'dropdown');
      $('.item-103 > a').append('<b class="caret"></b>');
      $('.item-103 > ul').addClass('dropdown-menu');
      $('.item-161').addClass('dropdown');
      $('.item-161 > a').addClass('dropdown-toggle');
      $('.item-161 > a').attr('data-toggle', 'dropdown');
      $('.item-161 > a').append('<b class="caret"></b>');
      $('.item-161 > ul').addClass('dropdown-menu');
    });
  })(jQuery);
</script>
at the bottom. Nothing working yet. I'll update once I get this figured out.
http://www.happydogwebproductions.com
"Minneapolis and St Paul web design and development"

SimonHayter
Joomla! Guru
Joomla! Guru
Posts: 530
Joined: Tue Nov 29, 2011 2:43 pm
Location: Bournemouth
Contact:

Re: Bootstrap drop down menus

Post by SimonHayter » Wed Nov 21, 2012 2:44 pm

Not gonna fully look at your code but it looks wrong,

Normally you would put the $(document).ready(function(){ on the first line or 2nd if your using the noconflict method which in this case you are, try using the below, it might not be right and suggest you investigate using firebug in console and the dom events.

Code: Select all

  (function($){    
    $(document).ready(function(){
	  $('.dropdown-toggle').dropdown();
      // dropdown
      $('.item-103').addClass('dropdown');
      $('.item-103 > a').addClass('dropdown-toggle');
      $('.item-103 > a').attr('data-toggle', 'dropdown');
      $('.item-103 > a').append('<b class="caret"></b>');
      $('.item-103 > ul').addClass('dropdown-menu');
      $('.item-161').addClass('dropdown');
      $('.item-161 > a').addClass('dropdown-toggle');
      $('.item-161 > a').attr('data-toggle', 'dropdown');
      $('.item-161 > a').append('<b class="caret"></b>');
      $('.item-161 > ul').addClass('dropdown-menu');
    });
  })(jQuery);


boogily
Joomla! Guru
Joomla! Guru
Posts: 733
Joined: Mon Mar 09, 2009 2:06 am

Re: Bootstrap drop down menus

Post by boogily » Wed Nov 21, 2012 5:01 pm

Thank you. That got it to show.

Now I just have to make the responsive navbar work correctly... It's always a journey!

Thanks polomintus!
http://www.happydogwebproductions.com
"Minneapolis and St Paul web design and development"

SimonHayter
Joomla! Guru
Joomla! Guru
Posts: 530
Joined: Tue Nov 29, 2011 2:43 pm
Location: Bournemouth
Contact:

Re: Bootstrap drop down menus

Post by SimonHayter » Wed Nov 21, 2012 5:18 pm

No problem, let me know if you need help with the responsive, its actually one of my strong points working with the media queries.

SBee+
Joomla! Apprentice
Joomla! Apprentice
Posts: 22
Joined: Wed Jul 18, 2012 8:53 pm

Re: Bootstrap drop down menus

Post by SBee+ » Thu Nov 29, 2012 8:02 pm

HI -

I was wondering if you had been able to get this to work properly. Is the regular bootstrap dropdown supported in the Joomla 3 framework? I am confused about whether this is supported in the new Joomla version. I am unsuccessful getting my custom bootstraped template to show any drop down menus...

Thanks for any insight...
SBee

boogily
Joomla! Guru
Joomla! Guru
Posts: 733
Joined: Mon Mar 09, 2009 2:06 am

Re: Bootstrap drop down menus

Post by boogily » Thu Nov 29, 2012 8:04 pm

For now you have to model your template after Beez. Then just follow the Bootstrap docs to make sure you have things implemented right.
http://www.happydogwebproductions.com
"Minneapolis and St Paul web design and development"

SBee+
Joomla! Apprentice
Joomla! Apprentice
Posts: 22
Joined: Wed Jul 18, 2012 8:53 pm

Re: Bootstrap drop down menus

Post by SBee+ » Thu Nov 29, 2012 8:49 pm

Thank you for the quick reply!!
I created this design template from scratch and using the regular bootstrap framework, then i installed it into Joomla. I am out of luck?
This seems strange that drop downs would be so difficult to activate in this new release. Maybe I am not understanding.

boogily
Joomla! Guru
Joomla! Guru
Posts: 733
Joined: Mon Mar 09, 2009 2:06 am

Re: Bootstrap drop down menus

Post by boogily » Thu Nov 29, 2012 8:57 pm

The bootstrap is in the core in 3.0. To activate bootstrap dropdowns in any format, J3 or normal HTML, I believe you need to add the proper jquery. I did that with my template and it worked fine.
http://www.happydogwebproductions.com
"Minneapolis and St Paul web design and development"

SBee+
Joomla! Apprentice
Joomla! Apprentice
Posts: 22
Joined: Wed Jul 18, 2012 8:53 pm

Re: Bootstrap drop down menus

Post by SBee+ » Thu Nov 29, 2012 9:21 pm

Thanks for trying to help me. I have drop downs working nicely in the html/php template i created by just calling the ul class "dropdown-menu" and li class "dropdown"- but when i remove the navigation code and replace it with the Joomla Main Menu module code - the main menu looks good - just no drop downs.
I think I have configured things correctly as far as I can tell - show submenu - yes, etc.. I have given the Main Menu in the Module Manager a Menu Class Suffix of "dropdown". I am just not sure what i am missing.
Thanks again

boogily
Joomla! Guru
Joomla! Guru
Posts: 733
Joined: Mon Mar 09, 2009 2:06 am

Re: Bootstrap drop down menus

Post by boogily » Tue Dec 04, 2012 10:31 pm

You need to use jQuery to append the CSS classes to the joomla created module code.

Code: Select all

<script type="text/javascript">
   (function($){    
    $(document).ready(function(){
     $('.dropdown-toggle').dropdown();
      // dropdown
      $('.item-103').addClass('dropdown');
      $('.item-103 > a').addClass('dropdown-toggle');
      $('.item-103 > a').attr('data-toggle', 'dropdown');
      $('.item-103 > a').append('<b class="caret"></b>');
      $('.item-103 > ul').addClass('dropdown-menu');
      $('.item-161').addClass('dropdown');
      $('.item-161 > a').addClass('dropdown-toggle');
      $('.item-161 > a').attr('data-toggle', 'dropdown');
      $('.item-161 > a').append('<b class="caret"></b>');
      $('.item-161 > ul').addClass('dropdown-menu');
    });
  })(jQuery);
</script>
Replace the itemIDs with the proper itemId's you need.

Still haven't heard anything the the Protostar Template bug. I issued it in the bug tracker, but no response.
http://www.happydogwebproductions.com
"Minneapolis and St Paul web design and development"

boogily
Joomla! Guru
Joomla! Guru
Posts: 733
Joined: Mon Mar 09, 2009 2:06 am

Re: Bootstrap drop down menus

Post by boogily » Tue Dec 04, 2012 10:37 pm

If anyone wants to help or chime in...
http://joomlacode.org/gf/project/joomla ... m_id=29760
http://www.happydogwebproductions.com
"Minneapolis and St Paul web design and development"

sipman
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Thu Feb 14, 2013 9:15 am

Re: Bootstrap drop down menus

Post by sipman » Thu Feb 14, 2013 9:23 am

[UPDATE]
The code now support dropdown within a dropdown. ENJOY
[/UPDATE]

I know this is kinda an old post, but i saw the javascript presented in this post and thought i would provide a more elegant way to get the exact same result.

So instead of repeat the same lines of code for every item with a dropdown, you just simply use this:

Code: Select all

 <script type="text/javascript">
   (function($){   
    $(document).ready(function(){
     $('.dropdown-toggle').dropdown();
      // dropdown
      $('.parent').addClass('dropdown');
      $('.parent > a').addClass('dropdown-toggle');
      $('.parent > a').attr('data-toggle', 'dropdown');
	  $('.parent > a').attr('data-target', '#');
      $('.parent > a').append('<b class="caret"></b>');
      $('.parent > ul').addClass('dropdown-menu');
	  $('.nav-child .parent').removeClass('dropdown');
	  $('.nav-child .parent .caret').css('display', 'none');
	   $('.nav-child .parent').addClass('dropdown-submenu');
    });
  })(jQuery);
</script>
What it does is it takes all the items with the class of "parent" ( provided by joomla, if menu item has a child ) and make it a bootstrap dropdown, pretty easy !

Hope someone find this usefull ! :D

boogily
Joomla! Guru
Joomla! Guru
Posts: 733
Joined: Mon Mar 09, 2009 2:06 am

Re: Bootstrap drop down menus

Post by boogily » Thu Feb 14, 2013 2:20 pm

Or you can not worry about it at all and get an awesome module from Joostrap. It does all the hardwork, and give you some decent flexibility within the module
http://joostrap.com/index.php?option=co ... Itemid=764

It is commercial, but worth it in my opinion.
http://www.happydogwebproductions.com
"Minneapolis and St Paul web design and development"

krishunt
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 114
Joined: Wed Feb 08, 2012 8:37 pm

Re: Bootstrap drop down menus

Post by krishunt » Tue Mar 26, 2013 8:29 pm

Sipman, using your JavaScript, hovering over a second-level menu item causes third- and fourth-level submenus to open (presumably fifth-level and beyond as well, but I don't have any of those) when only third-level submenus should open. I don't know JavaScript; can you modify your code so only the next level submenu will open on hover?

shadowf
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Tue Jul 23, 2013 9:34 pm

Re: Bootstrap drop down menus

Post by shadowf » Wed Jul 24, 2013 1:35 pm

krishunt wrote:Sipman, using your JavaScript, hovering over a second-level menu item causes third- and fourth-level submenus to open (presumably fifth-level and beyond as well, but I don't have any of those) when only third-level submenus should open. I don't know JavaScript; can you modify your code so only the next level submenu will open on hover?

Sipman's code works just fine for a one level dropdown menu - and thank you sipman for that! But if one of those dropdown menu items is a submenu, you get strange behaviour (mine was the whole menu closed the moment hovering over it). Anyhow, I've added three lines to the code which takes care of this problem. Hope it helps somebody :-)

MODIFIED:

Code: Select all

(function($){   
  $(document).ready(function(){
  $('.dropdown-toggle').dropdown();
      // dropdown
     $('.navbar .parent').addClass('dropdown');
     $('.navbar .parent > a').addClass('dropdown-toggle');
     $('.navbar .parent > a').attr('data-toggle', 'dropdown');
     $('.navbar .parent > a').attr('data-target', '#');
     $('.navbar .parent > a').append('<b class="caret"></b>');
     $('.navbar .parent > ul').addClass('dropdown-menu');
     $('.navbar .nav-child .parent').removeClass('dropdown');
     $('.navbar .nav-child .parent .caret').css('display', 'none');
     $('.navbar .nav-child .parent').addClass('dropdown-submenu');

     

// For submenus, the following code needs to be added
	 $('.navbar .nav-child .parent > a').removeClass('dropdown-toggle');
     $('.navbar .nav-child .parent > a').attr('data-toggle', '');
     $('.navbar .nav-child .parent > a').attr('data-target', '');



  });
})(jQuery);
Also, please note I've added the '.navbar' selector to the beginning of all the selections. This is not required, I've just added it in case there would be any other elements on the page with the class 'parent'. If this sounds confusing to you, just don't worry about it :-)

caio_kizel
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Thu Sep 05, 2013 8:30 pm

Re: Bootstrap drop down menus

Post by caio_kizel » Thu Sep 05, 2013 8:41 pm

Hi there,

You can easily change 2 lines in 2 archives.

First arquive: /modules/mod_menu/tmpl/default.php
Change this:

Code: Select all

// The next item is deeper.
	if ($item->deeper)
	{
		echo '<ul class="nav-child unstyled small">';
	}
To This:

Code: Select all

// The next item is deeper.
	if ($item->deeper)
	{
		echo '<ul class="dropdown-menu">';
	}
Second arquive: /modules/mod_menu/tmpl/default_url.php

Insert the code beetween this two lines (around line 13/14):

Before:

Code: Select all

$class = $item->anchor_css ? 'class="'.$item->anchor_css.'" ' : '';
$title = $item->anchor_title ? 'title="'.$item->anchor_title.'" ' : '';
After:

Code: Select all

$class = $item->anchor_css ? 'class="'.$item->anchor_css.'" ' : '';

if ($item->deeper) {
		$class .= ' data-toggle="dropdown"';
	}
	
$title = $item->anchor_title ? 'title="'.$item->anchor_title.'" ' : '';
It works fine.

Hope someone find this usefull !

krishunt
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 114
Joined: Wed Feb 08, 2012 8:37 pm

Re: Bootstrap drop down menus

Post by krishunt » Thu Mar 27, 2014 4:11 pm

So I followed all the instructions to get navbar dropdowns working in Joomla, but I'm still having glitchy issues. When I click on a menu item and the dropdown opens, it closes again if I hover over any other menu item, and the sibling menu items open on hover until I click again.

Also, once I click on a second menu item and the dropdown closes, that second menu item remains stuck in an "active" state with darkened text and a blue outline around it until I click outside the menu area.

These things don't happen with a basic installation of Bootstrap; Joomla is somehow breaking it. Has anyone gotten dropdown menus to work correctly in Joomla?

Sample Joomla page showing the problem:
http://thomasrepro.com/joomla-dropdown-issue/bad/

Sample non-Joomla page showing how Bootstrap dropdowns are supposed to work:
http://thomasrepro.com/joomla-dropdown-issue/good/
Last edited by krishunt on Thu Mar 27, 2014 5:41 pm, edited 2 times in total.

leio
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Wed Mar 26, 2014 11:43 am

Re: Bootstrap drop down menus

Post by leio » Thu Mar 27, 2014 4:53 pm

Hi. Greetings.
I have problems with the menu items. Do not move down.
When I inspect element indicate the following errors:

The value "160dpi" for key "target-densitydpi" was truncated to its numeric prefix. (index):107
The key "target-densitydpi" is not supported. (index):107
Uncaught TypeError: Object [object Object] has no method 'megamenu' (index):376
Uncaught ReferenceError: prettyPrint is not defined

It does not work in any of the browsers.
If you can help me I would appreciate greatly.
Using joomla 3.2. Template: sj-plus.

boogily
Joomla! Guru
Joomla! Guru
Posts: 733
Joined: Mon Mar 09, 2009 2:06 am

Re: Bootstrap drop down menus

Post by boogily » Thu Mar 27, 2014 9:39 pm

What is showing is the native style in how it works in Joomla. The dropdowns stay open all of the time, unless you hover over for another dropdown. Tweaking that would take some customization :(
http://www.happydogwebproductions.com
"Minneapolis and St Paul web design and development"


Locked

Return to “General Questions/New to Joomla! 3.x”