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中Window对象的属性及事件
Dec 25 Javascript
JSON 必知必会 观后记
Oct 27 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 Javascript
微信小程序商品到详情的实现
Jun 27 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
ES6 javascript的异步操作实例详解
Oct 30 Javascript
Vue底层实现原理总结
Feb 17 Javascript
解决vue-cli + webpack 新建项目出错的问题
Mar 20 Javascript
vue 标签属性数据绑定和拼接的实现方法
May 17 Javascript
vue项目前端知识点整理【收藏】
May 13 Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 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
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
PHP开发中常用的字符串操作函数
2011/02/08 PHP
PHP内存缓存功能memcached示例
2016/10/19 PHP
PHP后台微信支付和支付宝支付开发
2017/04/28 PHP
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
js操作textarea 常用方法总结
2012/12/03 Javascript
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
BootStrap table实现表格行拖拽效果
2018/12/01 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
深入理解Python装饰器
2016/07/27 Python
python2 与 pyhton3的输入语句写法小结
2018/09/10 Python
python实现名片管理系统
2018/11/29 Python
Python小进度条显示代码
2019/03/05 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
Python实现最常见加密方式详解
2019/07/13 Python
python 字典套字典或列表的示例
2019/12/16 Python
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
会计自我鉴定范文
2013/10/06 职场文书
优秀交警事迹材料
2014/01/26 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2014年施工员工作总结
2014/11/18 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
2015年新教师个人工作总结
2015/10/14 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
欧元符号 €
2022/02/17 杂记
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏