Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Código Fuente » JavaScript » Código de JavaScript - Menú vertical ajustable con JavaScript

Código de JavaScript - Menú vertical ajustable con JavaScript

Volver
Agregar Código Fuente
<<>>
Imágen de perfil
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Menú vertical ajustable con JavaScriptgráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(3)
Publicado el 18 de Diciembre del 2016 por Scriptshow (141 códigos)
2.774 visualizaciones desde el 18 de Diciembre del 2016
Menú vertical de tamaño ajustable con JavaScript al ancho del dispositivo. Se basa en unas referencias (atributos y valores) para modificar el tamaño de los elementos...

La particularidad es que no utiliza "pseudo clases" ni "media queries", sólo JavaScript nativo crossbrowsers. Una simple función se encarga de todo.

Sirve para experimentar e implementar directamente en cualquier proyecto con pocas modificaciones.

Espero sea útil.


Un saludo

Requerimientos

Un navegador o dispositivo compatible.

1.0
estrellaestrellaestrellaestrellaestrella(3)

Actualizado el 11 de Enero del 2017 (Publicado el 18 de Diciembre del 2016)gráfica de visualizaciones de la versión: 1.0
2.775 visualizaciones desde el 18 de Diciembre del 2016
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Menu
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<style>
#list {

margin: 0px;
padding: 0px;
width: 240px;
position: relative;
display: inline-block;
}
.item {
margin: 4px auto;
padding: 4px 4px;
background: #FEFEFE;

list-style-type: none;
border: 1px solid #D0D0D0;

transition: all 2s;
}
.item:hover {
text-align: center;
background: #EFEFEF;

border: 1px solid #000000;

cursor: pointer;
}
</style>
<script>
onresize=function() {
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if (w <= 480) {document.getElementById('list').style.width="100%";}
if (w >= 480) {document.getElementById('list').style.width="240px";}
}
</script>
</head>
<body>
<h2>Simple Responsive</h2>
<ul id="list">
<li class="item">Menu-item 1</li>
<li class="item">Menu-item 2</li>
<li class="item">Menu-item 3</li>
<li class="item">Menu-item 4</li>
</ul>
<p align="right">Este ejemplo cambia el menú cuando el ancho de la ventana es mayor o menor de 480 pixels.</p>
</body>
</html>



Comentarios sobre la versión: 1.0 (3)

Imágen de perfil
xve
19 de Diciembre del 2016
estrellaestrellaestrellaestrellaestrella
En muchas ocasiones, es muy importante controlarlo por JavaScript en vez de con CSS!!!

Buena aporte!!!
Responder
Peppeprox24
18 de Enero del 2017
estrellaestrellaestrellaestrellaestrella
Gracias amigo me funciona perfecto C= :D
Responder
anonymous
8 de Marzo del 2017
estrellaestrellaestrellaestrellaestrella
queda mas corto que en css no?
Responder

Comentar la versión: 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad
Acepto las políticas de privacidad

http://lwp-l.com/s3812