it-swarm-es.tech

¡Cómo crear un menú plegable con Joomla! 3.3 y Bootstrap 3?

He intentado crear un menú plegable con Joomla! 3,3 y Bootstrap 3 y me puse parcialmente. Sin embargo, cuando la versión plegable está activa y hago clic en el botón para expandir, simplemente se abre, pero no se cierra.

Aquí el index.php código

This is the code in index.php

y aquí, Joomla administration

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

Ayudanos por favor.

5
prleoassis

Luché con esto más de lo que me gustaría admitir. Mi respuesta se basa en Bootstrap 3.2.0 y crea un menú desplegable plegable para Joomla 3.3

En mi plantilla incluí bootstrap.css y una versión modificada de bootstrap.js. Más información sobre la modificación al final de esta respuesta.

Puse el siguiente código en mi archivo 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-->

Luego, justo antes de la etiqueta de cierre del cuerpo (es decir, antes de </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>

Tenga en cuenta que el javascript anterior se obtuvo de una plantilla de esqueleto que se puede descargar desde https://github.com/gsuez/master-bootstrap-

La versión bootstrap que uso es casi la misma que la estándar Bootstrap 3.2.0, pero con un cambio. He reemplazado la sección llamada dropdown.js v3.2.0 en bootstrap.js
con dropdown-doubletap.js de https://github.com/mrhanlon/twbs-dropdown-doubletap

El uso de esta versión modificada bootstrap) le permite hacer doble clic en el enlace desplegable principal (El primer menú desplegable) para seguir el enlace. Normalmente, el menú desplegable principal actúa solo como un encabezado (es decir, puede hacer clic en él pero no puedes seguir el enlace).

Probablemente pueda usar el bootstrap normal si lo desea, pero no lo he probado. De memoria, si usa la plantilla esqueleto que mencioné anteriormente con el bootstrap modificado, necesitará eliminar dropdown.js del archivo params.php.

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

También olvidé mencionar que usé nav navbar-nav para el sufijo de clase de menú. Asegúrate de dejar un espacio delante del navegador.

menu class suffix for Joomla bootstrap3 navbar menu

4
TryHarder
3
shine