水平菜單與溢出淡入淡出效果

我正在使用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

來源

2016-11-19 Dawid Zbiński

您可以使用:before和:after元素。（例如，在width:100vh的div上）您在屏幕左側顯示一個漸變，右側顯示一個漸變。

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％。

來源

2016-11-19 16:43:23 Kangouroops

謝謝，我已經管理好了，但如果可以的話，請添加到你的答案中，'.navbar'應該有'overflow-x：auto;'和'white-space：nowrap'以及'.navbar-列表「應該是100％寬。 –

你希望是我的命令！ ;） – Kangouroops

太棒了！謝謝。這只是爲了防止有人遇到同樣的問題纔會看這個。 –

水平菜單與溢出淡入淡出效果

回答

相關問題