「モバイル」「パソコン」同じ挙動

Webデザイン

カテゴリー: メニュー  閲覧数:538 配信日: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

週間人気ページランキング / 4-23 → 4-29
順位 ページタイトル抜粋 アクセス数
1 鉄道会社毎のカラーコード | カラーコード(色) 13
2 Inkscape | ソフトウェア 12
2 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 12
3 ツールチップが表示されないときー 10
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 6
5 ログイン 4
5 「Create Link」代替拡張機能を探した結果は、「CopyTabTitleUrl」でした。 | CopyTabTitleUrl(Chrome 拡張機能) 4
5 似顔絵ジェネレーター : 似顔絵メーカー / NIGAOE MAKER 4
5 RGB ⇔ Lab | 色変換(色) 4
6 Design 0 3
6 効果を打ち消すスタイルシート | CSS 3
6 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 3
6 他サイト調査(HTML) カテゴリー 3
6 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 3
6 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 3
7 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 2
7 気が付いたこと 2
7 別方法 2
7 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 2
7 「bgcolor」「background-color」「background」の違い | CSS 2
2025/4/30 1:01 更新
指定期間人気ページランキング / 2020-5-30 → 2025-4-29
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 8579
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 4540
3 血の色 / #b30000 / #360800 / #ff0000 | 色 3700
4 Design 0 3667
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2676
6 RGBの種類 / ビットカラー | RGB(色) 2615
7 「bgcolor」「background-color」「background」の違い | CSS 1954
8 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 1838
9 16進数カラーコード / 2進数 1804
10 コズミックブルーが何色か分からない | 色 1788
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 1652
12 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 1636
13 「属性」「プロパティ」「アトリビュート」の違い | CSS 1586
14 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 1501
15 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 1351
16 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Google Chrome(ブラウザ) 1342
17 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 1228
18 HSLとHSVの違い | 色変換(色) 1146
19 「東京都」のカラーコード取得は難しい | 色 1097
20 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 1050
2025/4/30 1:01 更新