1

I'm working to get the Bootstrap menu working with dropdowns as it should in Joomla 3.1. I'm nearly there, but not quite: for the js script I use (How to make twitter bootstrap menu dropdown on hover rather than click)

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

The css I us is (http://forum.joomla.org/viewtopic.php?f=706&t=770153)

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    margin-top: 0;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

This works excellent, with one thing to be corrected: the link in the menubar only works to show the menu under it. What I need is to get the toplink working as well. How can I do that?

4

1 回答 1

6

Unfortunately because you need to "CLICK" on the top menu item to display the drop-down below it you cannot have a Link on this item it must me set to href="#" otherwise everytime it was clicked it would reload the page and thus not display the drop-down. If your setup actually works that the menu will display when "hovered" and doesnt require a click then just remove

$('.parent > a').attr('data-target', '#');

from your javascript and that will leave the link intact on the menu item (assuming you have correctly set the menu items type correctly.

Hope this helps

Out of completeness I use the following on Joomla 3.2

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');
        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();
    });

I havent need to customise my css much with the exception of changing colours this is the css in my template.css that refers to the navbar layout most of it is just customizing the visual info not really affecting dropdowns. /* Customize the navbar links to be fill the entire space of the .navbar */

.navbar .navbar-inner {
    padding: 0;
    font: Arial;
}
/* .navbar .nav {
        margin: 0;
        display: table;
        width: 100%;*/
}
.navbar .nav li {
    display: table-cell;
    width: 1%;/*        float: none;*/
}
.navbar .nav li a {
    text-align: center;
    border-left: 1px solid rgba(255,255,255,.75);
    border-right: 1px solid rgba(0,0,0,.1);
}
.navbar .nav li:first-child a {
    border-left: 0;
    border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
    border-right: 0;
    border-radius: 0 3px 3px 0;
}

Lev

于 2013-11-21T01:55:37.723 回答