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数据结构与算法之栈详解
Mar 12 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
基于Jquery实现万圣节快乐特效
Nov 01 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Dec 02 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
Sep 17 Javascript
微信小程序 引用其他js文件实现代码
Feb 22 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 Javascript
layui table 参数设置方法
Aug 14 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 Javascript
深入理解react-router 路由的实现原理
Sep 26 Javascript
JS二级菜单不同实现方法分析【4种方法】
Dec 21 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
Oct 13 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
Ajax+PHP边学边练 之五 图片处理
2009/12/03 PHP
php导出excel格式数据问题
2014/03/11 PHP
Java中final关键字详解
2015/08/10 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
文字幻灯片
2006/06/26 Javascript
javascript背投广告代码的完善
2008/04/08 Javascript
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
webpack打包多页面的方法
2018/11/30 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
微信小程序实现打卡签到页面
2020/09/21 Javascript
js实现简单的倒计时
2021/01/28 Javascript
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python追加元素到列表的方法
2015/07/28 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
在pycharm中显示python画的图方法
2019/08/31 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
python实现logistic分类算法代码
2020/02/28 Python
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
什么是会话Bean
2015/05/14 面试题
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
2015年招聘工作总结
2014/12/12 职场文书
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis