最近よく見る、スマホのときに横スクロールをするメニュー。
作り方をメモしたいと思います!
実装図・メリット
イメージとしては、PCでは一般的なメニューになり、
画面の横幅が狭くなると、こんな感じで横スクロールをするようになるメニューです。
ちなみに、同じコードをはてなブログのスマホの方に入れると、こんな感じになります(動きは上と同じです)。
このメニューのメリットとしては、
- トグルメニューのようにタップしなくても、はじめから数個のカテゴリが見えている
- Javascriptを使っていないので、回線が不安定なところでも比較的表示が崩れにくい
- はてなブログ以外でも使える
逆にデメリットは、
- スクロールできるのか気付かれないかもしれない
- 狭い範囲での操作となるので、誤タップを誘発するかもしれない
- スクロールしたときに、右側に隙間ができてしまう
多分最後の隙間ができてしまうのは、僕の技術不足によるものです^^;。かなりいろいろ試してみたのですが、結局できませんでした。ということで、もし分かる方がいましたら、ご教授いただけると助かりますm( )m
カスタマイズ
レスポンシブ(PC+スマホ)
カスタマイズは、以下のコードを「タイトル下」の部分に入れていただくとできます。今回はHTMLとCSSを一緒に書いてしまいました。
<nav id="scroll-menu"> <ul class="scroll-menu-inner"> <li><a href="">カテゴリ1</a></li> <li><a href="">カテゴリ2</a></li> <li><a href="">カテゴリ3</a></li> <li><a href="">カテゴリ4</a></li> <li><a href="">カテゴリ5</a></li> <li><a href="">カテゴリ6</a></li> <li><a href="">カテゴリ7</a></li> <li><a href="">カテゴリ8</a></li> <li><a href="">カテゴリ9</a></li> <li><a href="">カテゴリ10</a></li> </ul> </nav> <style> #scroll-menu { height: 40px;/*メニューの縦幅*/ background-color: #444;/*メニューの背景色*/ } #scroll-menu .scroll-menu-inner { list-style-type: none; width: 1000px;/*メニューの横幅*/ height: 100%; margin: 0 auto; padding: 0; text-align: center; } #scroll-menu li { float: left; height: 100%; } #scroll-menu a { display: block; height: 100%; padding-right: 15px; padding-left: 15px; color: #fff;/*文字色*/ font-size: 70%; font-weight: bold; text-decoration: none; line-height: 40px;/*メニューの縦幅*/ } #scroll-menu a:hover { background-color: #555;/*マウスホバー時の背景色*/ } @media screen and (max-width: 1000px) {/*メニューの横幅*/ #scroll-menu { overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; } #scroll-menu .scroll-menu-inner { margin: 0; } } </style>
上のコードを入れた後、「カテゴリ1」などのところに文字を、「href=""」のところに、対応するURLを入れてってください。
以上でカスタマイズは終了です。
スマホ
スマホの場合は上とほとんど同じなので、「タイトル下」の「PCと同じHTMLを入れる」を押していただくと、同じものが出てきます。
違うカテゴリを入れたいなどの事情で再度HTMLを入れる場合は、下のコード
<nav id="scroll-menu"> <ul class="scroll-menu-inner"> <li><a href="">カテゴリ1</a></li> <li><a href="">カテゴリ2</a></li> <li><a href="">カテゴリ3</a></li> <li><a href="">カテゴリ4</a></li> <li><a href="">カテゴリ5</a></li> <li><a href="">カテゴリ6</a></li> <li><a href="">カテゴリ7</a></li> <li><a href="">カテゴリ8</a></li> <li><a href="">カテゴリ9</a></li> <li><a href="">カテゴリ10</a></li> </ul> </nav> <style> #scroll-menu { height: 40px;/*メニューの縦幅*/ background-color: #444;/*メニューの背景色*/ overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; } #scroll-menu .scroll-menu-inner { list-style-type: none; width: 1000px;/*メニューの横幅*/ height: 100%; margin: 0; padding: 0; text-align: center; } #scroll-menu li { float: left; height: 100%; } #scroll-menu a { display: block; height: 100%; padding-right: 15px; padding-left: 15px; color: #fff;/*文字色*/ font-size: 70%; font-weight: bold; text-decoration: none; line-height: 40px;/*メニューの縦幅*/ } #scroll-menu a:active { background-color: #555;/*クリック時の背景色*/ } </style>
を入れて、同じようにリンクなどを入れていただくとできます。
その他のカスタマイズ
色の変更
デフォルトでは、黒背景に白文字にしています。
色を変えたい場合は、コードの中に該当する箇所のコメントを入れてありますので、原色大辞典
などを参考に、変えてみてください。
メニューの横幅・縦幅の変更
メニューの横幅・縦幅を変更する場合も、コード内にコメントを入れてありますので、そこの数字を変えてみてください。
注意点としては、それぞれ変更する場所が2箇所あります(スマホの方のコードは、横幅は1箇所です)。横幅なら横幅、縦幅なら縦幅で同じ値になるようにしていただくと、デザインの変更なくできると思います。
最後に
ということで、横にスライドするメニューの作り方でした。
不具合・改善点などありましたら、連絡いただけると嬉しいです!
はてなブログカスタマイズまとめはこちら