|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="TriProduct"> <span class="Filters-facets__title js-filter-title">Trier par</span> <ul class="Filters-facets__list"> <li> <a class="nameFilter" href="">Prix</a> </li> <li> <a class="nameFilter selected>Nouveautés</a> </li> </ul> <i class="icon icon-chevron-down"></i> </div> |
|
1 2 3 4 5 6 |
$('.TriProduct ul.Filters-facets__list').after('<i class="icon icon-chevron-down" />'); $('.TriProduct ul.Filters-facets__list + i.icon').on('click', function(){ $('.TriProduct ul.Filters-facets__list a.nameFilter').each(function(){ $(this).toggleClass('is-shown'); }); }); |
|
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
.TriProduct{ position: relative; .Filters-facets__title, .Filters-facets__list{ display: inline-block; } .Filters-facets__title{ font-family: $corporate-font-bold; &:after{ content: ":"; display: inline-block; margin: 0 8px; } } .Filters-facets__list{ vertical-align: top; min-width: 90px; border-bottom: 1px solid #000; position: absolute; .nameFilter{ position: absolute; display: block; background-color: #fff; padding: 0 2px; left: -99999em; text-decoration: none; color: $site-font-color; &.selected, &.is-shown{ position: relative; left: 0; } &.selected{ // text-decoration: underline; } } + .icon{ font-size: .6rem; padding-left: 6px; position: relative; left: 100%; &:hover{ cursor: pointer; } &:before{ position: relative; top: -3px; } } } } |