Горизонтальное меню с эффектом затухания при переполнении

Question

Я использую CSS3/SASS, и я не хотел бы использовать Javascript, если это возможно. Я пытаюсь сделать горизонтальное меню, в котором overflow-x будет делать хороший эффект затухания с правой стороны, поэтому пользователь на мобильных устройствах будет знать, что он может перемещать его влево-вправо.

Вот что я пытаюсь выполнить:

... как вы можете видеть на картинке текст на правой стороне быть затемнены немного, и там, конечно, , является пунктом меню OPTION3 (поэтому он переполнен).

До сих пор я получил меню, но я действительно понятия не имею о переполнениях и трюках с ними.

HTML:

<nav class="navbar"> 
    <ul class="navbar-list"> 
    <li class="navbar-item"><a href="#">about</a></li> 
    <li class="navbar-item"><a href="#">settings</a></li> 
    <li class="navbar-item"><a href="#">option1</a></li> 
    <li class="navbar-item"><a href="#">option2</a></li> 
    <li class="navbar-item"><a href="#">option3</a></li> 
    </ul> 
</nav> 

SASS:

.navbar 
    float: left 
    height: 40px 
    min-width: 100% 
    display: flex 
    flex-wrap: wrap 

    .navbar-item 
     padding: 13px 0px 
     font-size: 12px 
     line-height: 14px 
     text-transform: uppercase 
     display: inline-block 
     float: left 
     margin: 0px 10px 

     &.active 
      padding: 13px 0px 11px 0px 
      border-bottom: 2px solid $light-blue 

     &:hover 
      cursor: pointer 

     a 
      color: $dark-grey 
      font-weight: 600 
      text-decoration: none 

Answer 1

Вы можете использовать :before и :after элементы. (например, на div с width:100vh) Вы показываете один градиент слева от экрана и один справа.

content:''; 
    height: 100%; 
    width: 15%; 
    display:block; 
    position: absolute; 
    left: 0; 
    background: rgba(255,255,255,1); 
    background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); 
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0))); 
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); 
    background: -o-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); 
    background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); 
    background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1); 

Таким образом, у вас будет градиент, зависающий по краям вашего меню.

Для точного немного больше,

.navbar должны иметь overflow-x: auto; white-space: nowrap; и navbar-list должны быть на 100% в ширину.