カテゴリー:
メニュー
閲覧数:520 配信日:2016-12-22 18:13
ハンバーガーメニュー
CSS Menu Animations
・ハンバーガーアイコン左上
・A.左→右。長方形アニメーション。テキストも左→右
・B.左上→右下。円アニメーション。テキストは中央上→中央下
・C.一瞬で切り替え。テキストは、中央 →観音開き
jQuery+CSS3で円が画面全体に広がる系スマホメニュー
・ハンバーガーアイコン右上
・右上→左下。円アニメーション。テキストは左→右
CSSだけで円を画面全体へ広げるアニメーション
・ハンバーガーアイコン左上
・左上→右下。円アニメーション。テキストは中央下→中央中
Dynamics.jsで作る小気味いい動きのスマホ用サイドメニュー
・ハンバーガーアイコン左上
・右→左。長方形アニメーション。テキストも右→左
Multi-Level Push Menu
・ハンバーガーアイコン左上
・左→右。長方形アニメーション
・階層メニュー対応(親メニューは表示されずbackで戻る)
※「ハンバーガーアイコン」「クローズアイコン」の位置は異なる
Responsive Multi-Level Menu
・ハンバーガーアイコン左上
・各種長方形アニメーション
・階層メニュー対応(親メニューは表示されずbackで戻る)
jQuery pop menu
・レシポンシブ未対応(と言うより何もしていない)だが、表示上問題はない
Pure CSS Header Menu
Left slide menu with icon
・ハンバーガーアイコン左上
・作りかけ？
・デザインが良い
ハンバーガーメニュー以外topナビゲーション
Sign In Button and Form
・右上メニューボタン
・中央一点から全画面へスケールアウトアニメーション。テキストも同
IZIMODAL
・右上メニューボタン
・クリックで全画面モーダルウィンドウ
Menu with mix-blend-mode buttons
・左上メニューボタン
CSS Google Glass
・中央上時計(メニューボタン)
Makisu
・モバイル未対応
ハンバーガーメニュー以外bottomナビゲーション
bottomナビゲーション
・「単一ページ」もしくは「複数ページ間でAjax遷移」での使用が前提
Material Share Interaction
・ナビアイコン右下
・アニメーションは素晴らしいが、レスポンシブ未対応
Switchin' Nav
・コンテンツがスペースを満たす場合、ナビは表示されない
GitHub - jossiwolf/js_bottom_tabs: An implementation of Material Design Bottom Navigation using MaterializeCss
・タブ内容を表示している
・探しているのは、ページ遷移用のリンクナビゲーション
固定されたボトムナビゲーションバー
・レシポンシブ未対応(と言うより何もしていない)だが、表示上問題はない
・position: fixed;
・bottom: 0;
CSS Dock Menu
・レシポンシブ未対応
その他
Touch device jelly menu concept