Bonjour,
J'ai un peu hésité à poster dans le forum CSS plutôt qu'ici...
Voilà mon soucis,
j'utilise jQuery pour cacher et afficher des divs, au survol d'autres div.
Ça fonctionne bien je suis content,
mais j'utiilise jQuery, et par soucis de performance, j'aurai aimé réussir à faire la même chose avec seulement du CSS (à la place de jQuery).
Je pensais y arriver avec des keyframes et animation, mais en fait je me demande si c'est vraiment possible... Je bloque complètement.
Ce qui est bloquant c'est que je dois afficher/cacher une div, quand je survol une AUTRE div.
À force de galérer je me demande si c'est vraiment possible...
J'ai fais une petite page de test pour avoir un visuel :
<!DOCTYPE html>
<head>
</head>
<body>
<div class="top-bar">
<div>
<span id="top-bar-menu-icon">MENU</span>
<span id="top-bar-user-icon">LOGIN</span>
</div>
</div>
<!-- les 2 "nav" qu'on veut afficher au survol -->
<!-- LOGIN -->
<nav id="menu-user">
<ul>
<li><a href="#">Connexion</a></li>
<li><a href="#">Inscription</a></li>
</ul>
</nav>
<!-- MENU -->
<nav id="menu">
<ul>
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
<li><a href="#">Lien 3</a></li>
</ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
slide_duration = 400;
/* *******************************
LOGIN
******************************* */
function show_user_menu()
{
$( '#menu' ).stop().slideUp(slide_duration);
$( '#menu-user' ).stop().slideDown(slide_duration);
}
function hide_user_menu()
{
setTimeout(function()
{
if ($( '#menu-user:hover' ).length == 0 && $( '#top-bar-user-icon:hover' ).length == 0)
{
$( '#menu-user' ).stop().slideUp(slide_duration);
}
}, 100);
}
$( '#top-bar-user-icon' ).hover(function () { show_user_menu(); });
$( '#top-bar-user-icon' ).mouseleave(function () { hide_user_menu(); });
$( '#menu-user' ).mouseleave(function () { hide_user_menu(); });
/* *******************************
MENU
******************************* */
function show_menu()
{
$( '#menu-user' ).stop().slideUp(slide_duration);
$( '#menu' ).stop().slideDown(slide_duration);
}
function hide_menu()
{
setTimeout(function()
{
if ($( '#menu:hover' ).length == 0 && $( '#top-bar-menu-icon:hover' ).length == 0)
{
$( '#menu' ).stop().slideUp(slide_duration);
}
}, 100);
}
$( '#top-bar-menu-icon' ).hover(function () { show_menu(); });
$( '#top-bar-menu-icon' ).mouseleave(function () { hide_menu(); });
$( '#menu' ).mouseleave(function () { hide_menu(); });
</script>
</body>
</html>
Même si vous me dites qu'on ne peut pas le faire,
alors c'est bien aussi, au moins j'arrêterai de me prendre la tête pour rien xD
Merci.