web-dev-qa-db-ja.com

Joomlaで折りたたみ可能なメニューを作成する方法！ 3.3とBootstrap 3？

私は折りたたみ可能なメニューを作成してみました Joomla！ 3.3 そして ブートストラップ3 と部分的に得た。ただし、折りたたみバージョンがアクティブで、ボタンをクリックして展開すると、開くだけで閉じません。

ここでは、index.phpコード

This is the code in index.php

そしてここ、 Joomla administration

Here is the used codes in <code>Administrator>ModuleManager>MainMenu>Advanced</code>

助けてください。

joomla-3.3.xmenutwitter-bootstrap-3
5
prleoassis

私は認めるよりも長くこれに苦労しました。私の答えはBootstrap 3.2.0に基づいており、Joomla 3.3の折りたたみ可能なドロップダウンメニューを作成します

私のテンプレートには、bootstrap.cssとbootstrap.jsの修正バージョンを含めました。修正に関する詳細は、この回答の下部にあります。

次のコードをindex.phpファイルに入れます

<!--Navigation-->
<div id="navigation">
    <div class="container">

        <div class="navbar navbar-default" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#targetedestination">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <div id="brand">
                    <a href="<?php echo $this->params->get('logo_link') ?>"
                        <img style="width:<?php echo $this->params->get('logo_width') ?>px; height:<?php echo $this->params->get('logo_height') ?>px; " src="<?php echo $this->params->get('logo_file') ?>" alt="Logo" />
                    </a>
                </div>
            </div>

            <div class="navbar-collapse collapse" id="targetedestination">
            <?php if ($this->countModules('navigation')) : ?>
                <nav class="navigation" role="navigation">
                    <jdoc:include type="modules" name="navigation" style="none" />
                </nav>
            <?php endif; ?>
            </div>

        </div>
    </div>
</div>
<!--Navigation-->

次に、本文の終了タグの直前（つまり、</body>の前）

<script type="text/javascript">
    (function($){
        $(document).ready(function(){
            // dropdown
            if ($('.parent').children('ul').length > 0) 
            {
                $('.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>

<script type="text/javascript">
    (function($){
        $('.dropdown input').click(function(e) {
        e.stopPropagation();
    });
    })(jQuery);
</script>

<script type="text/javascript"> 
    (function($){
        $('.dropdown-menu .dropdown-submenu a[data-toggle="dropdown-submenu"]').click(function (e)
        {                   
            e.stopPropagation();
        });
    })(jQuery);
</script>

<!-- JS -->
</body>

上記のjavascriptは https://github.com/gsuez/master-bootstrap- からダウンロードできるスケルトンテンプレートから取得されたことに注意してください

bootstrap私が使用するバージョンは、標準のBootstrap 3.2.0とほぼ同じですが、1つの変更点があります。dropdown.jsというセクションを置き換えました。 bootstrap.jsのv3.2.0
https://github.com/mrhanlon/twbs-dropdown-doubletap のdropdown-doubletap.jsを使用

この変更されたbootstrapバージョンを使用すると、親ドロップダウンリンク（最初のドロップダウン）をダブルクリックしてリンクをたどることができます。通常、親ドロップダウンはヘッダーとしてのみ機能します（つまり、クリックできますが、リンクをたどることはできません）。

おそらく通常のbootstrapを使用することもできますが、私はテストしていません。メモリから、上記のスケルトンテンプレートを使用し、変更されたブートストラップを使用する場合は、 params.phpファイルからdropdown.jsを削除します。

//$doc->addScript('templates/'.$this->template.'/js/dropdown.js');

また、メニュークラスのサフィックスにnav navbar-navを使用したことを忘れていました。ナビゲーションの前にスペースを残してください。

menu class suffix for Joomla bootstrap3 navbar menu

4
TryHarder

コードのデバッグが難しい場合は、これらのメニューモジュールを試してみてください。

http://www.joomlack.fr/en/joomla-extensions/accordeonmenu-ck

http://extensions.joomla.org/extensions/structure-a-navigation/menu-systems/accordion-menus/22571（this one has bootstrap）

3
shine