Skip to content

Instantly share code, notes, and snippets.

@essivision
Created May 14, 2018 07:37
Show Gist options
  • Save essivision/299fbfd908477dc04e4a57df4161ad96 to your computer and use it in GitHub Desktop.
Save essivision/299fbfd908477dc04e4a57df4161ad96 to your computer and use it in GitHub Desktop.
NMzJjr
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="row menu">
<div class="col-xs">
<a href="" class="item" id="">menu 1</a>
</div>
<div class="col-xs">
<a href="" class="item" id="">menu 2</a>
</div>
<div class="col-xs">
<a href="" class="item" id="">menu 3</a>
</div>
<div class="col-xs">
<a href="" class="item" id="">menu 4</a>
</div>
<div class="col-xs">
<a href="" class="item" id="">menu 5</a>
</div>
<div class="col-xs">
<a href="" class="item" id="">menu 6</a>
</div>
<div class="col-xs">
<a href="" class="item" id="">menu 7</a>
</div>
</div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clarity-icons/0.10.27/clarity-icons.min.js"></script>
[class*='col-']{
padding:1em;
background-color: #ddd;
margin: 0.5em;
}
.menu {
position: relative;
flex-wrap: nowrap;
width: 100%;
overflow-y: hidden;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
/* .menu:before{
content: ' ';
position: absolute;
background: linear-gradient(to left, rgb(255, 255, 255) 0%, rgba(255,255,255,0) 10%);
left:0;
top: 0;
width: 100vh;
height: 100%;
z-index: 10;
} */
.menu:before{
content: ' ';
position: absolute;
background: linear-gradient(to right, rgb(255, 255, 255) 0%, rgba(255,255,255,0) 10%, rgba(255,255,255,0) 90% , rgba(255,255,255,1) 100%);
right:0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
}
::-webkit-scrollbar {
width: 1px;
height: 1px;
}
::-webkit-scrollbar-button {
width: 1px;
height: 1px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/clarity-ui/0.10.27/clarity-ui.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/clarity-icons/0.10.27/clarity-icons.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment