[SOLUCIONADO] Convertir lista en boton desplegable sólo en móvile

maiksix · #1 (**permalink**) 20/08/2015, 05:17

Hola a todos,

En mi web tengo un menú de navegación con 10 apartados, y me gustaría que cuando sea un móvil el menú se mostrase como un botón que al darle click se abra y te muestre los 10 apartados.

Lo he visto en varias web y me gusta la idea.

Actualmente mi web es responsive, pero no me gusta que el menú se adapte, y quiero simplificar la web para móvil poniendo un desplegable de estos, pero no se por donde empezar. Alguna sugerencia?

Gracias amigos.

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

Son varias cosas las que hay que hacer..

En primer lugar, agregar un botón que solo sera visible en dispositivos moviles.
En segundo lugar, hacer unos cuantos cambios al diseño de la lista:

Si antes estaba asi:

Código CSS:

Ver original.boton{
    display:none;
}
 
nav{
    width:100%;     
    border-bottom:1px solid #354f64;
}
 
nav ul{
    width:100%;
    margin:0;
    background-color:#f3f3f3;
}
 
nav ul li{
    display:inline-block;
}

Ahora debería estar algo asi:

Código CSS:

Ver original@media screen and (max-width:480px){
 
   .boton{
        display:block;
        border-radius:5px;
        width:35px;
        cursor:pointer;
    }
 
   nav{
        position:relative;
    }
    
    nav ul{
        width:75%;
        position:absolute;
        top:100%;
        left:-100%;
        padding:0;
    }
    
    nav ul li{
        display:block;
    }
}

Con estos cambios logras que el menú se convierta en una lista vertical, que aparezca "flotando" (por la posición absoluta) debajo del nav (donde va a estar solo el botón) y que esté oculto a la izquierda (con left: -100%).

Y en tercer y último lugar, darle funcionalidad al boton con Javascript, o Jquery como lo hice en mi ejemplo:

Código Javascript:

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

Demo

Claro, todo esto agregando los estilos que creas necesarios en tu menú.. en la demo están agregados como para que quede más presentable

Saludos

borjagat · #3 (**permalink**) 20/08/2015, 15:12

Gracias y para que sea un select. Esto ya lo consegui. En este caso no esta en un nav y es un tabla con tr y td y con clases en los links

fede5426 · #4 (**permalink**) 21/08/2015, 09:32

Cita:

Iniciado por borjagat

Gracias y para que sea un select. Esto ya lo consegui. En este caso no esta en un nav y es un tabla con tr y td y con clases en los links

No entendí muy bien lo que necesitas.. pero si estas usando tablas para hacer un menú te diría que te actualices un poco, y no creo que sea posible cambiarlo de horizontal a vertical ya que deberías modificar cada celda <td> por un nuevo <tr> con el <td> adentro.. lo veo innecesario, hay mejores formas de hacerlo.

Saludos

PD: Si la pregunta es porque tenes que modificar un trabajo ya hecho y el menú está trabajado con tablas, te diría que recrees el menú usando listas, te va a llevar menos trabajo que pensar como modificar la tabla para que se ajuste. Por lo menos a mi no se me ocurre cómo hacerlo.

maiksix · #5 (**permalink**) 22/08/2015, 02:58

Gracias fede5426. Lo que no consigo es centrar el .boton en el centro del nav. Lo he probado poniendo margin-left y right en auto, pero no me hace ni caso.

Alguna sugerencia?

fede5426 · #6 (**permalink**) 22/08/2015, 10:59

Con margin:auto; deberia ser suficiente..

Revisa el demo que te pase en la respuesta anterior, agregué comentado el "margin:auto;".. quita el comentario para que se apliquen los márgenes y vas a ver que funciona perfecto.

Revisa en tu código que el botón tenga un width definido.. si no lo tiene posiblemente sea eso lo que no deja que se centre.

maiksix · #7 (**permalink**) 24/08/2015, 09:22

Si, he visto que en tu código funciona, y fue lo primero que probé, pero en el mio no... Deje todo igual, tiene el width de 35px, y el nav tiene width 100% así que nose...

fede5426 · #8 (**permalink**) 24/08/2015, 10:02

Y si dejas tu código aca para revisarlo?

jaja

maiksix · #9 (**permalink**) 25/08/2015, 09:02

Cierto! Disculpa.

El css es este:

Código HTML:

@media screen and (max-width:480px) and (orientation: portrait){
 
	.boton{
		display:block;
		border-radius:5px;
		width:35px;
		cursor:pointer;
		display:inline;
	}
	.botonmrm{
		display:block;
		border-radius:5px;
		width:35px;
		cursor:pointer;
		display:inline;
		margin-left:150px;
	}
	nav{
		width:99%;
		padding:10px;
		position:relative;
		color: #333;
	}
	
	nav ul{
		width:100%;
		position:absolute;
		top:100%;
		left:-100%;
		padding:0;
		border-top:1px solid #354f64;
		box-shadow:5px 5px 5px rgba(0,0,0,.05);
		z-index:3;
		background-color: #333;
	}
	
	nav ul li{
		display:block;
		border-bottom:1px solid rgba(53,79,100,.2);
		background-color: #333;
	}

nav li a {
width:98%;
display: block;
float: left;
padding-top:5px;
padding-left:5px;
padding-right:5px;
color: #fff;
text-decoration: none;
border-right: 0px solid #fff;
text-align:center;
height:20px;
font: 12pt Helvetica;
}
.blanco{
background: #fff;
}	
#videos{
	width:99%;
	height:150px;
	padding:5px;
	margin-left:auto;
	margin-right:auto;
}
#video{
	text-align: center;
	font-family: Helvetica;
	font-weight: normal;
	font-size: 24px;
	color: #fff;
	background-color: #f2f2f2;
	border: 0px #000 solid;
	width:100%;
	height:100%;
}
#news{
text-align: center;
font-family: Helvetica;
font-weight: normal;
font-size: 24px;
color: #fff;
background-color: #f2f2f2;
border: 0px #000 solid;
width:100%;
height:auto;
}

#news tr{
width:100%;
height:100%;
}

#news td{
width:100%;
height:100%;
}

#news img{
width:100%;
height:auto;
}
}

Y el código del boton en el html es este:

Código:

<body>
<div class="container">

		<div id="header">
				<nav>
				<img src="http://i.imgur.com/yjwy9Q6.png" class="boton" alt="" />
				<img src="images\Logos-empresa\logoempresa.ico" class="botonmrm" alt="" />
					<ul>
						<li class="blanco"><a class="blanco" href="?r=site/index" ><img id="logoesk" src="images\Logos-empresa\Logoesk.png"/></a></li>
						<li><a href="?r=site/internacional&pagina=0">Internacional</a></li>
						<li><a href="?r=site/nacional&pagina=0">Nacional</a></li>
						<li><a href="?r=site/autonomico&pagina=0">Auton&oacute;mico</a></li>
						<li><a href="?r=site/exkartistas&pagina=0">Exkartistas</a></li>
						<li><a href="?r=site/calendarios&month=a">Calendarios</a></li>
						<li><a href="?r=site/clasificaciones">Clasificaciones</a></li>
						<li><a href="?r=site/videos&pagina=0">Videos</a></li>
						<li class="rs"><a class="rs" href="https://twitter.com/Eskarting" ><img style="width:30px; height:20px;" id="logo-tw" src="images\Logos-empresa\tw.png"/></a></li>
						<li class="rs"><a class="rs" href="http://www.facebook.com/pages/Eskarting/269830903103924" ><img style="width:30px; height:30px; margin-top:-5px;" id="logo-fb" src="images\Logos-empresa\fb.png"/></a></li>
					</ul>
				</nav>

justo después del /nav hay otras cosas y por eso no están cerrados los tags superiores de body y dos divs.

Gracias :)

fede5426 · #10 (**permalink**) 25/08/2015, 09:37

Tenés 2 imágenes con doble display.. block e inline, por empezar eso está mal.

Y en segundo lugar, si querés que el botón esté centrado debe estar solo, con display: block..

Otra opción para que puedas tener el logo de la empresa al lado, es con posición absoluta en el botón y acomodándolo al centro, mientras que al logo lo alineas a la derecha.

Y otra es con display block al botón y al logo de la empresa posición absoluta.

Proba cualquiera de esas..

Saludos

maiksix · #11 (**permalink**) 25/08/2015, 12:37

Es decir, debe quedar algo así?

Código HTML:

	.boton{
		display:block;
		border-radius:5px;
		width:35px;
		cursor:pointer;
		display:inline;
	}
	.botonmrm{
		position:absolute;
		margin-left: auto;
		margin-right: auto;
		left: 0;
		right: 0;
		border-radius:5px;
		width:35px;
		cursor:pointer;
	}

maiksix · #12 (**permalink**) 25/08/2015, 12:53

Ha funcionado bien, solo he tenido que añadir margin-top:-35px;

Muchas gracias fede5426 :)

borjagat · #13 (**permalink**) 04/09/2015, 16:17

y para que sea un seleccionable. un dropdown list, no un boton, el tipo select... como lo puedo transformar?