[SOLUCIONADO] Hacer menú responsive a partir de estilos

ceaped · #1 (**permalink**) 05/05/2015, 07:18

Buenos días
Tengo este menú:

Código CSS:

Ver original#navbar {
    width: 95%;
    height: auto;
    list-style: none;
    margin: 12px 0 0 2%;
    border: none;
    }
 
#navbar a {
    font-size: 1em;
    letter-spacing: 0.05em;
}
 
#main {
    display: inline-block;
    margin: -20px auto 0 auto;
    padding: 0 auto 15px auto;
}
 
#breadcrumb a:hover {   
    color: #BE171E;
}
 
 
ul.menu {
    width: 100%;
    height: auto;   
    margin: 0 auto 10px auto;   
    background-color: #D8D0B9;
    list-style: none;
    
    /* Sombra */
    -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
    -moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
    }
 
ul.menu li {
    font-family: 'Merriweather', serif;
    color: #FF0000;
    text-align: center;
    line-height: 45px;
    width: auto;
    height: auto;
    display: block;
    padding: 0;
    }
 
ul.menu li.current {
    font-weight: bold;
    }
 
ul.menu a {
    font-family: 'Merriweather', serif;
    font-size: 1.2em;
    text-align: center;
    color: #023568;
    line-height: 50px;
    text-decoration: none;
    text-transform: none;
    width: 100%;
    height: 50px;
    padding-left: 10px;
    padding-right: 10px;
    display: inline-block;
    background-color: transparent;
}
 
ul.menu a:hover {
    color: #FFFFFF;
    height: 50px !important;
    background-color: #023568;
    
    /* Borde redondeados */
    border-radius: 0px 0px 0px 0px;
}
 
ul.steplist {
    margin: 0;
    padding: 0;
    list-style-type: decimal;
}
 
ul.steplist li {
    margin: 0;
    padding: 0;
    font-size: 0.85em;
    padding-right: 0.5em;
    display: inline;
    text-transform: uppercase;
}
 
ul.steplist li.current {
    font-weight: bold;
}
 
ul.steplist a {
    text-decoration: none;
}
 
ul.plain {
    list-style-type: none;
    padding-left: 1.5em;
}

Deseo convertir en responsive (que se oculte y expanda).
Dese se a partir de estos .css ya que es un sistema CMS que solo me permite trabajar con los estilos dados por el sistema.

Gracias por su ayuda

fede5426 · #2 (**permalink**) 05/05/2015, 08:09

Y cual es tu duda?

NueveReinas · #3 (**permalink**) 05/05/2015, 08:23

Cita:

Iniciado por fede5426

Y cual es tu duda?

Ninguna, quiere el trabajo hecho

ceaped · #4 (**permalink**) 05/05/2015, 08:28

Hola NueveReinas
No no lo mires así. No quiero formar un debate a partir de esto.
Sólo que debo volver un menú responsive a partir de unos estilos preestablecidos.
Si me pueden ayudar les estaré agradecido.

Gracias por su ayuda

fede5426 · #5 (**permalink**) 05/05/2015, 08:44

Tendrías que hacerlo con media queries y javascript/jquery.

Señalale con @media la forma y/o posición que querés que tome cada elemento según el ancho del dispositivo. Por ejemplo, cuando sea para moviles lo ocultas poniéndole posición absoluta y un left de -100%, eso lo va a ocultar a la izquierda, después con jquery indicas que al presionar un botón (que también debería aparecer usando un media query) se anime ese "left" hasta el valor "0" y asi vas obtener que aparezca desde la izquierda.

Es un ejemplo rápido y muy poco detallado, pero te puede ayudar a darte una idea.

De todas formas, si estas usando un CMS y la web todavía no esta en funcionamiento, existen muchas plantillas responsive que podes usar. Y según tengo entendido son completamente personalizables.

ceaped · #6 (**permalink**) 05/05/2015, 09:03

Hola fede5426
Mira es un OJS.
El asunto es que esta plataforma ya viene con unos estilos preestablecidos (nombre, div, id)
Yo a partir de ahí deseo ocultar ese menú.
Si yo utilizo los "@media" pero no se cómo ocultar (contraer) en menú cuando sea responsive.
(adaptar cada id, class, ul, li) que tiene este menú.

Código CSS:

Ver original@media screen and (min-width: 240px) {
#navbar {
    propiedades...
    }
 
#navbar a {
    propiedades...
}
 
#main {
    propiedades...
}
 
#breadcrumb a:hover {   
    propiedades...;
}
 
 
ul.menu {
    propiedades...
    }
 
ul.menu li {
    propiedades...
    }
 
ul.menu li.current {
    font-weight: bold;
    }
 
ul.menu a {
    propiedades...
}
 
ul.menu a:hover {
    propiedades...
}
 
ul.steplist {
    propiedades...
}
 
ul.steplist li {
    propiedades...
}
 
ul.steplist li.current {
    propiedades...
}
 
ul.steplist a {
    propiedades...
}
 
ul.plain {
    propiedades...
}
 
}

Gracias por tu ayuda

fede5426 · #7 (**permalink**) 05/05/2015, 09:34

Y el código HTML cuál seria?

ceaped · #8 (**permalink**) 05/05/2015, 09:43

Hola fede5426
Ese es el asunto.
Aunque te puedo mostrar el HTML (.php) no se puede modificar, se tiene que trabajar con esas divs. No se puede insertar ni id, class ni nada al HTML pues es un sistema que te permite dar estilos pero a partir de las divs dadas por el sistema que en este caso es el .css que pongo.

Gracias por tu ayuda

fede5426 · #9 (**permalink**) 05/05/2015, 09:50

Cita:

Iniciado por ceaped

Hola fede5426
Ese es el asunto.
Aunque te puedo mostrar el HTML (.php) no se puede modificar, se tiene que trabajar con esas divs. No se puede insertar ni id, class ni nada al HTML pues es un sistema que te permite dar estilos pero a partir de las divs dadas por el sistema que en este caso es el .css que pongo.

Gracias por tu ayuda

Eso ya lo tenia entendido, pero cómo puedo ayudarte si no se a que elemento apunta cada clase/id.. Por eso pregunto cuál es el código HTML

ceaped · #10 (**permalink**) 05/05/2015, 10:13

Hola fede5426
Mira el .css que puse al inicio todos los id y class se llaman como están nombradas en el HTML
(Así esta construido el menú).

Gracias por tu ayuda

fede5426 · #11 (**permalink**) 05/05/2015, 10:32

Si eso ya lo entiendo ceaped pero si no se a que elemento están asignados no se a cuál modifica cada identificador. Los elementos en tu HTML pueden estar dispuestos de diferentes formas. Pega el html en un mensaje para ver si puedo ayudarte sino no puedo hacer nada.

ceaped · #12 (**permalink**) 05/05/2015, 13:26

Hola fede5426

Esta es el HTML

Código HTML:

Ver original<div id="navbar">
<ul class="menu">
<li><a href="#">Botón 1</a></li>
<li><a href="#">Botón 2</a></li>
<li><a href="#">Botón 3</a></li>
<li><a href="#">Botón 4</a></li>
<li><a href="#">Botón 5</a></li>
</ul>
</div>

Gracias por tu ayuda

fede5426 · #13 (**permalink**) 05/05/2015, 19:49

Hay cosas a las que no les encuentro el sentido en ese código.

Te dejo un ejemplo de cómo haría un menú que se oculta en móviles y aparece con un botón, pero viendo que no podes editar el html, dudo que puedas hacerlo también porque necesitarías agregar el icono de menú, o en su defecto un botón/enlace con la palabra "Menú".

Código HTML:

Ver original<div id="navbar">
  <div class="icon-menu">
    <img src="http://i59.tinypic.com/dz9hc1.png" />
  </div>
  <ul class="menu">
    <li><a href="#">Botón 1</a></li>
    <li><a href="#">Botón 2</a></li>
    <li><a href="#">Botón 3</a></li>
    <li><a href="#">Botón 4</a></li>
    <li><a href="#">Botón 5</a></li>
  </ul>
</div>

Código CSS:

Ver original#navbar {
    width: 100%;
    list-style: none;
    border: none;
    }
 
ul.menu {
   width:100%;
    background-color: #D8D0B9;
    padding:0;
    }
 
ul.menu li {
    text-align: center;
    line-height: 45px;
    display: block;
    }
 
ul.menu a {
    font-size: 1.2em;
    color: #023568;
    text-decoration: none;
    width: 100%;
    height: 50px;
    display:block;
}
 
ul.menu a:hover {
    color: #FFFFFF;
    background-color: #023568;
}
 
.icon-menu{
  display:none;
  cursor:pointer;
}
 
@media screen and (max-width: 320px) {
 
  .menu{
    position:absolute;
    top:55px;
    left:-100%;
  }
  
  .icon-menu{
    display:block;
  }
 
}

Código Javascript:

Ver original$(document).ready(function(){
  var contador = 1;
  $(".icon-menu").click(function(){
            if(contador == 1){
                $('.menu').animate({"left": "0"});
                contador=0;
            }
            else{
                contador=1;
                $(".menu").animate({"left":"-100%"});
            }
        });
});

http://codepen.io/anon/pen/xGwXLK

De igual forma me parece que te estas complicando mucho, si es un sitio nuevo como dije antes, a mi parecer tendrías que usar algo que puedas editar.. si no tenes control sobre el código la tarea se hace bastante difícil.

ceaped · #14 (**permalink**) 06/05/2015, 05:33

Hola fede5426
Voy a probar y te cuento.

Gracias por tu ayuda

ceaped · #15 (**permalink**) 07/05/2015, 07:33

Hola fede5426
¿Y se puede insertar la class="icon-menu"?

Yo lo pongo así pero no funciona.

Código Javascript:

Ver original<script>
$("#navbar").addClass("icon-menu");
</script>

Gracias por tu ayuda

fede5426 · #16 (**permalink**) 07/05/2015, 07:56

Lo correcto en ese caso seria hacer esto:

Código Javascript:

Ver original$("#navbar").prepend('<div class="icon-menu"><img src="http://i59.tinypic.com/dz9hc1.png" /></div>');

Lo que hace "prepend()" es agregar lo que escribas dentro de los paréntesis antes del primer elemento hijo. En este caso lo que esta dentro de los paréntesis se agregaría dentro de #navbar (que es el elemento que indicamos) y antes del <ul>

El código javascript completo debería ser algo asi:

Código Javascript:

Ver original$(document).ready(function(){
  $("#navbar").prepend('<div class="icon-menu"><img src="http://i59.tinypic.com/dz9hc1.png" /></div>');
  var contador = 1;
  $(".icon-menu").click(function(){
            if(contador == 1){
                $('.menu').stop().animate({"left": "0"});
                contador=0;
            }
            else{
                contador=1;
                $(".menu").stop().animate({"left":"-100%"});
            }
        });
});

Agregué también los stop() para que no falle la animación y se repita indefinidamente si haces muchos clicks en el botón.

Proba si así funciona.

Edito:

Acá te dejo un Codepen funcionando.

Saludos

ceaped · #17 (**permalink**) 07/05/2015, 08:56

Hola fede5426
Me funciona bien.
Me pasa algo curioso
¿Le doy clic y no abre y le vuelvo a dar clic y ahí si abre?. Se abre siempre a la segunda vez de dar clic (sólo en la primera vez).

Ya le puse un "z-index: 999;" pero no es eso.

Codepen

Gracias por tu ayuda

ceaped · #18 (**permalink**) 07/05/2015, 14:05

Hola fede5426
Listo ya vi que era.
Era invertir los valor left. Yo quiero que se oculte al inicio y que por medio del botón se abra.

Muchas gracias por tu ayuda

JuJoGuAl · #19 (**permalink**) 08/05/2015, 14:29

@fede5426 me parece excelente tu idea, yo hubiera usado Bootstrap pero como el no puede editar mucho tu idea es muy funcional

fede5426 · #20 (**permalink**) 08/05/2015, 19:31

De nada ceaped me alegro que te haya funcionado. Ya podes marcar el tema como solucionado entonces

Gracias JuJoGuAl, hasta hace muy poco no tenia la menor idea de como usar bootstrap, por lo general hago mi propio código.. Y hablando de este caso en particular, ese script lo he usado varias veces, cambiando los efectos de aparición y desaparición de vez en cuando, pero el script es básicamente el mismo.

Saludos