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

Imágen de perfil

Menú vertical ajustable con JavaScriptgráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(3)
Actualizado el 19 de Diciembre del 2016 por ScriptShow (Publicado el 18 de Diciembre del 2016)
1.722 visualizaciones desde el 18 de Diciembre del 2016. Una media de 21 por semana
  • ScriptShow se encuentra ahora conectado en el
  • chat de PHP
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
1.723 visualizaciones desde el 18 de Diciembre del 2016. Una media de 21 por semana
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
Imágen de perfil
Humberto
08 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
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s3812  
Revisar política de publicidad