JS实现仿京东淘宝竖排二级导航
代码很简单，就不多废话了，直接奉上代码：
<!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+CSS实现精美的二级导航效果代码
本文实例讲述了JS+CSS实现精美的二级导航效果代码.分享给大家供大家参考.具体如下: 这是一款基于JS+CSS实现的精美二级导航,适合想学一些基础点的.基础js知识技巧的朋友们.其实本菜单的完成不仅仅是需要基础知识,更需要的是对CSS熟悉之后的巧妙构思,菜单可能都会写,但写出好菜单就不那么容易了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jm-2l-nav-menu-codes/ 具体代码如下: <!DOCTYPE htm
-
JS实现的简洁二级导航菜单雏形效果
本文实例讲述了JS实现的简洁二级导航菜单雏形效果.分享给大家供大家参考.具体如下: 这是一个二级导航菜单雏形,风格简洁,圆角形,也是当前比较流行的菜单效果,支持二级,演示内容是随便搞的,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-2l-nav-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
-
JS实现黑色大气的二级导航菜单效果
本文实例讲述了JS实现黑色大气的二级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款自己做的不错的二级导航菜单,黑色风格,是根据仿淘宝支付宝菜单而做的,自我感觉还算行吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-black-style-2l-nav-menu-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-
js实现横向伸展开的二级导航菜单代码
本文实例讲述了js实现横向伸展开的二级导航菜单代码.分享给大家供大家参考.具体如下: 这是一款js实现的横向伸展开二级导航菜单,鼠标放在一级菜单的第四个菜单项上,就能展开二级的菜单,菜单没有过多美化,只是一般的修饰,使用的朋友可根据您自己的网站风格重新美化菜单风格. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-r-show-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3
-
基于dropdown.js实现的两款美观大气的二级导航菜单
本文实例讲述了基于dropdown.js实现的两款美观大气的二级导航菜单.分享给大家供大家参考.具体如下: 1. 蓝色风格导航菜单 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-dropdown-blue-style-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
-
js实现二级导航功能
效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> a{text-decoration: none;} *{margin: 0;padding: 0;box-sizing: border-box;font-family: &quo
-
js实现的黑背景灰色二级导航菜单效果代码
本文实例讲述了js实现的黑背景灰色二级导航菜单效果代码.分享给大家供大家参考.具体如下: 这是一款js实现的黑背景灰色二级导航菜单,兼容IE6.firefox的js+css横向二极导航菜单.挺简洁,不过很清新,二级菜单是水平显示在主菜单的下方,采用流行的微软雅黑字体,若不想用这种字体,可换成默认的宋体即可. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-black-bgcolor-2level-nav-style-codes/ 具体代码如
-
JavaScript实现简单的二级导航菜单实例
本文实例讲述了JavaScript实现简单的二级导航菜单的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" la
-
以JavaScript来实现WordPress中的二级导航菜单的方法
导航菜单 导航菜单早已 "深入民心", 在博客上的应用日益重要且多样. 从本文开始, 我将开展几个关于 WordPress 导航菜单的话题, 讨论如何在 WordPress 上使用和加强导航菜单, 话题间有一定的承接关系, 难度也会逐步增加. WordPress 上的导航菜单一般有两种, 页面导航菜单和分类导航菜单. 可曾记得? WordPress 是可以撰写独立页面的, 页面导航菜单就是以首页和各个独立页面组成的菜单. 而分类导航菜单则是以首页和各个分类组成的菜单. 这是效果演示 既
-
JS实现仿京东淘宝竖排二级导航
代码很简单,就不多废话了,直接奉上代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="
-
Android仿京东淘宝自动无限循环轮播控件思路详解
在App的开发中,很多的时候都需要实现类似京东淘宝一样的自动无限轮播的广告栏,所以就自己写了一个,下面是我自定义控件的思路和过程. 一.自定义控件属性 新建自定义控件SliderLayout继承于RelativeLayout,首先要考虑的就是自定义的控件需要扩展那些属性,把这些属性列出来.在这里是要实现类似于京东淘宝的无限轮播广告栏,那么首先想到的就是轮播的时长.轮播指示器的样式等等.我在这里列举了一些并且结合到了代码中. 1.扩展属性 (1)是否开启自动轮播的功能. (2)指示器的图形样式,一
-
Android中使用TextView实现高仿京东淘宝各种倒计时效果
今天给大家带来的是仅仅使用一个TextView实现一个高仿京东.淘宝.唯品会等各种电商APP的活动倒计时.最近公司一直加班也没来得及时间去整理,今天难得休息想把这个分享给大家,只求共同学习,以及自己后续的复习.为什么会想到使用一个TextView来实现呢?因为最近公司在做一些优化的工作,其中就有一个倒计时样式,原来开发的这个控件的同事使用了多个TextView拼接在一起的,实现的代码冗余比较大,故此项目经理就说:小宏这个就交给你来优化了,并且还要保证有一定的扩展性,当时就懵逼了.不知道从何处开始
-
Android仿美团淘宝实现多级下拉列表菜单功能
我们在常用的电商或者旅游APP中,例如美团,手机淘宝等等,都能够看的到有那种下拉式的二级列表菜单.具体如图所示: 上面两张图就是美团的一个二级列表菜单的一个展示.我相信很多人都想开发一个跟它一样的功能放到自己的APP中.好,接下来我们就开始动手,解决它. 1.结构分析 首先,我们给出这个下拉菜单需要的组建.我们用线框图来分析. 1)如上图所示,最外围的是一个Activity,顶部包含了一个View的容器,这个容器主要是装载ToggleButton来实现诸如美团里面的"美食,全城,理我最近,刷选&
-
js实现仿京东2级菜单效果(带延时功能)
本文实例讲述了jquery实现仿京东2级菜单效果.分享给大家供大家参考.具体如下: 这里介绍js实现仿京东2级菜单效果代码,带有延时功能,操作上更加舒适自然. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fjd-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:
-
JS实现仿FLASH效果的竖排导航代码
本文实例讲述了JS实现仿FLASH效果的竖排导航代码.分享给大家供大家参考.具体如下: 这是一款JS+CSS实现的Flash效果的导航菜单,竖向排列,兼容性好,由JavaScript妙味课堂的朋友编写,欢迎测试. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-flash-style-v-nav-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition
-
基于JS实现仿京东搜索栏随滑动透明度渐变效果
废话不多说,直接上代码: 1.HTML <header class="module-layer"> <div class="module-layer-content"> <div class="search-box-cover"></div> <p class="layer-return"></p> <h1 class="layer-hea
-
js实现仿爱微网两级导航菜单效果代码
本文实例讲述了js实现仿爱微网两级导航菜单效果代码.分享给大家供大家参考.具体如下: 这是一款仿爱微网两级导航菜单,tab选项卡形式的导航菜单,原生js做的tab选项卡型的导航菜单,需要鼠标点击才切换出二级子菜单,可修改成鼠标移过去就更换内容的形式. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fawei-web-nav-menu-style-codes/ 具体代码如下: <html> <head> <title&g
-
Android实现淘宝底部图标导航栏
在上一篇中,简单的使用透明主题的Activity实现了仿微信右侧顶部的对话框,上午又花了两个小时研究了一下淘宝底部的导航栏实现,网上的做法也有很多,今天我就使用一种通过基本控件加上布局的方式,没有任何的自定义风格,控件等来实现,还是老样子,先看一下效果图: 下面就来具体看一看如何实现的,还是按照步骤来吧: 绘制主界面 activity_layout.xml代码如下: <?xml version="1.0" encoding="utf-8"?> <R
-
js面向对象之实现淘宝放大镜
本文实例为大家分享了js实现淘宝放大镜的具体代码,供大家参考,具体内容如下 描述: JS面向对象--淘宝放大镜实现 图片的引用是一个大图,一个小图 传输用的ajax,记得改成自己的ip地址,js和html都改一下 效果: 实现: js文件: LoadMethod.js class LoadMethod{ static get LOAD_IMG_FINISH(){ return "load_img_finish"; } static init(sourceList){ let img=n