4

Quiero saber cómo puedo hacer un menú que tenga un tamaño chico a primera vista, con un enlace visible en el centro, y que al pasar el cursor del ratón por encima del menú, éste se expanda hacia los lados y le aparezcan dos enlaces más adentro suyo, uno de cada lado. Ya probé con JavaScript y CSS y no pude lograrlo. No sé jQuery, así que agradecería que usen JavaScript nativo en todo caso.

Mi idea fue usar un div y tres elementos afuera del div (uno en el centro del div visible desde el principio y los de los lados ocultos), todo con posición absoluta, y transiciones con CSS para que se expanda el div, que es el "fondo" del menú, y después, cuando el div se expandiera lo suficiente haría visibles los elementos de los lados que pude, pero no puedo hacerlos invisibles otra vez a tiempo cuando el cursor sale del div.

                                    Normal:
                           _______________________
                          |                       |
                          |          <a>          |
                          |_______________________|

                                   MouseOver:
         ____________________________________________________________
        |                                                            |
        |      <a>                   <a>                    <a>      |
        |____________________________________________________________|

                                   MouseOut:
                           _______________________
                          |                       |
                          |          <a>          |
                          |_______________________|

Debería pasar como en el gráfico, pero con 0.2s de transition en CSS, que es lo que tarda en expandirse y contraerse. Los enlaces de los lados deberían aparecer justo después de que se termina de expandir el div, y desaparecer justo luego de que sale el cursor del mismo.

CSS del div:

.menu {
    position: absolute;
    width:20%;
    left:40.25%;
    height: 10%;
    top: 0.75%;
    border-radius:30px;
    background: url('imagenes/banner.jpg') center center;
    background-position: 0px 0px;
    box-shadow:0 0 4px 2px #EEE;
    transition: all 0.2s;
}

Los enlaces, solamente tienen coordenadas y estilos de texto, así que no considero relevante poner su CSS acá. Lo que sí, los de los lados tienen visibility: hidden de manera predeterminada.

  • El id del div es menu.
  • El enlace del medio es Everant, el que siempre es visible.
  • Los enlaces invisibles son teoria y practica, que aparecen cuando se expande el menú.

Javascript:

var overText = false;

function gbId(id) {
    return document.getElementById(id);
}
function Enlarge() {
    var menu = gbId('menu');
    var teoria = gbId('teoria');
    var practica = gbId('practica');
    var i = 0;
    var t = null;

    menu.style.width = '60%';
    menu.style.left = '20%';

    t = setInterval(function(){
        if (i == 20) {
            teoria.style.visibility = 'visible';
            practica.style.visibility = 'visible';
            t = clearInterval(t);
            i = 0;
        }
        i++;
    }, 1);
}
function Minimize() {
    var menu = gbId('menu');
    var teoria = gbId('teoria');
    var practica = gbId('practica');

    menu.style.width = '20%';
    menu.style.left = '40.25%';
    teoria.style.visibility = 'hidden';
    practica.style.visibility = 'hidden';
}
function Lock() {
    var menu = gbId('menu');
    menu.style.width = '60%';
    menu.style.left = '20%';
    teoria.style.visibility = 'visible';
    practica.style.visibility = 'visible';
    overText = true;
}
function Unlock() {
    if (overText) {
        var menu = gbId('menu');
        menu.style.width = '20%';
        menu.style.left = '40.25%';
        teoria.style.visibility = 'hidden';
        practica.style.visibility = 'hidden';
        overText = false;
    }
}

2 respuestas 2

3

Esto lo podrías realizar solamente con CSS con una lista (ul) y en cada uno de los elementos (li) darles la propiedad para que actúen como inline-block. De esta manera, los pondrás a todos en una misma línea.

Después puedes utilizar una clase para que se muestren o no con visibility: hidden; o visibility: visible dependiendo de si estás pasando por encima del link principal o no.

Por último, como todavía no existen selectores para mostrar todos los elementos anteriores a otro (por ejemplo si pasamos por el link principal podremos mostrar el link de la derecha mediante selectores pero no el de la izquierda), lo que puedes realizar es poner el link principal el primero y cambiar el orden con respecto a los otros dos. Para ello puedes usar flexbox.

Le he puesto color a los links para que se vea mejor.

Ejemplo:

/* Hacemos que la lista actúe como flexbox */
ul{
  display: flex;
}

/* Cambiamos el orden a los elementos */
#primerLink{
  order: 1;
}

#principal{
  order: 2;
}

#segundoLink{
  order: 3;
}

/* Indicamos que cada uno de los elementos sea inline-block */
.menu{
  display: inline-block;
  background-color: red;
  border: 1px solid;
  height: 40px;
  color: white;
}

/* Escondemos los links de los lados */
.escondido{
  visibility: hidden;
}

/* Mostramos los links de los lados cuando pasamos por encima del principal */
#principal:hover ~ li{
  visibility: visible;
}
<ul>
  <li id="principal" class="menu"><a href="#">Principal</a></li>
  <li id="primerLink" class="menu escondido"><a href="#">Link1</a></li>
  <li id="segundoLink" class="menu escondido"><a href="#">Link2</a></li>
</ul>

7
  • Quiero comentar un código nuevo que hice a partir del tuyo y no me deja porque es muy largo, cómo hago?
    – Marz
    Commented el 7 dic. 2016 a las 14:59
  • @Marz Puedes crear un jsfiddle, guardarlo y poner el link en un comentario. Si le das al Save tendrás que copiar el link que te aparece en la url. La página de la que te hablo es esta: jsfiddle.net Commented el 7 dic. 2016 a las 15:15
  • jsfiddle.net/t978pzfL ahí está. Igual ahora que lo veo, en una pantalla con medidas distintas a la mía el gráfico no se ve bien >.< qué difícil que es manejar bien las proporciones. Lo único que me pasa, aparte de lo de las proporciones, es que el primer link no permanece visible al pasarle el cursor encima al segundo, y seguramente es porque está antes que él en el html, pero no sé cómo hacer para seleccionarlo, intenté con js pero no me salió bien.
    – Marz
    Commented el 7 dic. 2016 a las 16:19
  • @Marz Si no entiendo mal lo que quieres hacer es que al pasar por el segundo link (el de la derecha) se mantenga también el primero visible, ¿no? Commented el 7 dic. 2016 a las 16:23
  • Ajam, y también mantener las proporciones del menú sin importar las medidas de la pantalla.
    – Marz
    Commented el 7 dic. 2016 a las 16:34
2

Tengo algo que te puede servir, pero tienes que mejorarlo porque solamente se desocultan los elementos siguientes al que haces hover, incluyéndolo. Te recomiendo el uso de jQuery para esto. De todas formas, esto te puede servir como punto de partida y tiene incluida una pequeña transición.

.menu {
    position: relative;
    padding: 5px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.4);
    width: -moz-max-content;
    list-style: none;
    display: inline;
    margin-left: 5px;
    cursor: pointer;
    opacity: 1;
    transition: all 500ms;
}

.menu:not(:first-child) {
    visivility: none;
    opacity: 0;
    margin-left: 0px;
}

.menu:hover, .menu:hover ~ .menu {
    opacity: 1;
    margin-left: 5px;
}

.

<ul>
    <li class="menu"> Opcion A </li>
    <li class="menu"> Opcion B </li>
    <li class="menu"> Opcion C </li>
</ul>
1
  • Gracias, lo de la opacidad me dio la idea de usarla para esto, da un efecto muy bonito n.n En cuanto a lo otro, estoy usando lo que me comentó Error404
    – Marz
    Commented el 7 dic. 2016 a las 6:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.