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

Pos: 4

Val: 2.019

Ha mantenido su posición en JavaScript (en relación al último mes)

Menú vertical ajustable con JavaScript

JavaScript

(3)

Publicado el 18 de Diciembre del 2016 por Scriptshow (141 códigos)

2.579 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
(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.580 visualizaciones desde el 18 de Diciembre del 2016

<!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)

xve

19 de Diciembre del 2016

En muchas ocasiones, es muy importante controlarlo por JavaScript en vez de con CSS!!!

Buena aporte!!!

Responder

Peppeprox24

18 de Enero del 2017

Gracias amigo me funciona perfecto C= :D

Responder

anonymous

8 de Marzo del 2017

queda mas corto que en css no?

Responder

Comentar la versión: 1.0

http://lwp-l.com/s3812

Mostrar sucesivamente los input de un formulario

Formulario Simple de Contacto con JavaScript

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

Requerimientos

1.0(3)

Comentarios sobre la versión: 1.0 (3)

Comentar la versión: 1.0

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

1.0
(3)