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 相关文章推荐
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 Javascript
jQuery自定义动画函数实例详解(附demo源码)
Dec 10 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
Aug 29 Javascript
jstree的简单实例
Dec 01 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
详解vue-cli 脚手架项目-package.json
Jul 04 Javascript
node前端模板引擎Jade之标签的基本写法
May 11 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
vue+element实现打印页面功能
May 20 Javascript
vue下的@change事件的实现
Oct 25 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 mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
python实现数组插入新元素的方法
2015/05/22 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
python3爬取各类天气信息
2018/02/24 Python
Python下调用Linux的Shell命令的方法
2018/06/12 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
关于 Python opencv 使用中的 ValueError: too many values to unpack
2019/06/28 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
西班牙高科技产品购物网站:MejorDeseo
2019/09/08 全球购物
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
教师网络培训感言
2014/03/09 职场文书
告知书格式
2015/07/01 职场文书
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python
MySQL 十大常用字符串函数详解
2021/06/30 MySQL
Nginx如何配置根据路径转发详解
2022/07/23 Servers