オーバーフローでフェード効果が発生する水平メニュー

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など） 画面の左側に1つのグラデーションが表示され、右側に1つのグラデーションが表示されます。

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％幅広でなければならなければなりません。