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 相关文章推荐
javascript 对象比较实现代码
Apr 27 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
Apr 11 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
javascript中new关键字详解
Dec 14 Javascript
javaScript中的原型解析【推荐】
May 05 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
详解js数组的完全随机排列算法
Dec 16 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
Dec 20 Javascript
深入理解Vue.js源码之事件机制
Sep 27 Javascript
JS实现移动端触屏拖拽功能
Jul 31 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
js实现带积分弹球小游戏
Jul 21 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 404错误页面实现代码
2009/06/22 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
Position属性之relative用法
2015/12/14 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
详解JavaScript 为什么要有 Symbol 类型?
2019/04/03 Javascript
vue实例的选项总结
2020/06/09 Javascript
怎么使用pipenv管理你的python项目
2018/03/12 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
把Anaconda中的环境导入到Pycharm里面的方法步骤
2020/10/30 Python
python 模拟登陆github的示例
2020/12/04 Python
pycharm实现猜数游戏
2020/12/07 Python
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
一套带答案的C++笔试题
2014/01/10 面试题
函授毕业生自我鉴定
2013/11/06 职场文书
酒店采购员岗位职责
2014/03/14 职场文书
致共产党员倡议书
2014/04/16 职场文书
语文课外活动总结
2014/08/27 职场文书
2015年环保局工作总结
2015/05/22 职场文书
四大名著读书笔记
2015/06/25 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
合作合同协议书
2016/03/21 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书
基于Redis过期事件实现订单超时取消
2021/05/08 Redis
美元符号 $
2022/02/17 杂记
python数据处理之Pandas类型转换
2022/04/28 Python
服务器间如何实现文件共享
2022/05/20 Servers