简洁实用jQuery下拉展示导航菜单

2015-02-18 21:50:11  访问(1882) 赞(0) 踩(0)

  • <!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下拉展示导航菜单</title>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body
        {
            font-size: 12px;
            text-align: left;
        }
        .slowx
        {
            width: 150px;
            margin: 20px auto;
            position: relative;
        }
        .slowx p
        {
            width: 144px;
            height: 24px;
            line-height: 24px;
            padding-left: 4px;
            border: 1px solid #ccc;
            color: #807a62;
            cursor: pointer;
        }
        .slowx ul
        {
            width: 148px;
            margin-top: 2px;
            border: 1px solid #ccc;
            position: absolute;
            display: none;
        }
        .slowx ul li
        {
            height: 24px;
            line-height: 24px;
            padding-left: 10px;
            cursor: pointer;
        }
        .slowx ul li:hover
        {
            background: #ccc;
            color: #fff;
        }
    </style>
</head>
<body>
    <!-- 代码begin -->
    <div class="slowx">
        <p>
            点击选择懒人之家栏目</p>
        <ul class="listUl">
            <li>首页</li>
            <li>Flash素材</li>
            <li>菜单导航</li>
            <li>时间日期</li>
            <li>焦点图</li>
            <li>tab标签</li>
            <li>jquery特效</li>
            <li>在线客服</li>
            <li>广告代码</li>
            <li>相册代码</li>
            <li>图片特效</li>
            <li>名站特效</li>
            <li>其他代码</li>
            <li>亚当学院</li>
            <li>HTML5</li>
        </ul>
    </div>

    <script type="text/javascript" language="javascript" src="<%=jQuery%>"></script>

    <script type="text/javascript" language="javascript">
        $(function() {
            //点击后判断ul是否隐藏
            $(".slowx p").click(function() {
                var ul = $(".listUl");
                if (ul.css("display") == "none") {
                    ul.slideDown(200);
                } else {
                    ul.slideUp(200);
                }
            });
            //选中某个内容后赋值给p标签，并隐藏ul列表
            $(".slowx li").click(function() {
                var txt = $(this).text();
                $(".slowx p").html(txt);
                $(".listUl").hide();
            });
        });
    </script>

    <!-- 代码end -->
</body>
</html>


参考来源：http://www.lanrenzhijia.com/nav/2889.html


上一条：

下一条：


版权声明：
如果本站的资源使用了您的作品，请联系我们，我们会及时的注明
本站所有的资源均为免费自由下载，目的是让大家学习和交流
由于收集过程中几经转载，所以很多作品的原作者不详
如果您不愿在本站展示，请联系我们，我们会及时删除
 

相关评论

评论加载中……
 

发表评论

类型：
内容：
  (Alt+Enter)
 
  ┈全部┈  
 
（显示默认分类）