calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

それとなく今風にできる、グローバルナビゲーションのコード集

Webサイト全ページのヘッダーかサイドバーに共通して設置される、今時のグローバルナビゲーションをピックアップしました。少し洗練された見え方にしたい時に。

PR
IT/WEB業界への転職なら
Sponsored Link

グローバルナビゲーション

ワンページナビメニュー

:target擬似クラスと、要素の位置をX方向へ移動させるtranslateX()を使い背景の切り替えを実現。CSSのみで簡単に実装できるワンページナビ。

#t5:target #p5 {
  transform: translateX(-190%);
  -webkit-transform: translateX(-190%);
  -moz-transform: translateX(-190%);
  -o-transform: translateX(-190%);
}

One Page Navigation CSS Menu

Can I use... Transforms

ラインメニュー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);
}

Skewed Menu

プルメニュー

少しわかりにくいですが、メニューを下方向へスワイプさせると、スワイプさせた距離に応じてリンクを選択できます。慣れたら楽しく使えそうです。

Pull Menu - Menu Interaction Concept

透過版ラジアルメニュー

メニューをタップすると放射線状に広がっていくかのようなエフェクト。透過処理を施してあり、グラデーションの背景と相性がよいです。移動と回転を指定するときは半角スペースを空けて記述。

.btn-icon {
  -webkit-transform: translateY(-10em) rotate(-67.5deg);
  transform: translateY(-10em) rotate(-67.5deg);
}

Simple radial menu

スライディングメニュー

定番の横方向へスライドするメニュー。

iOS style sliding menu

オーバーレイ

こちらも定番のオーバーレイさせるメニュー。CSSのみ。

PureCSS Menu

トグル

シンプルな吹き出しメニュー。

Menu Toggle button with flat menu

以上、今っぽいグローバルナビゲーションのスニペットまとめでした。

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください