JavaScript + Ajax 実践サンプル集 - jQueryのhoverAccordionプラグインを利用したアコーディオンメニュー

jQueryのhoverAccordionプラグインを利用したアコーディオンメニュー

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのhoverAccordion()プラグインを利用してホーバー型のアコーディオンメニューを表示します。マウスをタブ上に移動すると自動的にサブメニューが表示されます。

このサンプルを編集して試してみる ←サンプルが背後に隠れて見えないときは左をクリック！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery - Hover Accordion Menu </title>
  <link href="jQuery/hoverAccordion/hoverAccordion.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script>
  <script src="jQuery/hoverAccordion/jquery.hoveraccordion.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {
      $('#accordionMenu').hoverAccordion();
    });    
  </script>
</head>
<body>

<ul id="accordionMenu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a>
      <ul>
        <li><a href="?id=2a#ex1">Subitem 2a</a></li>
        <li><a href="?id=2b#ex1">Subitem 2b</a></li>
        <li><a href="?id=2c#ex1">Subitem 2c</a></li>
        <li><a href="?id=2d#ex1">Subitem 2d</a></li>
        <li><a href="?id=2e#ex1">Subitem 2e</a></li>
      </ul>
    </li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a>
      <ul>
        <li><a href="?id=5a#ex1">Subitem 5a</a></li>
        <li><a href="?id=5b#ex1">Subitem 5b</a></li>
        <li><a href="?id=5c#ex1">Subitem 5c</a></li>
      </ul>
    </li>
    <li><a href="#">Item 6</a></li>
    <li><a href="#">Item 7</a>
      <ul>
        <li><a href="?id=7a#ex1">Subitem 7a</a></li>
        <li><a href="?id=7b#ex1">Subitem 7b</a></li>
        <li><a href="?id=7c#ex1">Subitem 7c</a></li>
        <li><a href="?id=7d#ex1">Subitem 7d</a></li>
      </ul>
    </li>
    <li><a href="#">Item 8</a>
      <ul>
        <li><a href="?id=8a#ex1">Subitem 8a</a></li>
        <li><a href="?id=8b#ex1">Subitem 8b</a></li>
        <li><a href="?id=8c#ex1">Subitem 8c</a></li>
        <li><a href="?id=8d#ex1">Subitem 8d</a></li>
        <li><a href="?id=8e#ex1">Subitem 8e</a></li>
        <li><a href="?id=8f#ex1">Subitem 8f</a></li>
      </ul>
    </li>
    <li><a href="#">Item 9</a>
      <ul>
        <li><a href="?id=9a#ex1">Subitem 9a</a></li>
        <li><a href="?id=9b#ex1">Subitem 9b</a></li>
        <li><a href="?id=9c#ex1">Subitem 9c</a></li>
        <li><a href="?id=9d#ex1">Subitem 9d</a></li>
        <li><a href="?id=9e#ex1">Subitem 9e</a></li>
      </ul>
    </li>
  </ul>
  
</body>
</html>

外部スクリプトCSS部HEAD部BODY部

ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。

            
/**
 * HoverAccordion - jQuery plugin for intuitively opening accordions and menus
 * http://berndmatzner.de/jquery/hoveraccordion/
 * Copyright (c) 2008 Bernd Matzner
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 * Requires jQuery 1.2.1 or higher
 * Version: 0.5.0
 *
 * Usage:
 * $('#YourUnorderedListID').hoverAccordion();
 * or
 * $('.YourUnorderedListClass').hoverAccordion({
 *  speed: 'slow',
 *  activateitem: '1',
 *  active: 'current',
 *  header: 'title',
 *  hover: 'highlight',
 *  opened: 'arrowdown',
 *  closed: 'arrowup'
 *  keepheight: 'true'
 * });
 */
(function($){
    $.fn.hoverAccordion = function(options){
        // Setup options
        options = jQuery.extend({
            speed: 'fast', // Speed at which the subitems open up - valid options are: slow, normal, fast
            activateitem: 'true', // 'true': Automatically activate items with links corresponding to the current page, '2': Activate item #2
            active: 'active', // Class name of the initially active element
            header: 'header', // Class name for header items
            hover: 'hover', // Class name for hover effect
            opened: 'opened', // Class name for open header items
            closed: 'closed', // Class name for closed header items
            keepheight: 'true' // 'true': Set the height of each accordion item to the size of the largest one, 'false': Leave height as is
        }, options);
        
        // Current hover status
        var thislist = this;
        
        // Current URL
        var thisurl = window.location.href;
        
        // Interval for detecting intended element activation
        var i = 0;
        
        // Change display status of subitems when hovering
        function doHover(obj){
            if ($(obj).html() == undefined) 
                obj = this;
            
            // Change only one display status at a time
            if (!thislist.is(':animated')) {
                var newelem = $(obj).parent().children('ul');
                var oldelem = $(obj).parent().parent().children('li').children('ul:visible');
                if (options.keepheight == 'true') {
                    thisheight = maxheight;
                }
                else {
                    thisheight = newelem.height();
                }
                
                // Change display status if not already open
                if (!newelem.is(':visible')) {
                    newelem.children().hide();
                    newelem.animate({
                        height: thisheight
                    }, {
                        step: function(n, fx){
                            newelem.height(thisheight - n);
                        },
                        duration: options.speed
                    }).children().show();
                    
                    oldelem.animate({
                        height: 'hide'
                    }, {
                        step: function(n, fx){
                            newelem.height(thisheight - n);
                        },
                        duration: options.speed
                    }).children().hide();
                    
                    // Switch classes for headers
                    oldelem.parent().children('a').addClass(options.closed).removeClass(options.opened);
                    newelem.parent().children('a').addClass(options.opened).removeClass(options.closed);
                }
            }
        };
        
        var itemNo = 0;
        var maxheight = 0;
        
        // Setup initial state and hover events
        $(this).children('li').each(function(){
            var thisitem = $(this);
            
            itemNo++;
            
            // Set current link to current URL to 'active' and disable anchor links
            var thislink = thisitem.children('a');
            
            if (thislink.length > 0) {
                // Hover effect for all links
                thislink.hover(function(){
                    $(this).addClass(options.hover);
                }, function(){
                    $(this).removeClass(options.hover);
                });
                
                var thishref = thislink.attr('href');
                
                if (thishref == '#') {
                    // Add a click event if the header does not contain a link
                    thislink.click(function(){
                        doHover(this);
                        this.blur();
                        return false;
                    });
                }
                else 
                    if (options.activateitem == 'true' && thisurl.indexOf(thishref) > 0 && thisurl.length - thisurl.lastIndexOf(thishref) == thishref.length) {
                        thislink.parent().addClass(options.active);
                    }
            }
            
            var thischild = thisitem.children('ul');
            
            // Initialize subitems
            if (thischild.length > 0) {
                if (maxheight < thischild.height()) 
                    maxheight = thischild.height();
                
                // Change appearance of the header element of the active item
                thischild.children('li.' + options.active).parent().parent().children('a').addClass(options.header);
                
                // Bind hover events to all subitems
                thislink.hover(function(){
                    var t = this;
                    i = setInterval(function(){
                        doHover(t);
                        clearInterval(i);
                    }, 400);
                }, function(){
                    clearInterval(i);
                });
                
                
                // Set current link to current URL to 'active'
                if (options.activateitem == 'true') {
                    thischild.children('li').each(function(){
                        var m = $(this).children('a').attr('href');
                        if (m) {
                            if (thisurl.indexOf(m) > 0 && thisurl.length - thisurl.lastIndexOf(m) == m.length) {
                                $(this).addClass(options.active).parent().parent().children('a').addClass(options.opened);
                            }
                        }
                    });
                }
                else 
                    if (parseInt(options.activateitem) == itemNo) {
                        thisitem.addClass(options.active).children('a').addClass(options.opened);
                    }
            }
            
            // Close all subitems except for those with active items
            thischild.not($(this).parent().children('li.' + options.active).children('ul')).not(thischild.children('li.' + options.active).parent()).hide().parent().children('a').addClass(options.closed);
        });
        
        return this;
    };
})(jQuery);

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
/* General Styles */
*{
margin:0;
padding:0;
border:0px none #FFFFFF;
}
* html ul ul li{
margin-bottom:-1px;
}
* html ul ul li a,* html ul li a{
height:100%;
}
a{
color:#FFFFFF;
text-decoration:underline;
}
body{
margin:20px;
padding:0 0 0 0;
background:#808080 repeat-y center;
color:#F0F0F0;
font-family:'Lucida Grande','Segoe UI',Arial,Helvetica,sans-serif;
font-size:85%;
line-height:140%;
}
code{
padding:0.5em;
border-top:1px solid #666666;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #666666;
margin:0.5em 0 0.5em 0;
display:block;
}
h1{
margin:1em 0 0.5em 0;
display:block;
font-weight:normal;
}
h2{
border-top:1px solid #F0F0F0;
padding-top:0.5em;
margin:1em 0 1em 0;
display:block;
font-weight:normal;
}
#content{
margin:30px;
width:400px;
border-top:1px solid #999999;
border-right:1px solid #666666;
border-bottom:1px solid #666666;
border-left:1px solid #999999;
padding:20px;
}

/* Styles for AccordionMenu */

#accordionMenu{
margin:0;
padding:0;
width:200px;
list-style-type:none;
line-height:120%;
}
#accordionMenu .closed{
background-image:url(ha-down.gif);
}
#accordionMenu .closed,#accordionMenu .opened{
padding-right:10px;
background-position:98% 50%;
background-repeat:no-repeat;
}
#accordionMenu .header{
background-color:#7B7B7B;
}
#accordionMenu .opened{
background-image:url(ha-up.gif);
}
#accordionMenu a{
display:block;
font-weight:bold;
text-decoration:none;
}
#accordionMenu a.hover{
border-top:1px solid #5F5F5F;
border-bottom:1px solid #7B7B7B;
background-color:#7B7B7B;
color:#FFFFFF;
}
#accordionMenu ul{
overflow: hidden;
margin:0;
padding:0;
}
#accordionMenu li{
margin:0;
padding:0;
list-style-type:none;
background-color:#848484;
color:#FFFFFF;
}
#accordionMenu li a{
padding:2px 10px 2px 4px;
border-top:1px solid #9A9A9A;
border-left:1px solid #9A9A9A;
border-right:1px solid #696969;
border-bottom:1px solid #757575;
background-color:#848484;
color:#FFFFFF;
}
#accordionMenu li.active a,#accordionMenu li li.active a{
border-top:1px solid #5F5F5F;
border-bottom:1px solid #7B7B7B;
border-left:1px solid #757575;
border-right:1px solid #9A9A9A;
background-color:#404040;
color:#FFFFFF;
}
#accordionMenu li.active li a,#accordionMenu li li a{
padding:2px 4px 2px 8px;
border-top:1px solid #696969;
border-left:1px solid #696969;
border-right:1px solid #8A8A8A;
border-bottom:1px solid #7B7B7B;
background-color:#757575;
color:#FFFFFF;
}


/* Styles for Accordion */
#accordion{
margin:0;
padding:0;
width:300px;
list-style-type:none;
background-color:#FFFFFF;
color:#000000;
line-height:120%;
height:300px;
}
#accordion a{
display:block;
font-weight:normal;
text-decoration:none;
}
#accordion ul{
overflow: hidden;
margin:0;
padding:0;
}
#accordion li{
margin:0;
padding:0;
list-style-type:none;
}
#accordion li a{
width:285px;
padding:5px 0 0 15px;
display:block;
color:#000000;
background-image:url(ha-header.jpg);
height:25px;
}
#accordion li a.closed{
color:#000000 !important;
background-image:url(ha-header.jpg) !important;
}
#accordion li.firstitem a.closed{
color:#000000 !important;
background-image:url(ha-header-first.jpg) !important;
}
#accordion li.lastitem a.closed{
color:#000000 !important;
background-image:url(ha-header-last.jpg) !important;
}
#accordion li li{
border-left:1px solid #E5E5E5;
border-right:1px solid #E5E5E5;
padding:0 15px 0 15px;
height:175px;
}
#accordion li a.opened{
background-image:url(ha-header-active.jpg);
color:#FFFFFF;
}
#accordion li.firstitem a.opened{
background-image:url(ha-header-first-active.jpg);
color:#FFFFFF;
}
#accordion li.lastitem li{
margin-bottom:-4px;
}
#accordion li.lastitem ul{
background-image:url(ha-footer.jpg);
background-repeat:no-repeat;
background-position:bottom;
padding-bottom:4px;
}

このサンプルを編集して試してみる!

    $(function() {
      $('#accordionMenu').hoverAccordion();
    }); 


 <ul id="accordionMenu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a>
      <ul>
        <li><a href="?id=2a#ex1">Subitem 2a</a></li>
        <li><a href="?id=2b#ex1">Subitem 2b</a></li>
        <li><a href="?id=2c#ex1">Subitem 2c</a></li>
        <li><a href="?id=2d#ex1">Subitem 2d</a></li>
        <li><a href="?id=2e#ex1">Subitem 2e</a></li>
      </ul>
    </li>
 
  </ul>

JavaScript + Ajax 実践サンプル集 (1127本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...

jQueryのhoverAccordionプラグインを利用したアコーディオンメニュー

JavaScript + Ajax 実践サンプル集 (1127本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...

jQueryのhoverAccordionプラグインを利用したアコーディオンメニュー

JavaScript + Ajax 実践サンプル集 (1127本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...