web-dev-qa-db-fra.com

Comment créer un menu réductible avec Joomla! 3.3 et Bootstrap 3?

J'ai essayé de créer un menu réductible avec Joomla! 3.3 et Bootstrap 3 et j'ai eu partiellement. Cependant, lorsque la version compressible est active et que je clique sur le bouton pour l'agrandir, elle s'ouvre, mais ne se ferme pas.

Ici le index.php code

This is the code in index.php

et ici, Joomla administration

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

Aidez-nous s'il-vous-plaît.

joomla-3.3.xmenutwitter-bootstrap-3
5
prleoassis

J'ai lutté avec cela plus longtemps que je ne veux l'admettre. Ma réponse est basée sur Bootstrap 3.2.0 et crée un menu déroulant pour Joomla 3.3

Dans mon modèle, j'ai inclus bootstrap.css et une version modifiée de bootstrap.js. Plus d'informations sur la modification au bas de cette réponse.

Je mets le code suivant dans mon fichier 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-->

Puis juste avant la balise de fermeture du corps (c'est-à-dire avant </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>

Veuillez noter que le javascript ci-dessus a été obtenu à partir d'un modèle de squelette pouvant être téléchargé à partir de https://github.com/gsuez/master-bootstrap-

La version bootstrap que j'utilise est presque identique à la version standard Bootstrap 3.2.0, mais avec une modification. J'ai remplacé la section intitulée dropdown.js v3.2.0 dans bootstrap.js
avec dropdown-doubletap.js de https://github.com/mrhanlon/twbs-dropdown-doubletap

L’utilisation de cette version modifiée bootstrap vous permet de double-cliquer sur le lien déroulant parent (la première liste déroulante) pour suivre le lien. Normalement, la liste déroulante parent sert uniquement d’en-tête (vous pouvez cliquer dessus mais vous ne pouvez pas suivre le lien).

Vous pouvez probablement simplement utiliser le bootstrap normal) si vous le souhaitez, mais je ne l’ai pas testé. De mémoire, si vous utilisez le modèle squelette que j’ai mentionné ci-dessus avec le bootstrap modifié, vous devrez supprimez dropdown.js du fichier params.php.

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

Aussi j'ai oublié de mentionner que j'ai utilisé nav navbar-nav pour le suffixe de la classe de menu. Assurez-vous de laisser un espace devant le nav.

menu class suffix for Joomla bootstrap3 navbar menu

4
TryHarder

S'il vous est difficile de déboguer le code, essayez ces modules de menu: -

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

http://extensions.joomla.org/extensions/structure-a-navigation/menu-systems/accordion-menus/22571 (this on a bootstrap)

3
shine