The Joomla! Forum ™



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.



Post new topic Reply to topic  [ 31 posts ]  Go to page 1, 2  Next
Author Message
PostPosted: Tue Nov 13, 2012 6:03 am 
User avatar
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue Sep 11, 2012 3:22 am
Posts: 16
Location: Kathmandu, Nepal
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


Top
 Profile  
 
PostPosted: Thu Nov 29, 2012 9:24 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sun Jun 15, 2008 1:09 pm
Posts: 17
Quote:
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


Top
 Profile  
 
PostPosted: Wed Jan 02, 2013 4:30 pm 
User avatar
Joomla! Apprentice
Joomla! Apprentice

Joined: Wed Jan 25, 2012 8:59 am
Posts: 44
@Lar

No that is for 2.5 not 3.0....

And no it doesnt work.

_________________
Joomla Templates & Support
www.razortemplates.com


Top
 Profile  
 
PostPosted: Thu Jan 10, 2013 6:22 pm 
User avatar
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Mon Sep 19, 2005 3:56 am
Posts: 142
Location: USA
Anyone find a solution for this yet?

_________________
http://www.thegolfspace.com
http://www.tkserver.com


Top
 Profile  
 
PostPosted: Mon Jan 14, 2013 9:38 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Mon Jan 14, 2013 8:58 pm
Posts: 9
Location: Scunthorpe
mediaguru wrote:
Anyone find a solution for this yet?


+1 for a solution to this!

_________________
Darcies - http://www.darcies.co.uk/web-design-scunthorpe
Design Lincolnshire - http://web.designlincolnshire.com


Top
 Profile  
 
PostPosted: Tue Jan 15, 2013 8:57 am 
User avatar
Joomla! Apprentice
Joomla! Apprentice

Joined: Wed Jan 25, 2012 8:59 am
Posts: 44
Must be top secret! :(

_________________
Joomla Templates & Support
www.razortemplates.com


Top
 Profile  
 
PostPosted: Wed Jan 23, 2013 11:50 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Wed Jan 23, 2013 11:46 am
Posts: 1
I found the solution to creating a dropdownmenu in Joomla 3.0 using Bootstrap...

Code:
<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:
<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">


Top
 Profile  
 
PostPosted: Tue Jan 29, 2013 10:43 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Tue Jan 29, 2013 10:25 pm
Posts: 1
Your solution works great, but only after I manaully added bootstrap-dropdown.js to index.php.

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


Top
 Profile  
 
PostPosted: Tue Feb 12, 2013 2:07 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Tue Feb 12, 2013 1:43 am
Posts: 3
Finally a solution, thanks Ichtus84!


Top
 Profile  
 
PostPosted: Mon Feb 18, 2013 9:36 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Aug 18, 2005 2:24 pm
Posts: 7
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.


Top
 Profile  
 
PostPosted: Fri Mar 01, 2013 6:22 am 
I've been banned!

Joined: Thu Feb 21, 2013 6:37 am
Posts: 12
Location: USA
i think solution its find now. thanks for a Ichtus84.


Top
 Profile  
 
PostPosted: Thu Mar 28, 2013 1:50 pm 
User avatar
Joomla! Apprentice
Joomla! Apprentice

Joined: Wed Jan 25, 2012 8:59 am
Posts: 44
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


Top
 Profile  
 
PostPosted: Tue Apr 02, 2013 12:43 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Tue Jan 22, 2013 8:28 pm
Posts: 1
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?


Top
 Profile  
 
PostPosted: Sat Apr 27, 2013 1:24 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Sat Apr 27, 2013 1:17 pm
Posts: 2
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:
JHtml::_('jquery.framework');
JHtml::_('bootstrap.framework');


Then change the code snippet of Ichtus84 to the following:

Code:
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.


Top
 Profile  
 
PostPosted: Thu May 30, 2013 8:17 am 
I've been banned!

Joined: Wed May 15, 2013 7:49 am
Posts: 14
hi Ichtus84
tank you i search a lot for find a solution
finaly i find your soultion and its work for me
thank again

_________________
http://[spam].ir
http://[spam].ir


Top
 Profile  
 
PostPosted: Sat Jun 29, 2013 10:43 am 
Joomla! Intern
Joomla! Intern

Joined: Thu Nov 26, 2009 12:24 pm
Posts: 50
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:
<!-- 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 ?


Top
 Profile  
 
PostPosted: Mon Jul 01, 2013 5:21 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Sat Apr 27, 2013 1:17 pm
Posts: 2
Hi benjoman,

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

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

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


as well as
Code:
<div class="nav-collapse collapse">

to
Code:
<div class="nav-collapse collapse nav-responsive-collapse">


Top
 Profile  
 
PostPosted: Mon Jul 22, 2013 10:43 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Mon Jul 22, 2013 10:17 am
Posts: 1
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


Top
 Profile  
 
PostPosted: Sun Aug 25, 2013 7:56 pm 
User avatar
Joomla! Intern
Joomla! Intern

Joined: Wed Oct 05, 2005 12:42 pm
Posts: 54
Location: Beograd, Serbia
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


Top
 Profile  
 
PostPosted: Sun Aug 25, 2013 8:31 pm 
User avatar
Joomla! Intern
Joomla! Intern

Joined: Wed Oct 05, 2005 12:42 pm
Posts: 54
Location: Beograd, Serbia
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:
<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:
ul.nav-child ul.nav-child {
   left: 150px;
   top:0;
}

_________________
http://www.hotjoomlatemplates.com - Joomla templates
http://www.designdestiny.net - Design and Joomla development


Top
 Profile  
 
PostPosted: Tue Oct 01, 2013 1:56 pm 
Joomla! Intern
Joomla! Intern

Joined: Wed Feb 08, 2012 8:37 pm
Posts: 62
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.


Top
 Profile  
 
PostPosted: Tue Oct 01, 2013 4:06 pm 
Joomla! Intern
Joomla! Intern

Joined: Wed Feb 08, 2012 8:37 pm
Posts: 62
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.


Top
 Profile  
 
PostPosted: Sat Nov 02, 2013 3:00 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Sat Nov 02, 2013 2:50 am
Posts: 1
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:
    <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.


Top
 Profile  
 
PostPosted: Sat Nov 02, 2013 4:31 am 
User avatar
Joomla! Explorer
Joomla! Explorer

Joined: Tue Oct 09, 2012 7:22 am
Posts: 285
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

_________________
http://www.cantral.ir
http://www.enimal.ir


Top
 Profile  
 
PostPosted: Wed Nov 06, 2013 11:25 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Wed Nov 06, 2013 8:44 am
Posts: 1
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:
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:
$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:
ul.nav-child li.parent:hover > ul.nav-child:before
ul.nav-child li.parent:hover > ul.nav-child:after { display: none; }

Code:
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:
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 :)


Top
 Profile  
 
PostPosted: Fri Nov 08, 2013 11:10 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Wed Nov 06, 2013 11:55 pm
Posts: 4
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:
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


Top
 Profile  
 
PostPosted: Thu Nov 21, 2013 1:36 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Wed Nov 06, 2013 11:55 pm
Posts: 4
Update to the code below from above
Code:
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]


Top
 Profile  
 
PostPosted: Sun Jan 26, 2014 6:52 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Tue Oct 22, 2013 7:21 am
Posts: 4
on the code about, you CAN use a link on the highest level when dropdown is set to open on hover... just replace
Code:
jQuery('.nav > .parent > a').attr('href','#');

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


Top
 Profile  
 
PostPosted: Tue Jan 28, 2014 10:32 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Mon Jan 27, 2014 11:31 pm
Posts: 1
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.


Top
 Profile  
 
PostPosted: Sun Feb 23, 2014 7:12 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue Sep 03, 2013 5:15 am
Posts: 36
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

_________________
http://epaybank.ir
http://mycityads.ir


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 31 posts ]  Go to page 1, 2  Next



Who is online

Users browsing this forum: Google Adsense [Bot] and 25 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group