Advertisement
Drop Down Menu using Bootstrap
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.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
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.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
- Kedar_Sapkota
- Joomla! Apprentice
- Posts: 16
- Joined: Tue Sep 11, 2012 3:22 am
- Location: Kathmandu, Nepal
- Contact:
Drop Down Menu using Bootstrap
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
http://www.kedarsapkota.com.np
Advertisement
-
- Joomla! Apprentice
- Posts: 17
- Joined: Sun Jun 15, 2008 1:09 pm
Re: Drop Down Menu using Bootstrap
Quoted form this article: http://magazine.joomla.org/issues/issue ... om-ScratchI 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)
- intheair
- Joomla! Apprentice
- Posts: 44
- Joined: Wed Jan 25, 2012 8:59 am
- Contact:
Re: Drop Down Menu using Bootstrap
@Lar
No that is for 2.5 not 3.0....
And no it doesnt work.
No that is for 2.5 not 3.0....
And no it doesnt work.
Joomla Templates & Support
www.razortemplates.com
www.razortemplates.com
- mediaguru
- Joomla! Enthusiast
- Posts: 142
- Joined: Mon Sep 19, 2005 3:56 am
- Location: USA
- Contact:
Re: Drop Down Menu using Bootstrap
Anyone find a solution for this yet?
-
- Joomla! Apprentice
- Posts: 8
- Joined: Mon Jan 14, 2013 8:58 pm
- Location: Scunthorpe
- Contact:
Re: Drop Down Menu using Bootstrap
+1 for a solution to this!mediaguru wrote:Anyone find a solution for this yet?
Darcies - http://www.darcies.co.uk/web-design-scunthorpe
Design Lincolnshire - http://web.designlincolnshire.com
Design Lincolnshire - http://web.designlincolnshire.com
- intheair
- Joomla! Apprentice
- Posts: 44
- Joined: Wed Jan 25, 2012 8:59 am
- Contact:
Re: Drop Down Menu using Bootstrap
Must be top secret!
Joomla Templates & Support
www.razortemplates.com
www.razortemplates.com
-
- Joomla! Fledgling
- Posts: 1
- Joined: Wed Jan 23, 2013 11:46 am
Re: Drop Down Menu using Bootstrap
I found the solution to creating a dropdownmenu in Joomla 3.0 using Bootstrap...
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
<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>
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">
-
- Joomla! Fledgling
- Posts: 1
- Joined: Tue Jan 29, 2013 10:25 pm
Re: Drop Down Menu using Bootstrap
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>
-
- Joomla! Fledgling
- Posts: 3
- Joined: Tue Feb 12, 2013 1:43 am
Re: Drop Down Menu using Bootstrap
Finally a solution, thanks Ichtus84!
-
- Joomla! Apprentice
- Posts: 7
- Joined: Thu Aug 18, 2005 2:24 pm
Re: Drop Down Menu using Bootstrap
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.
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.
-
- I've been banned!
- Posts: 12
- Joined: Thu Feb 21, 2013 6:37 am
- Location: USA
- Contact:
Re: Drop Down Menu using Bootstrap
i think solution its find now. thanks for a Ichtus84.
- intheair
- Joomla! Apprentice
- Posts: 44
- Joined: Wed Jan 25, 2012 8:59 am
- Contact:
Re: Drop Down Menu using Bootstrap
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
www.razortemplates.com
-
- Joomla! Fledgling
- Posts: 1
- Joined: Tue Jan 22, 2013 8:28 pm
Re: Drop Down Menu using Bootstrap
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?
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?
-
- Joomla! Fledgling
- Posts: 2
- Joined: Sat Apr 27, 2013 1:17 pm
Re: Drop Down Menu using Bootstrap
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'):
Then change the code snippet of Ichtus84 to the following:
With this, my dropdown menus work both in the back-end and the front-end.
Code: Select all
JHtml::_('jquery.framework');
JHtml::_('bootstrap.framework');
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');
});
-
- I've been banned!
- Posts: 14
- Joined: Wed May 15, 2013 7:49 am
Re: Drop Down Menu using Bootstrap
hi Ichtus84
tank you i search a lot for find a solution
finaly i find your soultion and its work for me
thank again
tank you i search a lot for find a solution
finaly i find your soultion and its work for me
thank again
-
- Joomla! Intern
- Posts: 70
- Joined: Thu Nov 26, 2009 12:24 pm
Re: Drop Down Menu using Bootstrap
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
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 ?
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; ?>
the dropdown is working but not in when collapsing to tablet and smartphones mode...
any one know whats the problem ?
-
- Joomla! Fledgling
- Posts: 2
- Joined: Sat Apr 27, 2013 1:17 pm
Re: Drop Down Menu using Bootstrap
Hi benjoman,
I have not tried this, but looking at the bootstrap documentation site, you could try the following:
change
to
as well as
to
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">
Code: Select all
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-responsive-collapse">
Code: Select all
<div class="nav-collapse collapse">
Code: Select all
<div class="nav-collapse collapse nav-responsive-collapse">
-
- Joomla! Fledgling
- Posts: 1
- Joined: Mon Jul 22, 2013 10:17 am
Re: Drop Down Menu using Bootstrap
Yep, i'm experiencing strange behavior...intheair wrote:I am finding that using Ichtus84's solution that some dropdowns work and others don't, can any one else confirm this?
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
- Joomla! Enthusiast
- Posts: 105
- Joined: Wed Oct 05, 2005 12:42 pm
- Location: Beograd, Serbia
- Contact:
Re: Drop Down Menu using Bootstrap
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?
https://www.hotjoomlatemplates.com - Joomla templates
- mamboline
- Joomla! Enthusiast
- Posts: 105
- Joined: Wed Oct 05, 2005 12:42 pm
- Location: Beograd, Serbia
- Contact:
Re: Drop Down Menu using Bootstrap
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.
Finally, you just need to move the third level to the left/right in CSS:
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>
Code: Select all
ul.nav-child ul.nav-child {
left: 150px;
top:0;
}
https://www.hotjoomlatemplates.com - Joomla templates
-
- Joomla! Enthusiast
- Posts: 139
- Joined: Wed Feb 08, 2012 8:37 pm
Re: Drop Down Menu using Bootstrap
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.
I tried $('.parent > a').click(function(e){e.preventDefault();}); and it didn't have any effect.
-
- Joomla! Enthusiast
- Posts: 139
- Joined: Wed Feb 08, 2012 8:37 pm
Re: Drop Down Menu using Bootstrap
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.
-
- Joomla! Fledgling
- Posts: 1
- Joined: Sat Nov 02, 2013 2:50 am
Re: Drop Down Menu using Bootstrap
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
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.
- pishro
- Joomla! Explorer
- Posts: 301
- Joined: Tue Oct 09, 2012 7:22 am
Re: Drop Down Menu using Bootstrap
i suggest is quote joomla! master imanickam this topic: http://forum.joomla.org/viewtopic.php?f ... 4#p3095022lynxbishop 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
-
- Joomla! Fledgling
- Posts: 1
- Joined: Wed Nov 06, 2013 8:44 am
Re: Drop Down Menu using Bootstrap
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:
(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.:
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...
...Or to make the bubble emanate from the left:
Important note: I haven't tried this in all browsers yet, so it's recommended to test the behavior...
Hope that helps
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;
}
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');
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); }
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;
}
Hope that helps
-
- Joomla! Fledgling
- Posts: 4
- Joined: Wed Nov 06, 2013 11:55 pm
Re: Drop Down Menu using Bootstrap
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
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
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();
});
Lev
-
- Joomla! Fledgling
- Posts: 4
- Joined: Wed Nov 06, 2013 11:55 pm
Re: Drop Down Menu using Bootstrap
Update to the code below from above
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]
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();
});
Lev[/quote]
-
- Joomla! Fledgling
- Posts: 4
- Joined: Tue Oct 22, 2013 7:21 am
Re: Drop Down Menu using Bootstrap
on the code about, you CAN use a link on the highest level when dropdown is set to open on hover... just replace
with:
Code: Select all
jQuery('.nav > .parent > a').attr('href','#');
Code: Select all
jQuery('.nav > .parent > a').attr('data-toggle','#');
-
- Joomla! Fledgling
- Posts: 1
- Joined: Mon Jan 27, 2014 11:31 pm
Re: Drop Down Menu using Bootstrap
Hello every one,
I have a issue, java script stop working when i use the search module, any ideea what's happening?
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.
-
- Joomla! Apprentice
- Posts: 39
- Joined: Tue Sep 03, 2013 5:15 am
Re: Drop Down Menu using Bootstrap
please see this post about Javascript not working after upgrading to 3.2: http://forum.joomla.org/viewtopic.php?f=706&t=829080constant1n wrote:I have a issue, java script stop working when i use the search module, any ideea what's happening?
Advertisement