it-swarm.dev

Come creare un menu pieghevole con Joomla! 3.3 e Bootstrap 3?

Ho provato a creare un menu pieghevole con Joomla! 3.3 e Bootstrap 3 e ho parzialmente. Tuttavia, quando la versione pieghevole è attiva e faccio clic sul pulsante per espanderlo, si apre e non si chiude.

Qui, il index.php codice

This is the code in index.php

e qui, Joomla administration

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

Aiutaci, per favore.

5
prleoassis

Ho lottato con questo più a lungo di quanto non voglia ammettere. La mia risposta si basa su Bootstrap 3.2.0 e crea un menu a discesa comprimibile per Joomla 3.3

Nel mio modello ho incluso bootstrap.css e una versione modificata di bootstrap.js Altre informazioni sulla modifica in fondo a questa risposta.

Ho inserito il seguente codice nel mio file 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-->

Quindi appena prima del tag body di chiusura (cioè prima di </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>

Si noti che il javascript sopra è stato ottenuto da un modello di scheletro che può essere scaricato da https://github.com/gsuez/master-bootstrap-

La bootstrap versione che uso è quasi uguale alla standard Bootstrap 3.2.0, ma con una modifica. Ho sostituito la sezione chiamata dropdown.js v3.2.0 in bootstrap.js
con dropdown-doubletap.js da https://github.com/mrhanlon/twbs-dropdown-doubletap

Usando questo modificato bootstrap consente di fare doppio clic sul collegamento a discesa principale (Il primo menu a discesa) per seguire il collegamento. Normalmente il menu a discesa principale funge solo da intestazione (ovvero è possibile fare clic ma non puoi seguire il link).

Probabilmente puoi semplicemente usare il normale bootstrap se vuoi, ma non l'ho provato. Dalla memoria, se usi il modello di scheletro che ho menzionato sopra con il bootstrap modificato, dovrai rimuovere dropdown.js dal file params.php.

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

Inoltre ho dimenticato di dire che ho usato nav navbar-nav per il suffisso della classe di menu. Assicurati di lasciare uno spazio davanti al nav.

menu class suffix for Joomla bootstrap3 navbar menu

4
TryHarder
3
shine