Foros del Web » Creando para Internet » HTML »

[SOLUCIONADO] Menú vertical con desplazamiento botón arriba, boton abajo

Estas en el tema de Menú vertical con desplazamiento botón arriba, boton abajo en el foro de HTML en Foros del Web. Buenas Gente! Saludos! Hace días que trato de crear un menú vertical como el que muestro a continuación, pero en vez de que se muestre ...
  #1 (permalink)  
Antiguo 18/02/2017, 10:48
 
Fecha de Ingreso: febrero-2012
Ubicación: Cancun
Mensajes: 79
Antigüedad: 12 años, 9 meses
Puntos: 0
Menú vertical con desplazamiento botón arriba, boton abajo

Buenas Gente! Saludos!

Hace días que trato de crear un menú vertical como el que muestro a continuación, pero en vez de que se muestre la barra de desplazamiento, pueda agregar un botón arriba y otro abajo para subir o bajar los botones del menú, como flechas.

No tengo experiencia en diseño, podrían echarme una mano? Gracias!

Código HTML:
Ver original
  1. <!Doctype html>
  2. .vertical-menu {
  3.     width: 200px;
  4.     height: 150px;
  5.     overflow-y: auto;
  6. }
  7.  
  8. .vertical-menu a {
  9.     background-color: #eee;
  10.     color: black;
  11.     display: block;
  12.     padding: 12px;
  13.     text-decoration: none;
  14. }
  15.  
  16. .vertical-menu a:hover {
  17.     background-color: #ccc;
  18. }
  19.  
  20. .vertical-menu a.active {
  21.     background-color: #4CAF50;
  22.     color: white;
  23.  
  24.  
  25.  
  26. <h1>LENGUAJES</h1>
  27.  
  28. <div class="vertical-menu">
  29.   <a href="#" class="active">PHP</a>
  30.   <a href="#">JAVA</a>
  31.   <a href="#">PYTHON</a>
  32.   <a href="#">C#</a>
  33.   <a href="#">C++</a>
  34.   <a href="#">JAVASCRIPT</a>
  35.   <a href="#">C</a>
  36.   <a href="#">PERL</a>
  37.   <a href="#">VISUAL BASIC</a>
  38. </div>
  39.  
  40. </body>
  41. </html>
  #2 (permalink)  
Antiguo 18/02/2017, 15:19
 
Fecha de Ingreso: noviembre-2015
Mensajes: 231
Antigüedad: 9 años
Puntos: 86
Respuesta: Menú vertical con desplazamiento botón arriba, boton abajo

Necesitarás de javascript.

Una leve aproximación
Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <html dir="ltr" lang="es-es">
  3.     <head>
  4.         <title></title>
  5.         <meta charset="utf-8">
  6.         <meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1">
  7.         <style>
  8. .vertical-menu {
  9.     width: 200px;
  10.     height: 150px;
  11.     overflow: hidden;
  12. }
  13.  
  14. .vertical-menu .contenedor a {
  15.     background-color: #eee;
  16.     color: black;
  17.     display: block;
  18.     padding: 12px;
  19.     text-decoration: none;
  20. }
  21.  
  22. .vertical-menu .contenedor a:hover {
  23.     background-color: #ccc;
  24. }
  25.  
  26. .vertical-menu .contenedor a.active {
  27.     background-color: #4CAF50;
  28.     color: white;
  29. }
  30.  
  31. .contenedor {
  32.     position: relative;
  33. }
  34.  
  35. .flechas {
  36.     float: right;
  37.     width: 3rem;
  38.     height: 100%;
  39.     position: relative;
  40.     background: rgb(255, 0, 0);
  41.     z-index: 1;
  42. }
  43.  
  44. .up {
  45.     position: absolute;
  46.     top: 0;
  47. }
  48.  
  49. .down {
  50.     position: absolute;
  51.     bottom: 0;
  52. }
  53.         </style>
  54.         <script>
  55.  
  56.         </script>
  57.     </head>
  58.     <body>
  59. <h1>LENGUAJES</h1>
  60.  
  61. <div class="vertical-menu">
  62.     <div class="flechas">
  63.     <span class="up">UP</span>
  64.     <span class="down">DOWN</span>
  65. </div>
  66.     <div class="contenedor">
  67.   <a href="#" class="active">PHP</a>
  68.   <a href="#">JAVA</a>
  69.   <a href="#">PYTHON</a>
  70.   <a href="#">C#</a>
  71.   <a href="#">C++</a>
  72.   <a href="#">JAVASCRIPT</a>
  73.   <a href="#">C</a>
  74.   <a href="#">PERL</a>
  75.   <a href="#">VISUAL BASIC</a>
  76. </div>
  77. </div>
  78.  
  79.  
  80.  
  81. document.addEventListener('DOMContentLoaded', function() {
  82.  
  83.     var vertical_menu = document.querySelector('.vertical-menu'),
  84.     contenedor = document.querySelector('.contenedor'),
  85.     alto_cont = contenedor.offsetHeight - vertical_menu.offsetHeight,
  86.     pos = 0;
  87.  
  88.     document.querySelector('.flechas').addEventListener('click', function(event) {
  89.  
  90.         if (event.target.tagName == 'SPAN') {
  91.  
  92.             if (event.target.className == 'up') {
  93.                 pos = parseInt(pos + 40);
  94.             } else {
  95.                 pos = parseInt(pos - 40);
  96.             }
  97.  
  98.             pos = (Math.abs(pos) > alto_cont) ? -alto_cont : pos;
  99.             pos = (pos <= 0) ? pos : 0;
  100.            contenedor.style.top = pos + 'px';
  101.        }
  102.    });
  103.  
  104. });
  105.  
  106.  
  107.     </body>
  108. </html>
  #3 (permalink)  
Antiguo 18/02/2017, 15:53
 
Fecha de Ingreso: febrero-2012
Ubicación: Cancun
Mensajes: 79
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: Menú vertical con desplazamiento botón arriba, boton abajo

Hola mpozo! Genial! Era lo que buscaba, ahora seguiré modificando el css hasta encontrar lo que quiero, pero gracias a tu ayuda!

Gracias! Saludos!
  #4 (permalink)  
Antiguo 04/03/2017, 08:10
 
Fecha de Ingreso: noviembre-2015
Mensajes: 231
Antigüedad: 9 años
Puntos: 86
Respuesta: Menú vertical con desplazamiento botón arriba, boton abajo

He tenido algo de tiempo y editado el código para hacer algo mas aceptable
Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <html dir="ltr" lang="es-es">
  3.     <head>
  4.         <title></title>
  5.         <meta charset="utf-8">
  6.         <meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1">
  7.         <style>
  8.             .contenedor {
  9.                 width: 200px;
  10.                 height: 169px;
  11.                 border: 1px solid rgb(123, 109, 109);
  12.                 background-color: rgb(238, 238, 238);
  13.                 overflow: hidden;
  14.             }
  15.  
  16.  
  17.             .contenido {
  18.                 position: relative;
  19.             }
  20.  
  21.             .contenido ul {
  22.                 list-style: none;
  23.                 margin: 0;
  24.                 padding: 0;
  25.             }
  26.  
  27.  
  28.             .contenido a {
  29.                 background-color: rgb(238, 238, 238);
  30.                 color: rgb(0, 0, 0);
  31.                 display: block;
  32.                 padding: 12px;
  33.                 text-decoration: none;
  34.             }
  35.              
  36.             .contenido a:hover {
  37.                 background-color: rgb(204, 204, 204);
  38.             }
  39.              
  40.             .contenido a.active {
  41.                 background-color: rgb(76, 175, 80);
  42.                 color: rgb(255, 255, 255);
  43.             }
  44.  
  45.  
  46.             .flechas {
  47.                 float: right;
  48.                 width: .9rem;
  49.                 height: 100%;
  50.                 position: relative;
  51.                 color: rgb(91, 95, 94);
  52.                 background-color: rgb(181, 176, 176);
  53.                 cursor: default;
  54.                 z-index: 1;
  55.                 display: flex;
  56.                 flex-direction: column;
  57.                 flex-wrap: wrap;
  58.             }
  59.  
  60.  
  61.             .flechas div {
  62.                 width: inherit;
  63.                 height: auto;
  64.                 background-color: rgb(181, 176, 176);
  65.                 flex-grow: 1;
  66.             }
  67.  
  68.  
  69.             .flechas div div {
  70.                 width: inherit;
  71.                 height: 0;
  72.                 background-color: rgb(99, 99, 99);
  73.             }
  74.  
  75.  
  76.             .up, .down {
  77.                 width: inherit;
  78.             }
  79.  
  80.  
  81.             .up:after {
  82.                 content: "\25B2";
  83.             }
  84.  
  85.  
  86.             .down:after {
  87.                 content: "\25BC";
  88.             }
  89.  
  90.         </style>
  91.         <script>
  92.             document.addEventListener('DOMContentLoaded', function() {
  93.  
  94.                 new combox({
  95.                     contenedor : document.querySelector('.contenedor'),
  96.                     velocidad : 100
  97.                 });
  98.             });
  99.  
  100.  
  101.             function combox(params) {
  102.  
  103.                 this.contenedor = params.contenedor;
  104.                 this.contenido = this.contenedor.lastElementChild;
  105.                 this.contenedorH = this.contenedor.clientHeight;
  106.                 this.contenidoH = this.contenido.offsetHeight;
  107.  
  108.                 if (this.contenedorH >= this.contenidoH) return false;
  109.  
  110.                 this.totalSlide = this.contenidoH - this.contenedorH;
  111.                 this.objetivo = null;
  112.                 this.carril = this.contenedor.firstElementChild.querySelectorAll('*')[1];
  113.                 this.barra = this.carril.firstElementChild;
  114.                 this.carrilH = this.carril.offsetHeight;
  115.                 this.pos = 0;
  116.                 this.vueltas = 1;
  117.                 this.intervalo = null;
  118.                 this.velocidad = this.contenedorH / params.velocidad;
  119.                 this.posicion = 0;
  120.                 this.avanza = 0;
  121.  
  122.                 var _this = this;
  123.  
  124.                 this.contenedor.firstElementChild.addEventListener('click', function(event) {
  125.  
  126.                     _this.objetivo = event.target,
  127.                     _thiss = this;
  128.  
  129.                     if (_this.objetivo != this) {
  130.  
  131.                         clearInterval(_this.intervalo);
  132.  
  133.                         _this.intervalo = setInterval(function() {
  134.  
  135.                             _this.avanza = _this.velocidad * _this.vueltas;
  136.  
  137.                             if (_this.avanza <= _this.contenedorH) {
  138.  
  139.                                if (_this.objetivo == _thiss.firstElementChild) {
  140.  
  141.                                    _this.posicion = _this.pos - _this.avanza;
  142.  
  143.                                } else {
  144.  
  145.                                    _this.posicion = _this.pos + _this.avanza;
  146.                                }
  147.  
  148.                                ++_this.vueltas;
  149.  
  150.                                if (_this.posicion <= 0 || _this.posicion > _this.totalSlide) {
  151.  
  152.                                     _this.posicion = (_this.posicion <= 0) ? 0 : _this.totalSlide;
  153.                                    _this.vueltas = 1;
  154.                                    _this.pos = _this.posicion;
  155.                                    clearInterval(_this.intervalo);
  156.                                }
  157.  
  158.                                _this.contenido.style.top = -_this.posicion + 'px';
  159.                                _this.barra.style.height = _this.carrilH * (((_this.posicion * 100) / _this.totalSlide) / 100) + 'px';
  160.  
  161.                            } else {
  162.  
  163.                                _this.vueltas = 1;
  164.                                _this.pos = _this.posicion;
  165.                                clearInterval(_this.intervalo);
  166.                            }
  167.  
  168.                        }, 1);
  169.                    }
  170.                });
  171.            }
  172.        </script>
  173.     </head>
  174.     <body>
  175.  
  176.         <div class="contenedor">
  177.             <div class="flechas">
  178.                 <span class="up"></span>
  179.                 <div>
  180.                     <div></div>
  181.                 </div>
  182.                 <span class="down"></span>
  183.             </div>
  184.             <nav class="contenido">
  185.                 <ul>
  186.                     <li><a href="#" class="active">PHP</a></li>
  187.                     <li><a href="#">JAVA</a></li>
  188.                     <li><a href="#">PYTHON</a></li>
  189.                     <li><a href="#">C#</a></li>
  190.                     <li><a href="#">C++</a></li>
  191.                     <li><a href="#">JAVASCRIPT</a></li>
  192.                     <li><a href="#">C</a></li>
  193.                     <li><a href="#">PERL</a></li>
  194.                     <li><a href="#">VISUAL BASIC</a></li>
  195.                 </ul>
  196.             </nav>
  197.         </div>
  198.  
  199.     </body>
  200. </html>

Etiquetas: abajo, arriba, boton, desplazamiento, javascript, vertical
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:03.