2013.03.29
javascript

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

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

Attention!!

この記事はソースを大幅に改良してこちらへ書き直しました。

以前書いたクリックしてタブの表示切替を修正してjQueryで作ってみました。

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

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

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

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

CSSのソース

.full_content {
	width:508px;
	height:380px;
	position:relative;
	margin:0 auto;
	clear:both;
}
ul li{
	width:100px;
	height:25px;
	background:#EC8E9E;
	float:left;
	list-style:none;
	padding:10px 0 0;
	margin-left:2px;
	text-align:center;
	display:block !important;
	cursor: pointer;
	color:#FFF;
}

ul li:first-child {
	margin-left:0;
}
ul {
	padding:0;
	margin: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行目と41行目と63行目
  • 4行目のposition:relative;に対し41行目と63行目にposition:absolute;を記述しています。
    ここでは.full_contentが親要素.triangleと.contentが.full_contentの子要素になります。

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

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

  • 44行目~47行目
  • 他にも書き方があるかと思いますが、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();
	
	$("li").mouseout(function(){  
		$ (".content").fadeOut("slow");
		$ ("li").removeClass("hover");
	});	
	
	$ ("li").mouseover(function(){ 
		$ (this).addClass("hover");
		$ ("li.hover + .content").fadeIn("slow");	
	});
	
});
</script>
  • 2行目
  • ページをロードしたときにCSSで記述した.contentを.隠すという記述。

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

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

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

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

Memo:

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

関連する記事

コメントをどうぞ

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


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

*


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