首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

小伙伴们根据自己的需求，将调用代码加进去就可以了，自由发挥吧。

JS实现仿京东淘宝竖排二级导航

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery 1.2.x 升? 1.3.x 注意事项
May 06 Javascript
jquery.jstree 增加节点的双击事件代码
Jul 27 Javascript
ExtJS 入门
Oct 29 Javascript
JavaScript插件化开发教程 （二）
Jan 27 Javascript
JavaScript获取网页表单action属性的方法
Apr 02 Javascript
js删除Array数组中指定元素的两种方法
Aug 03 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
May 03 Javascript
node.js中express-session配置项详解
May 31 Javascript
vue.js国际化 vue-i18n插件的使用详解
Jul 07 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
Dec 31 Javascript
Vue.js组件高级特性实例详解
Dec 24 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
SLi Minor 2020(63) 巴西购物网站(71) 英国购物网站(954) 美国购物网站(1542) CPU(2) 新加坡购物网站(41) 香港购物网站(84) AE3805(1) 天梯图(1) 爱尔兰购物网站(30)
You might like
二招解决php乱码问题
2012/03/25 PHP
PHP安全性漫谈
2012/06/28 PHP
微信公众平台接口开发入门示例
2014/12/24 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
php简单统计字符串单词数量的方法
2015/06/19 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
基于datagrid框架的查询
2013/04/08 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
js实现图片无缝滚动特效
2020/03/19 Javascript
jQuery on()绑定动态元素出现的问题小结
2016/02/19 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
vue实现在线预览pdf文件和下载（pdf.js）
2019/11/26 Javascript
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
python实现分页效果
2017/10/25 Python
python 集合 并集、交集 Series list set 转换的实例
2018/05/29 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
python中if及if-else如何使用
2020/06/02 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
Gtech官方网站：地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
马耳他航空公司官方网站：Air Malta
2019/05/15 全球购物
Linux常见面试题
2016/10/04 面试题
企业节能减排实施方案
2014/03/19 职场文书
小班幼儿评语大全
2014/04/30 职场文书
五心教育心得体会
2014/09/04 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
学校施工安全责任书
2015/01/29 职场文书
护士自荐信怎么写
2015/03/06 职场文书
2016大学生社会实践单位评语
2015/12/01 职场文书
Redis过期数据是否会被立马删除
2022/07/23 Redis