elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Usando Git para manipular el directorio de trabajo, el índice y commits (segunda parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  como hacer if responsive jquery/css
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: como hacer if responsive jquery/css  (Leído 1,981 veces)
d91

Desconectado Desconectado

Mensajes: 165


Ver Perfil
como hacer if responsive jquery/css
« en: 22 Noviembre 2015, 13:41 pm »

hola, elabore un pequeño menú HTML responsive, y con jquery hago la animación del menú cuando el max-with es de 800px, pero cuando maximizo la pagina los menus siguen haciendo uso del jquery, o sea que al dar click sobre el menú aparece pero yo desearía que al quitar el enfoque se volviera a ocultar, o simplemente no hiciera caso al click, porque solo es necesario cuando la pantalla es mas pequeña, pero no se si con un if puedo decir if(width<=800) o algo asi para que cuando la pagina este maximizada o mayor a 800px no  haga caso a este bloque javascript
Código
  1. $(document).ready(main);
  2.  
  3. var contador = 1;
  4.  
  5. function main() {
  6.    $('.menu_bar').click(function () {
  7.        if (contador == 1) {
  8.            $('.navmenu').animate({
  9.                left: '0'               //aquí le digo que aparezca
  10.            }//animate
  11.                );
  12.            contador = 0;
  13.        }//if
  14.        else {
  15.            contador = 1;
  16.            $('.navmenu').animate({
  17.                left: '-100%'   //aquí le digo que desaparezca
  18.            }//animate
  19.                );
  20.  
  21.        }//else
  22.    });//menu_bar
  23.  
  24.    $('.submenu').click(function () {
  25.        $(this).children('.children').slideToggle();   //aquí muestra el submenu
  26.    });//submenu
  27. }
  28.  


En línea

тαптяα


Desconectado Desconectado

Mensajes: 1.151


Sic utere tuo ut alienum non laeda


Ver Perfil WWW
Re: como hacer if responsive jquery/css
« Respuesta #1 en: 23 Noviembre 2015, 10:21 am »

Yo usaría CSS Media Queries, te evitas tener que estar realizando un script y pasas directamente a escribir código CSS dentro de esta query:

Código
  1. <style>
  2. @media (max-width: 800px) {
  3.  
  4. ....
  5.  
  6. }
  7. </style>

Mod: Obligatorio el uso de etiquetas GeSHi.


« Última modificación: 23 Noviembre 2015, 12:08 pm por #!drvy » En línea

d91

Desconectado Desconectado

Mensajes: 165


Ver Perfil
Re: como hacer if responsive jquery/css
« Respuesta #2 en: 23 Noviembre 2015, 11:50 am »

en efecto eso es lo que hice
Código
  1. @media screen and (max-width:  800px) {
  2.  
  3.   #logo,#antena {
  4.    display:none;
  5.    }
  6.    .menu_bar {
  7.     display: block;
  8.     width: 100%;
  9.     position: fixed;
  10.     background: #3ca0e9;
  11.     top:0;
  12.    }
  13.        .menu_bar .btn_menu {
  14.        display: block;
  15.        padding: 20px;
  16.        color: #fff;
  17.        overflow: hidden;
  18.        font-size: 25px;
  19.        font-weight: bold;
  20.        text-decoration: none;
  21.  
  22.        }
  23.        .menu_bar .btn_menu:hover {
  24.        cursor: pointer;
  25.        }
  26.        .menu_bar span {
  27.         float: right;
  28.         font-size: 40px;
  29.  
  30.        }
  31.    .navmenu {
  32.        /*border-bottom: 30px;*/
  33.  
  34.        width: 80%;
  35.        position: fixed;
  36.       right: 100%;
  37.        margin:0;
  38.        overflow: scroll;
  39.        height: 100%;
  40.  
  41.    }
  42.        .navmenu ul li {
  43.        display: block;
  44.        border-bottom: 1px solid rgba(255,255,255,.5);
  45.  
  46.        }
  47.  
  48.            .navmenu ul li a {
  49.            display: block;
  50.            font:12px;
  51.            }
  52.            .navmenu ul li .children {
  53.                width: 100%;
  54.                position: relative;
  55.  
  56.            }
  57.            .navmenu ul li:hover .children {
  58.                display: none;
  59.            }
  60.  
  61.                .navmenu ul li .children li a {
  62.                    margin-left:20px;
  63.                }
  64.  
  65.  
  66. }
  67.  
pero para la animación utilice el código javascript de arriba, pero cuando se maximiza la pagina el menú se despliega con :hover y con click  pero con este ultimo deseo que se oculte sin dar otro click
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
como hacer una consulta SQL con JQUERY
Bases de Datos
herminio59 1 5,576 Último mensaje 3 Abril 2014, 03:00 am
por engel lex
[Resuelto] [JQuery]\/(Ayuda) - Como hacer un Listview Horizontal
Desarrollo Web
Brian1511 3 3,071 Último mensaje 23 Julio 2015, 01:26 am
por Brian1511
Hacer responsive una pagina web
Desarrollo Web
ccsponcer3 8 4,942 Último mensaje 25 Junio 2016, 13:57 pm
por EFEX
Como hacer varios div responsive
Desarrollo Web
eugeniocol 0 1,774 Último mensaje 13 Marzo 2017, 15:19 pm
por eugeniocol
¿Como se puede hacer un diseño web NO responsive?
Desarrollo Web
Leguim 2 2,288 Último mensaje 17 Abril 2019, 23:10 pm
por iCoke
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines