JS实现仿京东淘宝竖排二级导航


Posted in Javascript onDecember 08, 2014

代码很简单,就不多废话了,直接奉上代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title></title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

<script type="text/javascript">

    function hoversee(){

    var list = document.getElementById('nav');

    var zu = list.getElementsByTagName("li");

    for(var i=0;i<9;i++)

    {

        zu[i].onmouseover = function(){

            this.getElementsByTagName('dl')[0].style.display = "block";

        }

        zu[i].onmouseout = function(){

            this.getElementsByTagName('dl')[0].style.display = "none";

        }

    }

    }

    window.onload = hoversee;

</script>

<style>

    *{

        font-family:Microsoft YaHei;

        margin:0;

        padding:0;

    }

    body{width:100%;}

    ul{list-style: none;}

    a{text-decoration: none;}

    #header{

        height:50px;

        line-height:50px;

        background:#455A6E;

    }

    #header h2,#header h3{

        font-weight:500;

    }

    #header h2{

        color:#fff;

        font-size:18px;

        width:180px;

        text-align: center;

        background:#0D2E49;

    }

    #header h3{color:#fff;font-size:16px;}

    .mycenter{

        width:900px;

        margin:0 auto;

    }

    #header div.mycenter{

        /*相对定位*/

        position:relative;

    }

    #nav {

        width:180px;

        background:rgba(0, 102, 173, 0.5);

        z-index:999;

    }

    #nav li{

        height:40px;

        padding-left:40px;

        line-height: 40px;

        position:relative;

    }

    #nav h3{height:40px;}

    #nav li dl{

        position:relative;

        left:140px;

        top:-40px;

        width:150px;

        background:#fff;

        display:none;

        padding:8px 10px;

    }

    #nav dt{

        width:150px;

        line-height: 30px;

        height:30px;

        background:#36C1AF;

        color:#fff;

        text-align: center;

    }

    #nav dd a{

        display:block;

        height:30px;

        width:150px;

        font-size:14px;

        color:#858585;

    }

    #nav dd a:hover{

        text-decoration: underline;

    }

    #content{

        background:#E95200;

        height:500px;

    }

</style>

</head>

<body>

    <div id="header">

        <div class="mycenter">

            <h2>后台管理菜单</h2>

            <ul id="nav">

                <li>

                    <h3>帐号管理</h3>

                    <dl>

                        <dt>帐号管理</dt>

                        <dd>

                            <a href="#">修改密码</a>

                            <a href="#">修改用户名</a>

                            <a href="#">设置密保问题</a>

                        </dd>

                    </dl>

                </li>

                <li>

                    <h3>首页管理</h3>

                    <dl>

                        <dt>首页管理</dt>

                        <dd>

                            <a href="#">轮转照片设置</a>

                            <a href="#">产品展示照片设置</a>

                            <a href="#">底部信息修改</a>

                        </dd>

                    </dl>

                </li>

                <li>

                    <h3>产品管理</h3>

                    <dl>

                        <dt>产品管理</dt>

                        <dd>

                            <a href="#">增加新产品</a>

                            <a href="#">管理全部产品</a>

                            <a href="#">类别管理</a>

                        </dd>

                    </dl>

                </li>

                <li>

                    <h3>新闻管理</h3>

                    <dl>

                        <dt>新闻管理</dt>

                        <dd>

                            <a href="#">发布新闻</a>

                            <a href="#">全部新闻管理</a>

                            <a href="#">增加系列</a>

                            <a href="#">新闻系列管理</a>

                        </dd>

                    </dl>

                </li>

                <li>

                    <h3>反馈管理</h3>

                    <dl>

                        <dt>反馈管理</dt>

                        <dd>

                            <a href="#">管理所有反馈</a>

                        </dd>

                    </dl>

                </li>

                <li>

                    <h3>企业信息管理</h3>

                    <dl>

                        <dt>企业信息管理</dt>

                        <dd>

                            <a href="#">企业简介</a>

                            <a href="#">企业联系方式设置</a>

                            <a href="#">人才招聘管理</a>

                        </dd>

                    </dl>

                </li>

                <li>

                    <h3>权限管理</h3>

                    <dl>

                        <dt>权限管理</dt>

                        <dd>

                            <a href="#">添加新管理员</a>

                            <a href="#">查看所有账号权限</a>

                            <a href="#">查看申诉</a>

                        </dd>

                    </dl>

                </li>

                <li>

                    <h3>功能管理</h3>

                    <dl>

                        <dt>功能管理</dt>

                        <dd>

                            <a href="#">一级功能设置</a>

                        </dd>

                    </dl>

                </li>

                <li>

                    <h3>权限查看与申请</h3>

                    <dl>

                        <dt>权限查看与申请</dt>

                        <dd>

                            <a href="#">查看自己的权限</a>

                            <a href="#">申请权限</a>

                        </dd>

                    </dl>

                </li>

            </ul>

        </div>

    </div>

    <div id="content">

    </div>

    <div id="footer">

    </div>

</body>

</html>

小伙伴们根据自己的需求,将调用代码加进去就可以了,自由发挥吧。

Javascript 相关文章推荐
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
js弹出层之1:JQuery.Boxy (二)
Oct 06 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
比较新旧两个数组值得增加和删除的JS代码
Oct 30 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 Javascript
JavaScript函数节流和函数防抖之间的区别
Feb 15 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 Javascript
AngularJS实现的锚点楼层跳转功能示例
Jan 02 Javascript
VUE2.0中Jsonp的使用方法
May 22 Javascript
vue使用v-for实现hover点击效果
Sep 29 Javascript
Django+vue跨域问题解决的详细步骤
Jan 20 Javascript
微信小程序页面调用自定义组件内的事件详解
Sep 12 Javascript
js继承call()和apply()方法总结
Dec 08 #Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 #Javascript
详解Javascript动态操作CSS
Dec 08 #Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 #Javascript
实例讲解JQuery中this和$(this)区别
Dec 08 #Javascript
Jquery实现由下向上展开效果的例子
Dec 08 #Javascript
Javascript常用字符串判断函数代码分享
Dec 08 #Javascript
You might like
如何提高MYSQL数据库的查询统计速度 select 索引应用
2007/04/11 PHP
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
PHP输出数组中重名的元素的几种处理方法
2012/09/05 PHP
php curl获取网页内容(IPV6下超时)的解决办法
2013/07/16 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
js正确获取元素样式详解
2009/08/07 Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
为jQuery增加join方法的实现代码
2010/11/28 Javascript
javascript实现原生ajax的几种方法介绍
2013/09/21 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
php register_shutdown_function函数详解
2017/07/23 Javascript
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
详解vuex状态管理模式
2018/11/01 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
更强大的vue ssr实现预取数据的方式
2019/07/19 Javascript
JS 自执行函数原理及用法
2019/08/05 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
Python操作Excel之xlsx文件
2017/03/24 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
全球精选男装和家居用品:Article
2020/04/13 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述
2013/03/30 面试题
个人自我鉴定
2013/11/07 职场文书
大学生学雷锋活动总结
2014/06/26 职场文书
机关作风整顿个人整改措施2014
2014/09/17 职场文书
机关作风整顿个人剖析材料
2014/10/06 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang