1

Joomla 3.1 のように Bootstrap メニューがドロップダウンで動作するように取り組んでいます。私はほぼそこにいますが、完全ではありません：私が使用するjsスクリプトの場合（クリックではなくホバーでtwitterブートストラップメニュードロップダウンを作成する方法）

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

私が使用しているCSSは( 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;
}

これはうまく機能しますが、修正すべき点が 1 つあります。メニューバーのリンクは、その下のメニューを表示するためにのみ機能します。私が必要としているのは、トップリンクも機能させることです。どうやってやるの？

4

1 に答える 1

6

残念ながら、一番上のメニュー項目を「クリック」してその下にドロップダウンを表示する必要があるため、この項目にリンクを設定することはできません。href="#" に設定する必要があります。そうしないと、クリックされるたびにページがリロードされ、したがって、ドロップダウンは表示されません。セットアップが実際に機能し、「ホバー」したときにメニューが表示され、クリックする必要がない場合は、削除するだけです

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

これにより、メニュー項目にリンクがそのまま残ります（メニュー項目のタイプを正しく設定していると仮定します。

お役に立てれば

完全を期すために、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();
    });

色を変更することを除いて、css をカスタマイズする必要はあまりありません。これは、navbar レイアウトを参照する template.css の css です。そのほとんどは、視覚情報をカスタマイズするだけで、ドロップダウンに実際には影響しません。/* navbar リンクをカスタマイズして、.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;
}

レヴ

于 2013-11-21T01:55:37.723 に答える