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 相关文章推荐
JQUERY 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
jquery右下角弹出提示框示例代码
Oct 08 Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 Javascript
js中数组的常用方法小结
Dec 30 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 Javascript
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
Vue非父子组件通信详解
Jun 12 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
Vue实现Layui的集成方法步骤
Apr 10 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
Aug 07 Javascript
JS ES6异步解决方案
Apr 29 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
PHP 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
老生常谈php中传统验证与thinkphp框架(必看篇)
2017/06/10 PHP
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
5 种JavaScript编码规范
2018/01/30 Javascript
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
Python中的异常处理学习笔记
2015/01/28 Python
详解python调度框架APScheduler使用
2017/03/28 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
python中entry用法讲解
2020/12/04 Python
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
什么是java序列化,如何实现java序列化
2012/11/14 面试题
英语教师岗位职责
2014/03/16 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
运动会加油口号
2014/06/07 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL
Java 写一个简单的图书管理系统
2022/04/26 Java/Android