Nouvelle version en full-CSS (sans jQuery) à l’aide des pseudo-classes before/after et des sélecteurs adjacents
Source : demo JSFiddle.
|
|
<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/
|
|
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'); }); |