ドロップダウン式(縦方向の折り畳み式)のスマホ用メニューを簡単に設置できるスクリプトを作りました。
名称は「スマホメニュースクリプト」としておきます。
今後、私自身がサイトを作る際に使うために作ったので、設定は最低限で済むようにできています。
CSSが理解できる人なら自由にデザインを変更することが可能でしょう。
2019年4月11日追記：今ご覧になっているこのサイトを全面リニューアルするときに、このスクリプトを実際に組み込んで使用しました。
その際に組み込みにくい、または使いにくかった部分を修正してバージョン2.0にアップデートしました。
バージョン2.0では最低限の構成にしたので、どのようなサイトにもすぐに組み込みやすくなっています。
現在の最新バージョンは2019年4月11日公開の2.0です。
各バージョンごとのアップデート内容については、このページ最下部の「アップデート履歴」に記載してあります。
スマホメニュースクリプトのサンプル
初期状態ではスマホだけでなくPC表示の際にもドロップダウン式のメニューが表示されます。
スマホだけに適用したい場合は後述の「スマホだけに適用する方法」を参考にしてください。
スマホメニュースクリプトのダウンロード
最新バージョンがダウンロードできます。
まず、動作確認のために以下の作業から順番に確認していくと間違いがないでしょう。
1、スマホメニュースクリプトをダウンロードし、展開する。
2、フォルダごとサーバにアップロードする。
3、ブラウザでindex.htmlにアクセスし、動作を確認する。
以下の作業は同梱のindex.htmlのソースからコピーしていくと間違いがないでしょう。
4、組み込みたいページにメニューを用意する。
その要素にはmenuというid名を付けてください。
バージョン2.0からはul要素以外でも動作するようになりました。
<ul id="menu">
<li><a href="ここにページ1のURL">ページ1</a></li>
<li><a href="ここにページ2のURL">ページ2</a></li>
<li><a href="ここにページ3のURL">ページ3</a></li>
<li><a href="ここにページ4のURL">ページ4</a></li>
<li><a href="ここにページ5のURL">ページ5</a></li>
<li><a href="ここにページ6のURL">ページ6</a></li>
</ul>
5、ページ内のどこかに以下のコードを貼り付ける。
このコードが3本線のメニューアイコンになります。
上記手順4のid=”menu”の要素はCSSで非表示にしているので、その中以外の場所ならどこでもOKです。
<div id="sp-icon" class="sp-close"><span></span></div>
6、sp-menu.cssを読み込ませる。
このsp-menu.cssの設置場所はどこでも構いません。
サーバ上にすでにcssという名前のフォルダが存在しているのなら、その中に移動させても問題ありません。
<link rel="stylesheet" href="css/sp-menu.css" />
7、jQuery本体とsp-menu.jsを読み込ませる。
このsp-menu.jsの設置場所もどこでも構いません。
サーバ上にすでにjsという名前のフォルダが存在しているのなら、その中に移動させても問題ありません。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="js/sp-menu.js"></script>
組み込み作業は以上です。
8、スマホ表示の時だけこのドロップダウンメニューを適用したい場合は、上記手順6のコードを以下のように変更すればOKです。
このmax-widthの意味が理解できる方は、640pxの値を適宜変更しても問題ありません。
<link rel="stylesheet" href="css/sp-menu.css" media="screen and ( max-width:640px )" />
メニューのデザインを変更したい場合は、上記手順の4で設置したid=”menu”の要素に対してCSSで自由に変更してください。
PCとスマホでメニューのデザインをそれぞれ別のものにしたい場合は、上記手順8のコードの前後あたりに以下のコードを記述し、pc-menu.cssにPC用のデザイン設定をしてください。
<link rel="stylesheet" href="css/pc-menu.css" media="screen and ( min-width:641px )" />
レスポンシブのブレイクポイントの仕組みがわかる人は簡単にできるでしょう。
この「スマホメニュースクリプト」は、CSSをどのように編集したとしても動作エラーの原因にはなりませんので、自由にCSSでデザインしてください。
上記手順5の<div id=”sp-icon” class=”sp-close”>が画面上に表示されており、クリックすれば動作する仕組みになっています。
つまり、PC表示の際にはこのメニューアイコンをCSSで非表示にしてしまえば、動作することはありません。
(実際には空のdivなので、CSSで非表示にしなくてもページ上には表示されません)
本プログラムの使用においていかなる損害が発生したとしても、当方は責任を負いません。
了承していただける方のみご利用ください。
不具合などありましたら、サポートBBSからご連絡ください。
アップデートの際に修正する可能性があります。
無料のものですから、基本的にはサポートはありません。
が、初期状態での設置でエラーが出る場合は、サポートBBSにて無償対応いたしております。
初期状態とは、すべてのファイルを一切編集していない状態のことを指します。
それ以外のファイルが編集されていたり、既存サイトに組み込んだ場合などのお問い合わせは有償となりますので、ご了承ください。
しかし例外として、当サイト上で解説されているカスタマイズ方法だけを実践して正常動作しない場合は、無償サポート対象内になります。
その理由は、そのような使い方を想定してプログラムが作られているからです。
ご希望のカスタマイズがありましたら、お問い合わせページからご依頼ください。
たまに配信しています。
この「アップデート情報」欄はコンテンツ・メーカーを使用して更新・表示しています。
ファーストステップでは人や世の中の役に立つプログラムを作っています。
ぜひ色々使ってみて、改善点や要望などがあればお申し出ください。
