閉じる
jQuery
  • 2011.11.25 (Fri)

スムーズな動きがエレガントなjQuery 縦型アコーディオンメニュー

menu
個人的にこういうの探してたんですが、中々ありそうでなかったので見つけた時”おっ!”ってなったので紹介。
実装もとても簡単で、企業系のサイトなんかで結構使えると思います。

menu
http://www.tutorialjquery.com/acordeon-menu-jquery-muy-facil-de-implementar/

デモ

DOM構築

メニューを囲むクラスを指定してあげます。

 $('document').ready(function(){
            $('.menu').lksMenu();
 });

HTML

HTMLもいたって簡単です。

<html>
    <head>
        <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="jquery.lksMenu.js"></script>
        <link rel="stylesheet" type="text/css" href="lksMenuSkin2.css" />
        <script>
        $('document').ready(function(){
            $('.menu').lksMenu();
        });
        </script>
    </head>
    <body>
    <div class="menu">
        <ul>
            <li>
                <a href="#">AjaxShake</a>
                <ul>
                    <li><a href="http://www.ajaxshake.com/es/JS/1111/jquery.html">jQuery</a></li>
                    <li><a href="http://www.ajaxshake.com/es/JS/1141/flash.html">Flash</a></li>
                    <li><a href="http://www.ajaxshake.com/es/JS/1121/prototype.html">Prototype</a></li>
                    <li><a href="http://www.ajaxshake.com/es/JS/12111/mootools.html">Mootools</a></li>
                </ul>
            </li>
            <li>
                <a href="#">jsonP Examples</a>
                <ul>
                    <li><a href="http://www.jsonpexamples.com/jsonp-flickr-example/">Flickr</a></li>
                    <li><a href="http://www.jsonpexamples.com/jsonp-example-twitter-call/">Twitter</a></li>
                    <li><a href="http://www.jsonpexamples.com/jsonp-rating-example-using-jquery/">Rating</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Friend Sites</a>
                <ul>
                    <li><a href="http://www.tutorialjquery.com">Tutorial jQuery</a></li>
                    <li><a href="http://www.jsonpexamples.com">jsonp Examples</a></li>
                    <li><a href="http://www.codigogratis.com.ar">Codigo Gratis</a></li>
                    <li><a href="http://www.bugbase.com.ar">Bug Base</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Others</a>
                <ul>
                    <li><a href="http://www.resolvermatrices.com.ar">Resolver Matrices</a></li>
                    <li><a href="http://www.letrade.org">Letras de Canciones</a></li>
                    <li><a href="http://www.cheatscode.org/">Cheats Code</a></li>
                    <li><a href="http://www.solvingequations.net">Solving equations</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </body>
</html>

http://www.tutorialjquery.com/acordeon-menu-jquery-muy-facil-de-implementar/

デモ

ダウンロード

追記:2012年2月29日

マウスオーバーでメニューが開くようにするには…というコメントをいただいたので、簡単な方法になりますが以下の2つの方法を使えばマウスオーバーでメニューが開くようになります。

■方法1

jquery.lksMenu.jsの29行目あたりのクリックイベントをマウスオーバーに変えてあげます

            var menu= $(this);
            // localizamos los links principales y le asignamos un evento click
            menu.find('ul li > a').bind('click',function(event){
                // identificamos el elemento sobre el que se hizo click
                var currentlink=$(event.currentTarget);

29行目の’click’を’mouseover’へ変更

            var menu= $(this);
            // localizamos los links principales y le asignamos un evento click
            menu.find('ul li > a').bind('mouseover',function(event){
                // identificamos el elemento sobre el que se hizo click
                var currentlink=$(event.currentTarget);

■方法2

方法2はjquery.lksMenu.jsのプラグインを使わずにDOMを以下に変更する方法です。
プラグインを使う場合は下記ですが

 $('document').ready(function(){
            $('.menu').lksMenu();
 });

プラグインを使用せずDOMを下記へ変更

var j$ = jQuery;

j$(function(){
j$(".menu").each(function(){
j$("li > a", this).each(function(index){
var $this = j$(this);

if(index > 0) $this.next().hide('normal');

$this.mouseover(function(){
j$(this).next().show('normal').parent().siblings()
.children("ul:visible").hide('normal');
return false;
});
});
});
});