Architect's Log

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

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

JavaScript 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="#">メニュー１</a></li>
                    <li><a href="#">メニュー２</a></li>
                    <li><a href="#">メニュー３</a></li>
                    <li><a href="#">メニュー４</a></li>
                    <li><a href="#">メニュー５</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>