Horizontales Menü mit Überblendungseffekt bei Überlauf

Ich benutze CSS3/SASS und möchte möglichst kein Javascript verwenden. Ich versuche, ein horizontales Menü zu erstellen, in dem overflow-x auf der rechten Seite einen schönen Fade-Effekt erzeugen würde, so dass der Benutzer auf mobilen Geräten wissen würde, dass er es von links nach rechts bewegen kann. HierHorizontales Menü mit Überblendungseffekt bei Überlauf

ist, was ich versuche zu erreichen:

... wie Sie auf dem Bild, der Text auf der rechten Seite ausgeblendet wird ein wenig sehen können und es natürlich , ist ein Menüeintrag OPTION3 (also übergelaufen).

Bis jetzt habe ich das Menü, aber ich habe wirklich keine Ahnung von den Überläufen und den Tricks mit ihnen.

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

Quelle

2016-11-19 Dawid Zbiński

können Sie die :before und :after Elemente verwenden. (auf einem Div mit width:100vh zum Beispiel) Sie zeigen einen Farbverlauf auf der linken Seite des Bildschirms und einen auf der rechten Seite.

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);

Auf diese Weise haben Sie einen Farbverlauf, der an den Rändern Ihres Menüs schwebt.

Um präzise ein bisschen mehr,

.navbar sollte overflow-x: auto; white-space: nowrap; und navbar-list sollte 100% breit sein.

Quelle

2016-11-19 16:43:23 Kangouroops

danke, ich habe es bereits geschafft, aber wenn du kannst, füge bitte zu deiner Antwort hinzu, dass die '.navbar' 'overflow-x: auto;' und 'white-space: nowrap' und auch' .navbar- haben sollte. Liste "sollte 100% breit sein. –

Sie wünschen, ist mein Befehl! ;) – Kangouroops

Großartig! Vielen Dank. Es ist nur für den Fall, dass jemand mit dem gleichen Problem einen Blick darauf werfen wird. –

Horizontales Menü mit Überblendungseffekt bei Überlauf

Antwort

Verwandte Themen