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
deldiv
esmenu
. - El enlace del medio es
Everant
, el que siempre es visible. - Los enlaces invisibles son
teoria
ypractica
, 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;
}
}