Q&A
横スクロールメニューの実装をしたく、
アップルのサイトで実装されている横スクロールメニューの実装をしたいです。
https://www.apple.com/jp/iphone/
スクロールができる領域になったら右にクリックできる矢印が出現、
右矢印をクリックしたら、右に移動。
右に移動すると左にクリックできる矢印が出現。
右端にいくと右にクリックできる矢印を非表示、左端にいくと左にクリックできる矢印を非表示。
jsを覗いたのですが、javascriptをゴリゴリ書けるほどの知識がなく、
解読が不可能と判断しました。
どなたか再現可能な方いましたらご教授願いたいです。
よろしくお願いします。
回答1件
0
ベストアンサー
Appleそっくり実装したいんだったら
HTML
1<!DOCTYPE html> 2<html> 3<head> 4<meta name="viewport" 5content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 6<meta name="format-detection" content="telephone=no"> 7<style> 8html,body { 9margin: 0; 10} 11.gnav { 12 width: 100%; 13 background: #141414; 14 overflow-x: auto; 15 overflow-y: hidden; 16 -webkit-overflow-scrolling: touch; 17 position: fixed; 18} 19.gnav ul { 20 width: 800px; 21 margin: 5px auto 7px auto; 22 list-style: none; 23 display: flex; 24} 25.gnav ul li { 26 text-align: center; 27} 28.gnav ul li a, 29.gnav ul li a:link, 30.gnav ul li a:visited { 31 display: inline-block; 32 width: 96px; 33 background: #141414; 34 color: #fff; 35 text-decoration: none; 36} 37.gnav ul li a:hover, 38.gnav ul li a:active { 39 background: #141414; 40} 41</style> 42</head> 43<body> 44<div class="gnav"> 45<ul> 46<li><a href="#">menu1</a></li> 47<li><a href="#">menu2</a></li> 48<li><a href="#">menu3</a></li> 49<li><a href="#">menu4</a></li> 50<li><a href="#">menu5</a></li> 51<li><a href="#">menu6</a></li> 52<li><a href="#">menu7</a></li> 53<li><a href="#">menu8</a></li> 54</ul> 55<!--gnav--></div> 56</body> 57</html>
投稿2018/12/06 14:12
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/12/06 14:12
2018/12/06 14:39
退会済みユーザー
2018/12/06 21:59
退会済みユーザー
2018/12/07 14:02 編集
2018/12/08 05:17 編集