1

Estoy diseñando una interfaz para una plataforma de gestión, esta posee un sidebar que cambia de tamaño según la resolución, es decir, cuando la resolución es inferior a 800px, debe esconderse el texto y mostrar sólo iconos, se hace más pequeña para dejar espacio al contenido principal. El problema es que no se cómo hacer para que antes de pintar la plataforma detecte si tiene que aparecer desplegada o no.

Actualmente la barra carga sin desplegar y si detecta que el espacio es mayor a 800px se quita la clase que lo colapsa. Pero no me parece que sea atractivo. Me gustaría que antes de pintar la web se comprobase el viewport para que al recorrer los elementos del DOM al sidebar se le asignara la clasee correcta para aparecer colapsado o no. He intentado hacerlo con javascript antes de la carga del body, pero, si no carga el body el elemento no existe en el árbol y no puedo cambiar la clase.

el menú está basado en metismenu

(function ($, window, document, undefined) {

var pluginName = "metisMenu",
    defaults = {
        toggle: true
    };

function Plugin(element, options) {
    this.element = element;
    this.settings = $.extend({}, defaults, options);
    this._defaults = defaults;
    this._name = pluginName;
    this.init();
}

Plugin.prototype = {
    init: function () {

        var $this = $(this.element),
            $toggle = this.settings.toggle;

        $this.find('li.active').has('ul').children('ul').addClass('collapse in');
        $this.find('li').not('.active').has('ul').children('ul').addClass('collapse');

        $this.find('li').has('ul').children('a').on('click', function (e) {
            e.preventDefault();

            $(this).parent('li').toggleClass('active').children('ul').collapse('toggle');

            if ($toggle) {
                $(this).parent('li').siblings().removeClass('active').children('ul.in').collapse('hide');
            }
        });
    }
};

$.fn[ pluginName ] = function (options) {
    return this.each(function () {
        if (!$.data(this, "plugin_" + pluginName)) {
            $.data(this, "plugin_" + pluginName, new Plugin(this, options));
        }
    });
};

})(jQuery, window, document);

$('#side-menu').metisMenu();

$(window).bind("load resize", function () {
    if ($(this).width() < 780) {
        $('body').removeClass('left-side-collapsed');
        $('.navbar-header').removeClass('logo-collapsed');
        $('div.sidebar-collapse').addClass('collapse');
        $('#sidebar').css('height', 'auto');
    } else if ($(this).width() < 1199) {
        $('div.sidebar-collapse').removeClass('collapse');
        $('#sidebar').css('height', 'auto');
        $('body').addClass('left-side-collapsed');
        $('.navbar-header').addClass('logo-collapsed');
        reloadStatistics();
    } else {
        $('div.sidebar-collapse').removeClass('collapse');
        $('#sidebar').css('height', 'auto');
        $('body').removeClass('left-side-collapsed');
        $('.navbar-header').removeClass('logo-collapsed');
        reloadStatistics();
    }
});

1 respuesta 1

3

Te voy a sugerir una alternativa sin JavaScript: usa media queries y deja que sea el navegador el que se encargue automáticamente de la lógica de los estilos, en lugar de controlarla tú manualmente con JavaScript/jQuery.

En tu caso tendrías que estructurar el CSS de la siguiente manera:

/* en la raíz iría el CSS para cuando la pantalla es menor de 780px */

@media (min-width: 780px) {
    /* aquí iría el CSS para cuando la pantalla tenga al menos 780px */
}

@media (min-width: 1200px) {
    /* aquí iría el CSS para cuando la pantalla tenga al menos 1200px */
}

Entonces, en lugar de tener diferentes clases que cambian con JavaScript dependiendo del ancho de la pantalla, lo que harías es usar la misma clase y definir los diferentes estilos que tendrían para cada ancho de pantalla.

Algunos beneficios de hacer esto:

  • Dejas que sea el navegador el que se encargue de aplicar el estilo que corresponda,
  • El menú se pintará directamente colapsado o abierto según corresponda sin necesidad de esperar a que se cargue el body o ningún JavaScript para ello,
  • Tendrás menos clases en tu CSS, lo que hará que sea más fácil el mantenimiento posterior.
1
  • Necesito usar javascript, con una media query no me sirve porque también tengo un botón con toggle por si aunque por defecto elsidebar se muestre de una forma el usuario quiere desplegarla o guardarla. Si aplico queries el toggle se deshabilitaria xk aunque cambiase de clase las clases se rigen x el querie. Lo que quiero saber es si yo puedo usar una variable de javascript para poblar la clase de un elemento. Y podria meter en una variable la clase inicial a poner detectando antes de la carga del dom el viewport. Pero nose si puedo usar una variable de javascript para escribir una clase
    – ValKiriann
    el 21 jul. 2016 a las 7:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.