それとなく今風にできる、グローバルナビゲーションのコード集
Webサイト全ページのヘッダーかサイドバーに共通して設置される、今時のグローバルナビゲーションをピックアップしました。少し洗練された見え方にしたい時に。
PR
Sponsored Link
グローバルナビゲーション
ワンページナビメニュー
:target擬似クラスと、要素の位置をX方向へ移動させるtranslateX()を使い背景の切り替えを実現。CSSのみで簡単に実装できるワンページナビ。
#t5:target #p5 {
transform: translateX(-190%);
-webkit-transform: translateX(-190%);
-moz-transform: translateX(-190%);
-o-transform: translateX(-190%);
}
ラインメニュー29種
テキストメニューに付与するクリック時のラインエフェクト29種。マウスオーバーではなくクリックした時だけエフェクトが起こる「視線の動きを阻害しないようなタイプ」なのでコーポレートサイトやECにも使えそうです。
Inspiration for Line Menu Styles | Codrops
スキューメニュー
全体だけでなく各ボタン一つ一つ斜めに傾斜しているメニュー。過度なアニメーションは避けたいけど、ユニークな感じを出したいときに。要素を傾斜させるtransform:skew()を使うだけのお手軽メニュー。
ul {
display: inline-block;
margin: 0;
padding: 0;
list-style: none;
transform: skew(-25deg);
}
プルメニュー
少しわかりにくいですが、メニューを下方向へスワイプさせると、スワイプさせた距離に応じてリンクを選択できます。慣れたら楽しく使えそうです。
Pull Menu - Menu Interaction Concept
透過版ラジアルメニュー
メニューをタップすると放射線状に広がっていくかのようなエフェクト。透過処理を施してあり、グラデーションの背景と相性がよいです。移動と回転を指定するときは半角スペースを空けて記述。
.btn-icon {
-webkit-transform: translateY(-10em) rotate(-67.5deg);
transform: translateY(-10em) rotate(-67.5deg);
}
スライディングメニュー
定番の横方向へスライドするメニュー。
オーバーレイ
こちらも定番のオーバーレイさせるメニュー。CSSのみ。
トグル
シンプルな吹き出しメニュー。
Menu Toggle button with flat menu
以上、今っぽいグローバルナビゲーションのスニペットまとめでした。
スポンサード リンク
-
投稿者：commte
株式会社コムテ代表取締役。2015/8：弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。
URL：西田 鉄平
この後によく読まれている記事
Leave a Comment