5

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

This is the code in index.php

and here, Joomla administration

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

Help us, please.

  • 1
    Have you tried to debug it using the browser console/dev tools? – jonboy Sep 2 '14 at 7:21
  • Could you post your code instead of the picture please? It makes it easier to test. What browser and browser version are you using? CSS would also be helpful. – TryHarder Sep 19 '14 at 0:22
4

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.

menu class suffix for Joomla bootstrap3 navbar menu

3

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)

-1

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

Joomla 3.x templates and Bootstrap 3

  • Link only answers are not considered good answers. Links may change in the future, making your post irrelevant. If you want to answer the question, try to provide as much information as possible trying to explain and solve the issue of the question. – FFrewin Aug 29 '15 at 22:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.