Tema: Menú vertical con desplazamiento botón arriba, boton abajo
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 18/02/2017, 15:19
mpozo
 
Fecha de Ingreso: noviembre-2015
Mensajes: 231
Antigüedad: 9 años, 1 mes
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. <script>
  81.  
  82. document.addEventListener('DOMContentLoaded', function() {
  83.  
  84.     var vertical_menu = document.querySelector('.vertical-menu'),
  85.     contenedor = document.querySelector('.contenedor'),
  86.     alto_cont = contenedor.offsetHeight - vertical_menu.offsetHeight,
  87.     pos = 0;
  88.  
  89.     document.querySelector('.flechas').addEventListener('click', function(event) {
  90.  
  91.         if (event.target.tagName == 'SPAN') {
  92.  
  93.             if (event.target.className == 'up') {
  94.                 pos = parseInt(pos + 40);
  95.             } else {
  96.                 pos = parseInt(pos - 40);
  97.             }
  98.  
  99.             pos = (Math.abs(pos) > alto_cont) ? -alto_cont : pos;
  100.             pos = (pos <= 0) ? pos : 0;
  101.             contenedor.style.top = pos + 'px';
  102.         }
  103.     });
  104.  
  105. });
  106.  
  107. </script>
  108.  
  109.     </body>
  110. </html>