menu
menu

CSSだけでロールオーバー | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook4
  • はてなブックマーク3
  • Google+4
  • Pocket0
  • Twitter0

CSSだけでロールオーバー

  • Labs

html-css

こんにちは(・∀・)

 CSSだけでシリーズです。今回はCSSだけでロールオーバーをご紹介します。

1.CSSだけでロールオーバー(テキスト)

サンプルデモ

 サンプルデモはこちら!


HTML

<div id="gnav">
<ul>
<li class="gnav1"><a href="#">HOME</a></li>
<li class="gnav2"><a href="#">STRATEGY</a></li>
<li class="gnav3"><a href="#">ABOUT</a></li>
<li class="gnav4"><a href="#">WORKS</a></li>
<li class="gnav5"><a href="#">MAIL</a></li>
</ul>
<!--gnav--></div>
CSS

#gnav {
	width: 504px;
	height: 25px;
	margin: 0 auto;
}
#gnav ul {
	overflow: hidden;
}
#gnav li {
	float: left;
	font-size: 100%;
	line-height: 1.6;
	text-align: center;
}
#gnav li.gnav1,
#gnav li.gnav2,
#gnav li.gnav3,
#gnav li.gnav4 {
	margin-right: 1px;
}
#gnav li a,
#gnav li a:link,
#gnav li a:visited {
	display: block;
	width: 100px;
	height: 25px;
	background: #5550b7;
	color: #fcfcfc;
}
#gnav li a:hover,
#gnav li a:active {
	background: #9950b7;
	color: #fcfcfc;
}

2. CSSだけでロールオーバー(画像)

サンプルデモ

 サンプルデモはこちら!


HTML

<div id="gnav">
<ul>
<li class="gnav1"><a href="#"><img src="gnav1.png" alt="HOME"></a></li>
<li class="gnav2"><a href="#"><img src="gnav2.png" alt="STRATEGY"></a></li>
<li class="gnav3"><a href="#"><img src="gnav3.png" alt="ABOUT"></a></li>
<li class="gnav4"><a href="#"><img src="gnav4.png" alt="WORKS"></a></li>
<li class="gnav5"><a href="#"><img src="gnav5.png" alt="MAIL"></a></li>
</ul>
<!--gnav--></div>
CSS

#gnav {
	width: 500px;
	height: 25px;
	margin: 0 auto;
}
#gnav ul {
	overflow: hidden;
}
#gnav li {
	float: left;
}
#gnav li.gnav1 {
	background: url(gnav1_on.png) no-repeat top left;
}
#gnav li.gnav2 {
	background: url(gnav2_on.png) no-repeat top left;
}
#gnav li.gnav3 {
	background: url(gnav3_on.png) no-repeat top left;
}
#gnav li.gnav4 {
	background: url(gnav4_on.png) no-repeat top left;
}
#gnav li.gnav5 {
	background: url(gnav5_on.png) no-repeat top left;
}
#gnav li a img {
	vertical-align: top;/*IE6*/
}
#gnav li a,
#gnav li a:link,
#gnav li a:visited {
	display: block;
}
#gnav li a:hover,
#gnav li a:active {
	background: transparent;/*IE6*/
}
#gnav li a:hover img,
#gnav li a:active img {
	visibility: hidden;
}

関連リンク

 JavaScriptでロールオーバー

  • カテゴリー:Labs
  • facebook4
  • はてなブックマーク3
  • Google+4
  • Pocket0
  • Twitter0