原生可控制二级导航菜单nav方向代码

2015-02-17 13:46:17  访问(1816) 赞(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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生可控制二级导航菜单nav方向代码</title>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .slowx
        {
            width: 1000px;
            height: 30px;
            line-height: 30px;
            margin: 200px auto;
        }
        .slowx li a
        {
            color: #fff;
            text-decoration: none;
            display: block;
            float: left;
            height: 30px;
            line-height: 30px;
            padding: 0px 15px;
            font-size: 12px;
            background: #636871;
        }
        .slowx li a:hover
        {
            background: #4b505a;
        }
        .slowx li
        {
            float: left;
            position: relative;
            height: 30px;
            line-height: 30px;
        }
        .slowx li .second
        {
            position: absolute;
            left: 0;
            display: none;
        }
    </style>
</head>
<body>
    <ul class="slowx">
        <li><a href='<%=strWebPhyPath%>/'>首页</a>
            <div class="second">
                <a href='<%=strWebPhyPath%>/'>首页</a> <a href='<%=strWebPhyPath%>/'>首页</a> <a href='<%=strWebPhyPath%>/'>
                    首页</a> <a href='<%=strWebPhyPath%>/'>首页</a>
            </div>
        </li>
        <li><a href='<%=strWebPhyPath%>/nav/'>菜单导航</a>
            <div class="second">
                <a href='<%=strWebPhyPath%>/nav/'>菜单导航</a> <a href='<%=strWebPhyPath%>/nav/'>菜单导航</a>
                <a href='<%=strWebPhyPath%>/nav/'>菜单导航</a> <a href='<%=strWebPhyPath%>/nav/'>菜单导航</a>
            </div>
        </li>
        <li><a href='<%=strWebPhyPath%>/time/'>时间日期</a>
            <div class="second">
                <a href='<%=strWebPhyPath%>/time/'>时间日期</a> <a href='<%=strWebPhyPath%>/time/'>时间日期</a>
                <a href='<%=strWebPhyPath%>/time/'>时间日期</a> <a href='<%=strWebPhyPath%>/time/'>时间日期</a>
            </div>
        </li>
        <li><a href='<%=strWebPhyPath%>/banner/'>焦点图</a>
            <div class="second">
                <a href='<%=strWebPhyPath%>/banner/'>焦点图</a> <a href='<%=strWebPhyPath%>/banner/'>焦点图</a>
                <a href='<%=strWebPhyPath%>/banner/'>焦点图</a> <a href='<%=strWebPhyPath%>/banner/'>焦点图</a>
            </div>
        </li>
        <li><a href='<%=strWebPhyPath%>/tab/'>tab标签</a>
            <div class="second">
                <a href='<%=strWebPhyPath%>/tab/'>tab标签</a> <a href='<%=strWebPhyPath%>/tab/'>tab标签</a>
                <a href='<%=strWebPhyPath%>/tab/'>tab标签</a> <a href='<%=strWebPhyPath%>/tab/'>tab标签</a>
            </div>
        </li>
        <li><a href='<%=strWebPhyPath%>/jquery/'>jquery特效</a>
            <div class="second">
                <a href='<%=strWebPhyPath%>/jquery/'>jquery特效</a> <a href='<%=strWebPhyPath%>/jquery/'>
                    jquery特效</a> <a href='<%=strWebPhyPath%>/jquery/'>jquery特效</a> <a href='<%=strWebPhyPath%>/jquery/'>
                        jquery特效</a>
            </div>
        </li>
        <li><a href='<%=strWebPhyPath%>/service/'>在线客服</a>
            <div class="second">
                <a href='<%=strWebPhyPath%>/service/'>在线客服</a> <a href='<%=strWebPhyPath%>/service/'>
                    在线客服</a> <a href='<%=strWebPhyPath%>/service/'>在线客服</a> <a href='<%=strWebPhyPath%>/service/'>
                        在线客服</a>
            </div>
        </li>
        <li><a href='<%=strWebPhyPath%>/ads/'>广告代码</a>
            <div class="second">
                <a href='<%=strWebPhyPath%>/ads/'>广告代码</a> <a href='<%=strWebPhyPath%>/ads/'>广告代码</a>
                <a href='<%=strWebPhyPath%>/ads/'>广告代码</a> <a href='<%=strWebPhyPath%>/ads/'>广告代码</a>
            </div>
        </li>
        <li><a href='<%=strWebPhyPath%>/album/'>相册代码</a>
            <div class="second">
                <a href='<%=strWebPhyPath%>/album/'>相册代码</a> <a href='<%=strWebPhyPath%>/album/'>相册代码</a>
                <a href='<%=strWebPhyPath%>/album/'>相册代码</a> <a href='<%=strWebPhyPath%>/album/'>相册代码</a>
            </div>
        </li>
        <li><a href='<%=strWebPhyPath%>/pic/'>图片特效</a>
            <div class="second">
                <a href='<%=strWebPhyPath%>/pic/'>图片特效</a> <a href='<%=strWebPhyPath%>/pic/'>图片特效</a>
                <a href='<%=strWebPhyPath%>/pic/'>图片特效</a> <a href='<%=strWebPhyPath%>/pic/'>图片特效</a>
            </div>
        </li>
        <li><a href='<%=strWebPhyPath%>/js/css3/'>HTML5</a>
            <div class="second">
                <a href='<%=strWebPhyPath%>/js/css3/'>HTML5</a> <a href='<%=strWebPhyPath%>/js/css3/'>
                    HTML5</a> <a href='<%=strWebPhyPath%>/js/css3/'>HTML5</a> <a href='<%=strWebPhyPath%>/js/css3/'>
                        HTML5</a>
            </div>
        </li>
    </ul>

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

    <script type="text/javascript" language="javascript">
        $(function() {
            var slowx = 0; // 默认值为0，二级菜单向下滑动显示；值为1，则二级菜单向上滑动显示
            if (slowx == 0) {
                $('.slowx li').hover(function() {
                    $('.second', this).css('top', '30px').show();
                }, function() {
                    $('.second', this).hide();
                });
            } else if (slowx == 1) {
                $('.slowx li').hover(function() {
                    $('.second', this).css('bottom', '30px').show();
                }, function() {
                    $('.second', this).hide();
                });
            }
        });
    </script>

</body>
</html>


参考来源：http://www.lanrenzhijia.com/nav/menu-daohang1231.html


上一条：

下一条：


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

相关评论

评论加载中……
 

发表评论

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