スマホサイト

スマホサイトのメニューづくり

投稿日:

 

スマホサイトの制作にあたり、最近はどんなメニューが主流なのか調べることにした。
以前は3本線のハンバーガーメニューで下に伸びるアコーディオン式が多かったように思ったけど、最近はスルッと横から出てくるタイプもよく見かけるようになった。

今回は、横からスルッとでてくるドロワータイプのメニューを作ってみようと思う。

まずは、作り方をサーチ。
drawer.jpというのが使いやすいらしい。

http://git.blivesta.com/drawer/

 

でも、設置方法がいまいちよくわからない。
そこで設置方法を解説しているサイトをググってみた。
下の2つのサイトの解説がわかりやすかったのでメモ。

【jQuery】簡単にドロワーメニューを実装できる「Drawer」の使い方

スマホのメニューを気持ちよく表示させるjQuery「drawer.js」http://web.hitogoto.org/drawer-navi-and-jquery-that-make-smarthos-menu-feel-comfortable

 

ドロワータイプのメニューで参照したサイト

JSを使わずにアニメーションしながら展開するドロワーメニュー(スライドメニュー)の実装方法

ドロワーメニューをプラグイン無しで簡単に自作する方法https://mdstage.com/web/jquery/drawer-menu

第77回 スマホでドロワーメニューを実装する方法
http://coding-factory.com/cm/cm77.html

スクロールできちゃう!横からスライドして出てくるドロワーメニューの簡単自作サンプル【jQuery】
http://mugen00.moo.jp/web/jquery/drowermenu

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。

-スマホサイト

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

CSS 可変で文字サイズを変更する

「画面サイズに合わせて文字の大きさも変化させたい」けど、「em」や「rem」や「%」ではうまくいかない。 早速ググってみると。。。ありました! vw(ViewportWidth)とvh(Viewpor …

スマホでhoverを有効にする方法

PC用のサイト制作ではお馴染みの「hover」エフェクトだけど、スマホサイトの場合はこれが効かない。スマホサイトでも「hover」エフェクトを有効にする方法を調べてみました。できるだけ簡単に対応できる …

サイト制作・グラフィック制作をしているデザイナーです。制作で躓いたことの備忘録としてこのブログを始めました。
たくさんの検索結果から、実際に何度も何度も自分で試してみて、自分に合うなと思った方法やうまくいった方法をこのブログに書き留めています。
プログラム関係のことはもっぱらコピペ派。
自分でゴリゴリ書くことはできません。。。プログラムが分かる人がうらやましいです。
そんな私でもなんとかサイト制作ができるのはグーグル先生と貴重な情報をおしげもなく公開してくださっているたくさんの方々のおかげ。
有志のみなさまに日々感謝しつつ制作させていただいています。