|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
@media screen and (min-width: 768px) { .main-menu .level1 > li:hover > a{ // On conserve l'aspect survolé de l'entrée de 1er niveau lorsque le curseur de la souris se trouve dans la zone du sous-menu. background-color: #fff; color: $site-font-color-darker; } .main-menu .level2{ position: absolute; z-index: 1000; left: 0; width: 100%; opacity: 0; visibility: hidden; transition: opacity 0.2s linear, visibility 0.2s linear; } .main-menu .level1 > li:hover > .level2{ opacity: 1; visibility: visible; } .main-menu .collapse{ // Bootstrap Collapse component reset (only needed for mobile devices) display: block; } } |
Étiquette : sélecteur adjacent
[jQuery][CSS] Menu horizontal : gérer l’apparition/disparition, au survol, de séparateurs à gauche et à droite d’un libellé
Nouvelle version en full-CSS (sans jQuery) à l’aide des pseudo-classes before/after et des sélecteurs adjacents
Source : demo JSFiddle.
|
1 2 3 4 5 6 |
<ul> <li><a href="">item </a></li> <li><a href="">item </a></li> <li><a href="">item </a></li> <li><a href="">item </a></li> </ul> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
ul { display: table; width: 100%; } li{ display: table-cell; position: relative; } a{ display: block; text-align: center; } a:before{ content:""; width: 1px; height: 25px; background: #000; display: inline-block; position: absolute; left: 0; } a:hover:before{ width: 0; } li:hover + li > a:before{ width: 0; } |
Ancienne version (avec jQuery)
Simulation : http://jsfiddle.net/frontenddeveloper/Db6AD/7/
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
jQuery(document).ready(function(){ // Menu horizontal : gérer l'apparition/disparition du séparateur au survol de la souris // Remplacer '#principal-nav' par l'id ou la classe qui définit le menu jQuery('#principal-nav .level1 > li').hover( function(){ jQuery(this).next('li').addClass('no-separator'); }, function(){ jQuery('#principal-nav .level1 li').removeClass('no-separator'); } ); // Cas du current jQuery('#principal-nav .level1 .current, #principal-nav .level1 .inpath').closest('li').next('li').addClass('current-no-separator'); }); |