簡単！スマホのドロップダウンメニューを実装

2015/01/12
Web

slicknav
（出典：slicknav.com）

自分のHPを使って実装してみました。

■参考サイト
スマホのドロップダウンメニューの実装に使える【SlickNav】使い方

Before
Before

After
After

想像よりも意外と簡単に実装ができました！

あとはロゴとメニューを横一列に並べて表示するようにしたいのですが、これがなかなかうまくいかず。
SlickNavのprependToのオプションで、ロゴが入っている要素（ここでは#header）を指定してメニューと横一列にならないか試すもうまく動いてくれません。
引き続きいろいろといじってみたいと思います。


タグ ：スマホ　ドロップダウンメニュードロップダウンメニュー　jqueryドロップダウンメニュー　css

同じカテゴリー（Web）の記事
【備忘録】WordPressでスマートフォン・タブレット端末別に条件分岐させる方法
【備忘録】WordPressでスマートフォン・タブレット端末別に条件分岐させる方法(2018-12-20 20:11)

【備忘録】z-indexが効かない！そんなときに試したいこと【CSS】
【備忘録】z-indexが効かない！そんなときに試したいこと【CSS】(2018-11-16 16:30)

【ライフハック】Webデザイナーが教える雨の日を楽しむための方法
【ライフハック】Webデザイナーが教える雨の日を楽しむための方法(2018-11-09 17:01)

【制作ハック】ソースコードの余白はこれでかんたん削除！
【制作ハック】ソースコードの余白はこれでかんたん削除！(2018-11-07 18:25)

そのパスワードで本当に大丈夫？パスワードが情報漏洩してるか確認できるWebサイト「Have I Been Pwned
そのパスワードで本当に大丈夫？パスワードが情報漏洩してるか確認できるWebサイト「Have I Been Pwned(2018-11-06 19:24)

お茶をヒントに生まれた日本のアイデアソン「茶ッカソン」
お茶をヒントに生まれた日本のアイデアソン「茶ッカソン」(2018-11-02 14:05)

Posted by yamanaka

上の画像に書かれている文字を入力して下さい
 
＜ご注意＞
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。

写真一覧をみる

削除
簡単！スマホのドロップダウンメニューを実装
    アイコン（絵文字）の挿入 スタンプ（絵文字）の挿入
    コメント(0)