2014.01.09
jquery

改良版:マウスオーバーでタブの表示切り替え jQuery プラグインなし

タブみたいなメニューで、マウスオーバーすると同じページ内(同じHTMLファイル内)で表示を切り替える方法です。

MEMO: こちらの記事から大幅にソースを変更しました。


マウスオーバーで表示を切り替える

head内にjQueryを読み込む記述

以下をheadに記述します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

HTMLのソース

サンプルから一部内容を省略しますが、以下は説明です。

<div class="full_content">
   <div class="menu hover">ホーム</div>
      <div class="content">
      ここに内容が入ります。
      </div>
      
   <div class="menu">画像</div>
      <div class="content">
      ここに内容が入ります。
      </div>

   <div class="menu">リンク</div>
     <div class="content">
      ここに内容が入ります。
      </div>
  
   <div class="menu">入力</div>
      <div class="content">
      ここに内容が入ります。
      </div>
   
   <div class="menu">テーブル</div>
      <div class="content">
      ここに内容が入ります。
      </div>   
</div>

「ここに内容が入ります。」の部分は、切り替わったときにそれぞれ表示される部分です。
ハイライトした2行目は後述します。

CSSのソース

.full_content {
	width:508px;
	height:380px;
	position:relative;
	margin:0 auto;
	clear:both;
}
.menu{
	width:100px;
	height:25px;
	background:#B99DC6;
	float:left;
	list-style:none;
	padding:10px 0 0;
	margin-left:2px;
	text-align:center;
	display:block !important;
	cursor: pointer;
	color:#FFF;
}
.menu:first-child {
	margin-left:0;
}
.hover {
	background:#9C9;
	font-weight:bold;
	display:block !important;
}
.content {
	width:478px;
	height:320px;
	border:#9C9 5px solid;
	background:#FFF;
	top:35px;
	left:0;
	padding:10px;
	position:absolute;
}

CSSについてざっくりと説明します。

  • 4行目と37行目
  • 4行目のposition:relative;に対し37行目にposition:absolute;を記述しています。
    ここでは.full_contentが親要素で.contentが子要素になります。

  • 18行目
  • cursorというプロパティでマウスカーソルの形を変更できます。
    ここではリンクを使っていませんのでマウスを乗せても通常の矢印マークとなってしまい、クリックできるのが一見わかりません。
    クリックすると切り替わる仕様ですので、マウスオーバー時に指マークになるように変更。

  • 21行目
  • :first-childというのは一番目の子要素に適用できるセレクタです。今回の場合は、.menuの一番目、つまりタブの一番左側だけmargin-left:0;にという意味ですね。
    15行目でmargin-left:2px;と記述していますが、CSSは後から記述された方が優先されるので21行目の方が適用されます。

jQueryのソース

head内もしくはbody内に以下を記述します。

<script type="text/javascript">
$ (function(){
	$ (".content:not('.hover + .content')").hide();	
	$ (".menu").mouseover(function(){
		$(".menu").removeClass("hover");
		$(this).addClass("hover");
		$(".content:not('.hover + .content')").fadeOut();
		$(".hover + .content").fadeIn();
	});
});
</script>
  • 3行目
  • CSSで記述した.contentを.hide()、つまり隠したい状況です。.contentを隠したいだけなら、2行目は

    $ (".content").hide();
    

    となります。
    HTMLのソースでハイライトした2行目を見てみると、hoverというクラスが付いています。
    ページが読み込まれた時には、この部分は隠さないようにします。
    今回はページが読み込まれた時にhover + .contentの部分は隠さないようにするので、:not(‘.hover + .content’)を追加。
    :not()は()以外となります。
    ここでは.hover + .content以外の.contentを隠すとなります。

  • 4行目~9行目
  • .menuにマウスオーバーしたときに

    1. hoverというクラスを消す。
    2. マウスオーバーした.menu(ここではthis)にhoverというクラスを追加。
    3. .hover + .content以外の.contentを.fadeOut()、つまりフェードアウト(ゆっくりと消す)する。
    4. .hover + .contentの.contentを.fadeIn()、つまりフェードイン(ゆっくりと出てくるようにする)する。
Memo:

ちなみに私は「Web制作の現場で使う jQueryデザイン入門」という本で初めてjQueryを勉強するようになりました。
CSSとHTMLが分かる人にはお勧めの本です。自分でコードが書けるようになります。

関連する記事

コメント & トラックバック
  1. ひろこ

    タブがマウスオーバーで開くグローバルナビゲーションを作りたくて
    ここにたどり着きました。
    おおよそ出来たのですが
    contentを×印などをクリックして
    クローズさせることは出来ますか?


コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP