织梦园模板网提供云优cms模板,pbootcms模板,Wordpress主题模板等各类企业新闻资讯网站模板下载服务。织梦园网站模板交流群
用户名:
密码:
注册
注册后享受折扣价

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

织梦园模板 / 2019-03-19 / 收藏
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);}  
                );  
            });  

相关辅助文档

收缩