Architect's Log

I'm a Cloud Architect. I'm highly motivated to reduce toils with driving DevOps.

【jQuery】マウスホバーをトリガーにしたトグルメニューのサンプル

マウスホバーをトリガーにしたトグルメニューのサンプルです。

動作





ソースコード

<body>
    <div id="container">
        <ul class="dropdown" style="width: 200px; border: 1px solid #000000">
            <li class="dropdown_trigger"><a href="#">ナビゲーションメニュー</a>
                <ul>
                    <li><a href="#">メニュー1</a></li>
                    <li><a href="#">メニュー2</a></li>
                    <li><a href="#">メニュー3</a></li>
                    <li><a href="#">メニュー4</a></li>
                    <li><a href="#">メニュー5</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
</script>
<script type="text/javascript">
(function ($) {
    function initDropdown() {
        if (!$('ul.dropdown').length) {
            return
        }

        // ナビゲーションメニューのhoverでサブメニューの表示/非表示を切り替える
        $('ul.dropdown li.dropdown_trigger').hover(function () {
            $(this).find('ul').fadeIn(1);
        },
        function () {
            $(this).find('ul').hide();
        });
    }

    $(document).ready(function () {
        initDropdown();
    });
})(jQuery);
</script>