スマホサイト

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

投稿日:

 

スマホサイトの制作にあたり、最近はどんなメニューが主流なのか調べることにした。
以前は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

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

関連記事

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

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

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

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