Tema: Menú vertical con desplazamiento botón arriba, boton abajo
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 04/03/2017, 08:10
mpozo
 
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>