学习JQUERY,写的简单下拉菜单！

最新推荐文章于 2023-10-06 22:18:06 发布

啵呗

最新推荐文章于 2023-10-06 22:18:06 发布

阅读量1.2k

点赞数

分类专栏：个人心得文章标签： jquery class function div float menu

本文链接：https://blog.csdn.net/bobay/article/details/7890725

版权

个人心得专栏收录该内容

26 篇文章 1 订阅

订阅专栏

HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.7.2/jquery.min.js"></script>
        <title>side menu</title>
    </head>
    <body>
        <div id="menu">
            <div class="m-one">
                <span class="m-tit">主菜单01</span>
                <ul class="m-ul">
                    <li class="m-li">子菜单11</li>
                    <li class="m-li">子菜单12</li>
                    <li class="m-li">子菜单13</li>
                </ul>
            </div>
            <div class="m-one">
                <span class="m-tit">主菜单02</span>
                <ul class="m-ul">
                    <li class="m-li">子菜单21</li>
                    <li class="m-li">子菜单22</li>
                    <li class="m-li">子菜单23</li>
                </ul>
            </div>
            <div class="m-one">
                <span class="m-tit">主菜单03</span>
                <ul class="m-ul">
                    <li class="m-li">子菜单31</li>
                    <li class="m-li">子菜单32</li>
                    <li class="m-li">子菜单33</li>
                </ul>
            </div>
            <div class="m-one">
                <span class="m-tit">主菜单04</span>
                <ul class="m-ul">
                    <li class="m-li">子菜单41</li>
                    <li class="m-li">子菜单42</li>
                    <li class="m-li">子菜单43</li>
                </ul>
            </div>
            <div class="m-one">
                <span class="m-tit">主菜单05</span>
                <ul class="m-ul">
                    <li class="m-li">子菜单51</li>
                    <li class="m-li">子菜单52</li>
                    <li class="m-li">子菜单53</li>
                </ul>
            </div>
        </div>
    </body>
</html>

CSS代码：

#menu {}
.m-one {float:left;width:100px;height:40px;line-height:40px; text-align:center; background:#eeeeee;}
.m-one:hover{background:#dddddd;}
ul,li {list-style:none; margin:0;padding:0;}
.m-ul {background:#dddddd; display:none;}
.m-li {font-size:12px; height:25px; line-height:25px;}
.m-li:hover {background:#cccccc;}

JQUERY代码：

$(document).ready(function() {
                $('.m-one').hover(
                    function(){$(this).children('.m-ul').slideDown(200);},
                    function(){$(this).children('.m-ul').slideUp(200);}
                );
            });