How to create a collapsible menu with Joomla! 3.3 and Bootstrap 3?

Question

I've tried create a collapsible menu with Joomla! 3.3 and Bootstrap 3 and I got partially. However, when the collapsible version is active and I click on the button to expand, it just open, but don't close.

Here, the index.php code

and here, Joomla administration

Help us, please.

Answer 1

I struggled with this longer than I care to admit. My answer is based on Bootstrap 3.2.0 and it creates a collapsible dropdown menu for Joomla 3.3

In my template I included bootstrap.css and a modified version of bootstrap.js More info about the modification at the bottom of this answer.

I put the following code in my index.php file

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

Then just before the closing body tag (ie. before </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>

Please note that the javascript above was obtained from a skeleton template that can be downloaded from https://github.com/gsuez/master-bootstrap-3

The bootstrap version I use is almost the same as the standard Bootstrap 3.2.0, but with one change. I've replaced the section called dropdown.js v3.2.0 in bootstrap.js
with dropdown-doubletap.js from https://github.com/mrhanlon/twbs-dropdown-doubletap

Using this modified bootstrap version enables you to double click on the parent dropdown link (The first dropdown) to follow the link. Normally the parent dropdown acts as a header only (i.e. You can click it but you can't follow the link).

You can probably just use the normal bootstrap if you want, but I haven't tested it. From memory, if you use the skeleton template I mentioned above with the modified bootstrap, you will need to remove dropdown.js from the params.php file.

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

Also I forgot to mention that I used nav navbar-nav for the menu class suffix. Make sure you leave a space in front of the nav.

Answer 2

If it is difficult for you to debug the code then give these menu modules a try:-

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)

Answer 3

Better way is to use overrides. Simply modify the navigation template as described in the Joomla forum:

Joomla 3.x templates and Bootstrap 3