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

agustinpak · #1 (**permalink**) 18/02/2017, 10:48

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<!Doctype html>
<html>
<style>
.vertical-menu {
    width: 200px;
    height: 150px;
    overflow-y: auto;
}
 
.vertical-menu a {
    background-color: #eee;
    color: black;
    display: block;
    padding: 12px;
    text-decoration: none;
}
 
.vertical-menu a:hover {
    background-color: #ccc;
}
 
.vertical-menu a.active {
    background-color: #4CAF50;
    color: white;
 
 
</style>
<body>
 
<h1>LENGUAJES</h1>
 
<div class="vertical-menu">
  <a href="#" class="active">PHP</a>
  <a href="#">JAVA</a>
  <a href="#">PYTHON</a>
  <a href="#">C#</a>
  <a href="#">C++</a>
  <a href="#">JAVASCRIPT</a>
  <a href="#">C</a>
  <a href="#">PERL</a>
  <a href="#">VISUAL BASIC</a>
</div>
 
</body>
</html>

mpozo · #2 (**permalink**) 18/02/2017, 15:19

Necesitarás de javascript.

Una leve aproximación

Código HTML:

Ver original<!DOCTYPE html>
<html dir="ltr" lang="es-es">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1">
        <style>
.vertical-menu {
    width: 200px;
    height: 150px;
    overflow: hidden;
}
 
.vertical-menu .contenedor a {
    background-color: #eee;
    color: black;
    display: block;
    padding: 12px;
    text-decoration: none;
}
 
.vertical-menu .contenedor a:hover {
    background-color: #ccc;
}
 
.vertical-menu .contenedor a.active {
    background-color: #4CAF50;
    color: white; 
}
 
.contenedor {
    position: relative;
}
 
.flechas {
    float: right;
    width: 3rem;
    height: 100%;
    position: relative;
    background: rgb(255, 0, 0);
    z-index: 1;
}
 
.up {
    position: absolute;
    top: 0;
}
 
.down {
    position: absolute;
    bottom: 0;
}
        </style>
        <script>
 
        </script>
    </head>
    <body>
<h1>LENGUAJES</h1>
 
<div class="vertical-menu">
    <div class="flechas">
    <span class="up">UP</span>
    <span class="down">DOWN</span>
</div>
    <div class="contenedor">
  <a href="#" class="active">PHP</a>
  <a href="#">JAVA</a>
  <a href="#">PYTHON</a>
  <a href="#">C#</a>
  <a href="#">C++</a>
  <a href="#">JAVASCRIPT</a>
  <a href="#">C</a>
  <a href="#">PERL</a>
  <a href="#">VISUAL BASIC</a>
</div>
</div>
 
 
<script>
 
document.addEventListener('DOMContentLoaded', function() {
 
    var vertical_menu = document.querySelector('.vertical-menu'),
    contenedor = document.querySelector('.contenedor'),
    alto_cont = contenedor.offsetHeight - vertical_menu.offsetHeight,
    pos = 0;
 
    document.querySelector('.flechas').addEventListener('click', function(event) {
 
        if (event.target.tagName == 'SPAN') {
 
            if (event.target.className == 'up') {
                pos = parseInt(pos + 40);
            } else {
                pos = parseInt(pos - 40);
            }
 
            pos = (Math.abs(pos) > alto_cont) ? -alto_cont : pos;
            pos = (pos <= 0) ? pos : 0;
            contenedor.style.top = pos + 'px';
        }
    });
 
});
 
</script>
 
    </body>
</html>

agustinpak · #3 (**permalink**) 18/02/2017, 15:53

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

Gracias! Saludos!

mpozo · #4 (**permalink**) 04/03/2017, 08:10

He tenido algo de tiempo y editado el código para hacer algo mas aceptable

Código HTML:

Ver original<!DOCTYPE html>
<html dir="ltr" lang="es-es">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1">
        <style>
            .contenedor {
                width: 200px;
                height: 169px;
                border: 1px solid rgb(123, 109, 109);
                background-color: rgb(238, 238, 238);
                overflow: hidden;
            }
 
 
            .contenido {
                position: relative;
            }
 
            .contenido ul {
                list-style: none;
                margin: 0;
                padding: 0;
            }
 
 
            .contenido a {
                background-color: rgb(238, 238, 238);
                color: rgb(0, 0, 0);
                display: block;
                padding: 12px;
                text-decoration: none;
            }
             
            .contenido a:hover {
                background-color: rgb(204, 204, 204);
            }
             
            .contenido a.active {
                background-color: rgb(76, 175, 80);
                color: rgb(255, 255, 255); 
            }
 
 
            .flechas {
                float: right;
                width: .9rem;
                height: 100%;
                position: relative;
                color: rgb(91, 95, 94);
                background-color: rgb(181, 176, 176);
                cursor: default;
                z-index: 1;
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
            }
 
 
            .flechas div {
                width: inherit;
                height: auto;
                background-color: rgb(181, 176, 176);
                flex-grow: 1;
            }
 
 
            .flechas div div {
                width: inherit;
                height: 0;
                background-color: rgb(99, 99, 99);
            }
 
 
            .up, .down {
                width: inherit;
            }
 
 
            .up:after {
                content: "\25B2";
            }
 
 
            .down:after {
                content: "\25BC";
            }
 
        </style>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
 
                new combox({
                    contenedor : document.querySelector('.contenedor'),
                    velocidad : 100
                });
            });
 
 
            function combox(params) {
 
                this.contenedor = params.contenedor;
                this.contenido = this.contenedor.lastElementChild;
                this.contenedorH = this.contenedor.clientHeight;
                this.contenidoH = this.contenido.offsetHeight;
 
                if (this.contenedorH >= this.contenidoH) return false;
 
                this.totalSlide = this.contenidoH - this.contenedorH;
                this.objetivo = null;
                this.carril = this.contenedor.firstElementChild.querySelectorAll('*')[1];
                this.barra = this.carril.firstElementChild;
                this.carrilH = this.carril.offsetHeight;
                this.pos = 0;
                this.vueltas = 1; 
                this.intervalo = null;
                this.velocidad = this.contenedorH / params.velocidad;
                this.posicion = 0;
                this.avanza = 0;
 
                var _this = this;
 
                this.contenedor.firstElementChild.addEventListener('click', function(event) {
 
                    _this.objetivo = event.target,
                    _thiss = this;
 
                    if (_this.objetivo != this) {
 
                        clearInterval(_this.intervalo);
 
                        _this.intervalo = setInterval(function() {
 
                            _this.avanza = _this.velocidad * _this.vueltas;
 
                            if (_this.avanza <= _this.contenedorH) {
 
                                if (_this.objetivo == _thiss.firstElementChild) {
 
                                    _this.posicion = _this.pos - _this.avanza;
 
                                } else {
 
                                    _this.posicion = _this.pos + _this.avanza;
                                }
 
                                ++_this.vueltas;
 
                                if (_this.posicion <= 0 || _this.posicion > _this.totalSlide) {
 
                                    _this.posicion = (_this.posicion <= 0) ? 0 : _this.totalSlide;
                                    _this.vueltas = 1;
                                    _this.pos = _this.posicion;
                                    clearInterval(_this.intervalo);
                                }
 
                                _this.contenido.style.top = -_this.posicion + 'px';
                                _this.barra.style.height = _this.carrilH * (((_this.posicion * 100) / _this.totalSlide) / 100) + 'px';
 
                            } else {
 
                                _this.vueltas = 1;
                                _this.pos = _this.posicion;
                                clearInterval(_this.intervalo);
                            }
 
                        }, 1);
                    }
                });
            }
        </script>
    </head>
    <body> 
 
        <div class="contenedor">
            <div class="flechas">
                <span class="up"></span>
                <div>
                    <div></div>
                </div>
                <span class="down"></span>
            </div>
            <nav class="contenido">
                <ul>
                    <li><a href="#" class="active">PHP</a></li>
                    <li><a href="#">JAVA</a></li>
                    <li><a href="#">PYTHON</a></li>
                    <li><a href="#">C#</a></li>
                    <li><a href="#">C++</a></li>
                    <li><a href="#">JAVASCRIPT</a></li>
                    <li><a href="#">C</a></li>
                    <li><a href="#">PERL</a></li>
                    <li><a href="#">VISUAL BASIC</a></li>
                </ul>
            </nav>
        </div>
 
    </body>
</html>