多くのサイトに設置されるグローバルナビゲーション。PCでは横並び、タブレットやスマホでは、折りたたんで、クリックして表示されるなどが一般的ですが、今回はそんなグローバルナビゲーションについてのブックマークを紹介して行きます。
今回はグローバルナビゲーションについてだよ！
サイトのヘッダー部分なんかに設置されているものだね！Webサイトを見ると多くのサイトで見かけるね。
- グローバルナビゲーションの役割と必要性
- デザインの参考例
- PCとSP、それぞれのコーディングの参考例（ハンバーガーメニュを含む）
そうだね。シンプルなものが多いけど、初めての人は横並びに苦労したり、装飾を付けたりが難しくて苦労する事もあるかも・・・そんな人に役立つサイトをブックマークしたから是非参考にしてみて！！
ブッ君、ありがとう！！しっかりと読んで理解して、自分でも色々と応用できるようにしていくよ！！
グローバルナビゲーションの役割って何？
Webサイトの訪問者が目的のページへ迷うことなくたどり着くための、文字通り「ナビゲーション」の役割を持っています。
実例を元にヘッダーデザインを学ぼう
デザインに迷ったときは、やはり他のサイトを確認するのが一番。
PCやSP、メガメニューのデザイン参考例を多数紹介！変わり種のデザインもあり、アイデアに困ったときにはここをチェック！！
PCのグローバルナビゲーション
アニメーションなど凝ったものが多数あり、初学者には実装はやや難しいかも知れませんが、レイアウトなどだけでも参考になる、ステキなナビデザインが満載！！
SPのグローバルナビゲーション
スマートフォンのグローバルナビゲーションを業種別に様々なデザインを紹介しています！きっと好みのデザインが見つかるはず！！
グローバルナビゲーションのコーディングを学ぼう
PCのグローバルナビゲーション
グローバルナビゲーションの基本を丁寧に説明してあり、初めてのグローバルナビゲーションはここから！！
レスポンシブの時に躓きがちなポイントを、実際のコードと図解入りの説明でわかりやすく説明してあります！
こちらもコードを一つ一つ丁寧に説明されているので、初めての人でもすぐに取り込むことができます。
SPのグローバルナビゲーション
スマホでのグローバルナビゲーションのレイアウトや表示アニメーションの例を5つ紹介しています。
ハンバーガーメニューを実装する
ハンバーガーメニューはクリック時のアニメーションが一つの特徴です。
ハンバーガーメニューの様々なアニメーションをコード付きで紹介してくれているので、コピペでそのまま使用する事もできるので、是非参考にして見てください。
こちらのサイトでは、HTMLとCSSのみでハンバーガーメニューの実装例が紹介されています。
コメント