ホームページテンプレートを無料配布中
商用利用もWEB制作業者様利用も全て無料

テンプレートパーティー

レスポンシブのスマホ環境で、メニューを折りたたんで表示させる方法

レスポンシブテンプレートのスマホ環境では全ページでメインメニューが表示されていましたが(※2014年6月時点)、メニューを隠して3本バーアイコン画像に変更する方法をご紹介します。

>> 実際のサンプルはこちら

2015/09/05までに配布中のレスポンシブテンプレートは全て開閉メニュー式になります。
それ以前にDLされている場合は以下方法でお試し下さい。

トップページ以外でアイコン化を確認できます。PCで見る場合はブラウザ幅を480px以下にして再読み込みをかけて下さい。(※古いブラウザだと確認できません。)

スクリプト利用規約【※必ずお守り下さい】

メニュー折りたたみ用スクリプトのjavascript(openclose.js)は有限会社クリタス様に所有権があります。許可なく改造・再配布する事を禁止します。

※openclose.jsファイルを当社のテンプレート「以外」に使う場合は必ずプログラム利用規約をご覧下さい。

今回はサンプル用として「tp_biz27」を使用します

※tp_biz27は6/27より折りたたみタイプにて再配布開始されています。
その他のテンプレートもだいたい同じような設定で使えると思いますが、うまくいかない場合はサポート掲示板からご質問頂ければサポートさせて頂きます。

※PCでプレビューチェックを行う方へ【注意】
徐々に幅を小さくするとスマホ用のレイアウトになりますが、スクリプトの動作はブラウザを「更新」しないと確認できない場合がありますのでご注意下さい。また、古いブラウザでは確認できません。

まずは3本バーのアイコンをダウンロードします

こちらからダウンロードできます
制作時のPhotoshop用ファイル(psd)も梱包されているので必要があれば加工してご利用下さい。
DLファイル解凍後、アイコン画像をお手元のテンプレートのimagesフォルダに移動しておいて下さい。

トップページ「以外」のテンプレートを編集します

htmlの上の方に開閉ブロック用のプログラムファイル(openclose.js)を読み込みます

openclose.jsファイルはレスポンシブ版テンプレートにはほぼ梱包されていると思いますが、ない場合はレスポンシブテンプレートをDLして、jsフォルダからopenclose.jsをもってきてjsフォルダ(jsフォルダがなければ作る)に入れて下さい。

開閉ブロックを使う全htmlの</head>の上の行あたりに以下を追加します。(※<head>でなく</head>です。)

htmlの下の方にタグを追加(※メニューを表示させるトップページには追加しない)

メニューを非表示にしてアイコン化しておく設定を行います。
開閉ブロックを使う全htmlの下の方の</body>の上あたりに追加。

続いてメニューブロックを編集します

折りたたみを使いたい全htmlファイルのメニューブロックにid="menubar"を追加します。
<nav id="menubar">
又は、
<ul id="menubar">
などです。表示がおかしくならない方に設定して下さい。尚、idの設定は1つしか行えませんので、navかulに既にid値が入っているなら入っていないタグの方にmenubarを追加します。

もし、menubarを設定できる場所がない場合、外側に<div>タグで囲ってそこに設定しても可です。

スタイルの追加を行います

style.cssのPC用の設定箇所に以下を追加。

続いてstyle.cssの下の方にあるスマートフォン用の設定箇所に以下を追加して下さい。

以上で完成です

>> 実際のサンプルはこちら(※トップページ以外でアイコン化を確認できます)
PCで見る場合、ブラウザ幅を狭くして再読み込みすることでプレビュー確認(古いブラウザでは確認できません)ができます。

<< ホームページテンプレートの使い方・カスタマイズ方法メニューに戻る

↑ PAGE TOP