T3 Community Discussion & Support

Let's build the best free Joomla template framework, together!
Subscribe via RSS  Subscribe via email
Recent
Categories
Tags
Users
Badges
View Replies (5)

Resolved Navbar dropdown toggle close on click (like in bootstrap default)

0
Votes
Undo
  1. Tom Kuther
    Tom Kuther
  2. General Discussion
  3. Thursday, 15 May 2014
  4.  Subscribe via email
Hi,

I use Joomla 3.3 and a T3 BS3 based template. I'm trying to create a mainnav navbar with dropdowns that akts like bootstrap's default.
Means: I click on a dropdown-toggle and dropdown opens. I click again and dropdown closes. Exactly like http://getbootstrap.com/components/#navbar-default

I'm pretty close, but the "click to close" does not work yet.

What I did is:
- disable megamenu
- set dropdown toggle to: click
- create a main menu entry, type: External URL, href: #
- add sub entries to it

This creates following code:
<div class="t3-navbar navbar-collapse collapse">

   <ul class="nav navbar-nav">

      <li class="item-101 current active">

         <a href="/joomla/" >Startseite</a>

      </li>

      <li class="item-171 deeper dropdown parent open">

         <a class="dropdown-toggle" href="#"  data-toggle="dropdown">Über uns<b class="caret"></b></a>

            <ul class="dropdown-menu" role="menu">

               <li class="item-102">

                  <a href="/someuri" >Title</a>

               </li>

  ...


What am I missing to make the dropdown-toggle actually close the dropdown?


PS: now here's a copy of the live site on my dev box: http://dev.kuther.net/joomla/ -> the "Über uns" dropdown is the one I'm playing with
  1. navigation
Comment
There are no comments made yet.
Accepted Answer
Eugen
Eugen
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Tom,

i agree, this doesn't work correctly. (in my local menu it works :) )

So here is a better solution...

We can use the dropdown() - function from bootstrap. No need to delete the 'open' class manually....

<script type="text/javascript">
(function($){
$(document).ready(function() {
$('.dropdown-toggle[href="#"]').dropdown();
});
})(jQuery);
</script>

The dropdown() function should be used if your target is '#'.

We need only $('.dropdown-toggle[href="#"]').dropdown();

should be work like a charm ;)

Good luck again,
Eugen
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # Permalink
Responses (5)
Eugen
Eugen
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Tom,

i have a quick and dirty solution for you. Maybe there is a better way, but... You need only to remove the 'open' css class for <li>

So.... Just add this code to your default (start block or something like that see 'tpls' in your template) block...

<script type="text/javascript">
(function($){
$(document).ready(function(){
$(".dropdown.mega.open > a";).each(function () {
$(this).click(function () {
if ($(this).attr("href";) == "#";) {
$(this).parent().toggleClass("open";);
}
});
});
});
})(jQuery);
</script>

your configurations are fine...

"
- disable megamenu
- set dropdown toggle to: click
- create a main menu entry, type: External URL, href: #
- add sub entries to it"

Good luck
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 1
Tom Kuther
Tom Kuther
Accepted Answer Pending Moderation
0
Votes
Undo
Hmm, indeed it's a hack - but it works! :-)

I just had to bind it to .dropdown.parent, I guess because .open isn't there yet on (document).ready

Thanks, Eugen!

Anyways, I would still be interested in why it fails the-bootstrap-way.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 2
Tom Kuther
Tom Kuther
Accepted Answer Pending Moderation
0
Votes
Undo
Guess I spoke too soon. It redirects to frontpage when toggleing the dropdown from other pages. E.g. click on "Aktuelles" on the dev site, then open and close the "Über uns" dropdown.

Also, I see the browser loading content each time the dropdown is toggled, not fully reloading though.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 3
Tom Kuther
Tom Kuther
Accepted Answer Pending Moderation
0
Votes
Undo
The .dropdown() call did it. Now it does work as expected.

Thanks a lot for your help, Eugen!
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 4
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.