東京ウェブデザへろへろ日記

ホームページ制作、ホームページデザイン
ビジネス専用
バー
ライン

東京ウェブデザへろへろ日記

レスポンシブサイトにつける折りたたみメニュー。
|2016年6月12日 14:01| コメント(0)
スマホ対応が急務になっているこのごろ、皆さま、いかがお過ごしですか。

今回は、レスポンシブサイトのメニューの問題である。

メニューが多く、なおかつ階層化がされているとき、そのまますべてのメニューを表示すると、スマホではメニューが多すぎる。

通常、人間がパッと見て認識できる数は7つといわれている。そこから、メニューも同様に、7つまでなら一目で認識できると考えられている。それ以上、たとえば10個を越えるメニューだと、折りたたんだほうがいい。そのために、スマホでは三本線のメニューマークが使われ、それが事実上、スタンダードなメニューのアイコンになっている。

今回、仕事で使ったjQueryのメニューは、SlickNav。

このタイプのメニューは、JavaSceiptで、PC用のメニューを読み込んで、それに独自のクラス、IDのタグをつけ、HTMLの最初の部分に動的に表示させている。なので、仕組み上、メニューが一般的なリストによるメニューの記述、つまりUl、li で書かれていることが要件だ。

メニューが特殊な書き方をしている場合、それ自体を変更する必要があるだろう。

SlickNavのいいところは、階層化に対応していること。階層化に対応していないものも多いようなので、重宝する。jQueryでぬるっと出てくるドロップダウンメニューを採用している場合、ちょうどいい。

SlickNav

ttp://slicknav.com/

次の記事 → スマホ時代のサイト設計はどうなるのか。
前の記事 ← DreamWeaverが起動しなくなるトラブル。

コメントする
名前

電子メール

URL

ログイン情報を記憶


ウェブデザイナー
最近のエントリー
アーカイブ
Copyright (c) 1999-2010 Wasshoi,Ltd., Tokyo Japan, All Rights Reserved.