2014.01.09
jquery

改良版:マウスオーバーで吹き出しを出す jQuery プラグインなし

メニューやサムネイルなどをマウスオーバーしたときに吹き出しを出す方法です。

MEMO: こちらの記事の改良版です。


マウスオーバーで吹き出しを出す

HTMLの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">ホーム</div>
      <div class="content">
      <div class="triangle"></div>
      ここに内容が入ります。
      </div>
      
   <div class="menu">画像</div>
      <div class="content">
      <div class="triangle add_left01"></div>
      ここに内容が入ります。
      </div>

   <div class="menu">リンク1</div>
      <div class="content">
      <div class="triangle add_left02"></div>
      ここに内容が入ります。
      </div>
  
   <div class="menu">リンク2</div>
      <div class="content">
      <div class="triangle add_left03"></div>
      ここに内容が入ります。
      </div>
   
   <div class="menu">テーブル</div>
      <div class="content">
      <div class="triangle add_left04"></div>
      ここに内容が入ります。
      </div>  
</div>

「ここに内容が入ります。」の部分は、切り替わったときにそれぞれ表示される部分です。

CSSのソース

.full_content {
 width:508px;
 height:380px;
 position:relative;
 margin:0 auto;
 clear:both;
}
.menu{
 width:100px;
 height:25px;
 background:#EC8E9E;
 float:left;
 list-style:none;
 padding:10px 0 0;
 margin-left:2px;
 text-align:center;
 display:block;
 cursor: pointer;
 color:#FFF;
}
.menu:first-child {
 margin-left:0;
}
.hover {
 background:#6CC;
 font-weight:bold;
}
.triangle { 
 width:0px;
 height:0px;
 border-left:10px solid transparent;
 border-right:10px solid transparent;
 border-bottom:30px solid #6CC; 
 left:35px;
 top:-35px;
 position:absolute;
}
.add_left01{
 left:137px;
}
.add_left02{
 left:239px;
}
.add_left03{
 left:341px;
}
.add_left04{
 left:443px;
}
.content {
 width:478px;
 height:320px;
 border:#6CC 5px solid;
 background:#FFF;
 top:65px;
 left:0;
 padding:10px;
 position:absolute;
}

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

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

  • 18行目
  • cursorというプロパティでマウスカーソルの形を変更できます。
    ここではリンクを使っていませんのでマウスを乗せても通常の矢印マークとなってしまいますので、指マークに変更。

  • 28行目~37行目
  • 以前書いた、CSSで三角形を作る方法の要領で三角形をCSSで作成しています。

  • 38行目~49行目
  • 他にも書き方があるかと思いますが、CSSで簡単に書いてみました。
    .triangleと.add_left01というクラスを同時に指定すると、「画像」ボタンにマウスオーバーしたときに出る吹き出しの三角形部分になります。
    .triangle.full_contentに対してposition:absolute;なので、この.add_left01~04をそれぞれ同時に指定することで左のマージンを調整しています。

    上記のHTMLソースから分かるように、ここでは、.triangleと同時に各ボタンに以下のようにクラス追加で記述しています。

    • 画像⇒.add_left01
    • リンク1⇒.add_left02
    • リンク2⇒.add_left03
    • テーブル⇒.add_left04

jQueryのソース

<script type="text/javascript">
$ (function(){
	$ (".content").hide();
	
	$(".menu").mouseout(function(){  
		$ (".content").fadeOut();
		$ (".menu").removeClass("hover");
	});		
	$ (".menu").mouseover(function(){ 
		$ (this).addClass("hover");
		$ (".hover + .content").fadeIn("slow");	
	});	
});
</script>
  • 2行目
  • ページをロードしたときにCSSで記述した.contentを.隠すという記述。

  • 4行目~7行目
  • .menuからマウスを外したしたときに

    1. .contentを.fadeOut(“slow”)、つまりフェードアウト(ゆっくりと消す)する。
    2. .menuからhoverというクラスを消す。
  • 9行目~12行目
  • .menuにマウスオーバーしたときに、

    1. マウスオーバーした.menu(this)にhoverというクラスと追加。
    2. .hover + .contentを.fadeIn(“slow”)、フェードイン(ゆっくりと出てくるように)する。

jQueryのソースはとってもシンプルにできますね。

Memo:

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

関連する記事

コメント & トラックバック
  1. シンパ

    他では見たことがないくらいやさしい解説ですね。大変分かりやすく、jQuery初心者の私でも理解し、導入することが出来ました。ありがとうございます。

    ただ上記HTMLソースの5つ目のテーブルのソースで、三角吹き出しソースの一行が抜けておるようです。そのままコピペで試したところ、5つ目だけオンマウスで三角が表示されませんでした。

    このサイトは大変貴重ですのでこれからも頑張って下さい。


    • Ri-mode

      シンバさん
      お褒めの言葉ありがとうございます。更新頻度少な目なのですが、細々とがんばっていきますのでよろしくお願いします。

      三角吹き出しのソース、ご指摘ありがとうございました。直しておきました。


  2. […] 改良版:マウスオーバーで吹き出しを出す jQuery プラグインなし | Ri-mode Rainbow | No:2670. […]


コメントをどうぞ

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


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

*


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