1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Tutorial (Aporte) Menú lateral Responsive Parte 2

Tema en 'Tutoriales de HTML y CSS' comenzado por FabricioT, 2 de Mayo de 2015.

  1. FabricioT

    FabricioT Nuevo Miembro

    Se incorporó:
    3 de Marzo de 2015
    Mensajes:
    17
    Me gusta recibidos:
    6
    Puntos de trofeos:
    3
    Género:
    Hombre
    Ocupación:
    Director en Hilsoft Community
    Localización:
    Ecuador
    Página web:
    Buenas, aquí estoy de nuevo para seguir con este menu :) , lamento dejarlos con el código a medias:(

    Bueno, continuemos con la parte final! :) (JavaScript)

    Código Java Script (el código que accionará los triggers:
    Código (Text):
    <script>
    $(document).ready(function() {
        var ancho = $(window).width();
        jQuery('body').css('overflow','hidden');
     
        jQuery('.menu div').css('margin-top','24%');

        $('.menu-trigger').click(function() {
            $('.menu').fadeIn(function() {
                    jQuery('.menu').css('width','14em');
                });
            $('.menu').fadeIn(function() {
                    jQuery('.menu div').css('opacity','1');
                });
            $('.menu').fadeIn(function() {
                    jQuery('.menu-trigger2').css('opacity','1');
                });
            $('.menu').fadeIn(function() {
                    jQuery('.menu-trigger').css('opacity','0');
                });
            $('.menu').fadeIn(function() {
                    jQuery('el resto de la página que va a desplazarse al abrirse el menú').css('margin-left','10em');
                });
              <!--
        si quieren hacer que más objetos se desplacen horizontalmente, agréguenlos aquí con el mismo código de arriba. no se olviden de usar # o . o nada si es una etiqueta como header
    //-->  
      });
        $('.menu-trigger').click(function() {
            $('.menu').fadeIn(function() {
                    jQuery('.menu').css('width','14em');
                });
            $('.menu').fadeIn(function() {
                    jQuery('.menu div').css('opacity','1');
                });
            $('.menu').fadeIn(function() {
                    jQuery('.menu-trigger2').css('margin-left','4.37em');
                });
            $('.menu').fadeIn(function() {
                    jQuery('.menu-trigger').css('opacity','0');
                });
                 
      });
        $('.menu-trigger2').click(function() {
            $('.menu').fadeIn(function() {
                    jQuery('.menu').css('width','0em');
                });
            $('.menu').fadeIn(function() {
                    jQuery('.menu div').css('opacity','0');
                });
            $('.menu').fadeIn(function() {
                    jQuery('.menu-trigger2').css('opacity','0');
                });
            $('.menu').fadeIn(function() {
                    jQuery('.menu-trigger').css('opacity','1');
                });
            $('.menu').fadeIn(function() {
                    jQuery('el resto de la página que va a desplazarse al abrirse el menú').css('margin-left','0em');
                });
    <!--
        si quieren hacer que más objetos se desplacen horizontalmente, agréguenlos aquí con el mismo código de arriba. no se olviden de usar # o . o nada si es una etiqueta como header
    //-->  
                 
      });
        $('.menu-trigger2').click(function() {
            $('.menu').fadeIn(function() {
                    jQuery('.menu').css('width','0em');
                });
            $('.menu').fadeIn(function() {
                    jQuery('.menu div').css('opacity','0');
                });
            $('.menu').fadeIn(function() {
                    jQuery('.menu-trigger2').css('margin-left','0em');
                });
            $('.menu').fadeIn(function() {
                    jQuery('.menu-trigger').css('opacity','1');
                });
                 
      });

    <!--
        aqui empieza el codigo que se genera al abrir la web desde un dispositivo móvil con pantalla menor a 700 pixeles
    //-->  

        if (ancho <= 700){
      $(document).ready(function() {  
        jQuery('.menu div').css('margin-top','9%');
         
        $('.menu-trigger').click(function() {
            $('.menu').fadeIn(function() {
                    jQuery('.menu').css('width','14em');
                });
            $('.menu').fadeIn(function() {
                    jQuery('.menu div').css('opacity','1');
                });
            $('.menu').fadeIn(function() {
                    jQuery('.menu-trigger2').css('margin-left','85%');
                });
            $('.menu').fadeIn(function() {
                    jQuery('.menu-trigger').css('opacity','0');
                });
            $('.menu').fadeIn(function() {
                    jQuery('el resto de la página que va a desplazarse al abrirse el menú').css('margin-left','100%');
                });
    <!--
        si quieren hacer que más objetos se desplacen horizontalmente, agréguenlos aquí con el mismo código de arriba. no se olviden de usar # o . o nada si es una etiqueta como header
    //-->
                 
      });
            $('.menu-trigger').click(function() {
            $('.menu').fadeIn(function() {
                    jQuery('.menu').css('width','100%');
                });
            $('.menu').fadeIn(function() {
                    jQuery('.menu div').css('opacity','1');
                });
            $('.menu').fadeIn(function() {
                    jQuery('.menu-trigger2').css('opacity','1');
                });
            $('.menu').fadeIn(function() {
                    jQuery('.menu-trigger').css('opacity','0');
                });
                 
      });
      });
         
        }

    });
    </script>
    Y listo!! aquí termina el tutorial:)

    Resultados:
    [​IMG]
    [​IMG]



    [​IMG]
    [​IMG]


    Si tienen alguna duda o errores, háganmelo saber
     

Comparte esta página