2012年01月08日

jquery ドロップダウンメニュー

お願いします♪いいねとかつぶやいたりして下さい
 
ドロップダウンメニューとかのプラグインをダウンロードしても
めっちゃめちゃになってるので
コードをできるだけ最小限にしてメモ。

・適当なHTMLを作成
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Jquery ドロップダウンメニュー</title>
    <style type="text/css">
	
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	/* 
		一階層目
	*/
	ul.dropdown {
		position: relative;
	}
	
	ul.dropdown li {
		float: left;
		zoom: 1;
	}
	
	ul.dropdown li a {
		display: block;
	}
	
	
	ul.dropdown li.hover,  ul.dropdown li:hover {
		position: relative;
	}
	
	/* 
		2階層目
	*/
		ul.dropdown ul {
		width: 220px;
		visibility: hidden;
		position: absolute;
		top: 100%;
		left: 0;
	}
	ul.dropdown ul li {
		background: #f6f6f6;
		color: #000;
		float: none;
	}
	/* IE 6 & 7 Needs Inline Block */
		ul.dropdown ul li a {
		border-right: none;
		width: 100%;
		display: inline-block;
	}
	
	/* 
		LEVEL THREE
	*/
		ul.dropdown ul ul {
		left: 100%;
		top: 0;
	}
	ul.dropdown li:hover > ul {
		visibility: visible;
	}
</style>

    <!--[if lte IE 7]>
        ul.dropdown ul li					{ display: inline; width: 100%; } 
    <![endif]-->

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"&gt;&lt;/script&gt;
    <script type="text/javascript" language="javascript" src="js/jquery.dropdown.js"></script>
    </head>

    <body>
    <ul class="dropdown">
      <li><a href="#">今日のご飯</a>
        <ul>
          <li><a href="#">ラーメン</a></li>
          <li><a href="#">カレーライス</a>
            <ul>
              <li><a href="#">チキンカレー</a></li>
              <li><a href="#">カツカレー</a></li>
            </ul>
          </li>
          <li><a href="#">天ぷら</a></li>
          
        </ul>
      </li>
    </ul>
</body>
</html>



・jquery.dropdown.js
$(function(){

    var config = {    
         sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
         interval: 200,  // number = milliseconds for onMouseOver polling interval    
         over: doOpen,   // function = onMouseOver callback (REQUIRED)    
         timeout: 200,   // number = milliseconds delay before onMouseOut    
         out: doClose    // function = onMouseOut callback (REQUIRED)    
    };
    
    function doOpen() {
        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');
    }
 
    function doClose() {
        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');
    }

    $("ul.dropdown li").hoverIntent(config);
    
    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");

});


これでドロップダウンメニューのできあがり
関連するタグ: CSS Dreamweaver javascript
あなたにとって有用な記事でしたか?是非ブックマークしておくことをおすすめします。
 




ライブラリを配布しちゃったり
webデザイン
Fireworks
HTMLコーディング
CSS
Dreamweaver
携帯サイト
webプログラム
PHP
正規表現
cakephp
MYSQL
javascript
webマーケティング
adwords
analytics
windows7
ショートカットキー
おすすめ情報
サイト
facebook
ライブラリ
配布
アプリ
iphone
ipad
サーバー
さくらサーバー
全ての記事を読む




トップ - 最新の記事一覧 - お問い合わせ