按照国际惯例先放效果图
index.HTML
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- demo
- </title>
- <link rel="stylesheet" href="css/style.css">
- </head>
- <body>
- <div class="main" id="main">
- <div class="menu-box">
- </div>
- <!-- 子导航 -->
- <div class="sub-menu hide" id="sub-menu">
- <div class="inner-box">
- <div class="sub-inner-box">
- <div class="title">
- 手机, 配件
- </div>
- <div class="sub-row">
- <span class="bold mr10">
- 手机通讯:
- </span>
- <a href="">
- 手机
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 手机维修
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 以旧换新
- </a>
- </div>
- <div class="sub-row">
- <span class="bold mr10">
- 手机配件:
- </span>
- <a href="">
- 手机壳
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 手机存储卡
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 数据线
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 充电器
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 电池
- </a>
- </div>
- <div class="sub-row">
- <span class="bold mr10">
- 运营商:
- </span>
- <a href="">
- 中国联通
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 中国移动
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 中国电信
- </a>
- </div>
- <div class="sub-row">
- <span class="bold mr10">
- 智能设备:
- </span>
- <a href="">
- 智能手环
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 智能家居
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 智能手表
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 其他配件
- </a>
- </div>
- <div class="sub-row">
- <span class="bold mr10">
- 娱乐:
- </span>
- <a href="">
- 耳机
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 音响
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 收音机
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 麦克风
- </a>
- </div>
- </div>
- </div>
- <div class="inner-box">
- <div class="sub-inner-box">
- <div class="title">
- 电脑
- </div>
- <div class="sub-row">
- <span class="bold mr10">
- 电脑:
- </span>
- <a href="">
- 笔记本
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 平板
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 一体机
- </a>
- </div>
- <div class="sub-row">
- <span class="bold mr10">
- 电脑配件:
- </span>
- <a href="">
- 显示器
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- CPU
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 主板
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 硬盘
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 电源
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 显卡
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 其他配件
- </a>
- </div>
- <div class="sub-row">
- <span class="bold mr10">
- 游戏设备:
- </span>
- <a href="">
- 游戏机
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 耳机
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 游戏软件
- </a>
- </div>
- <div class="sub-row">
- <span class="bold mr10">
- 网络产品:
- </span>
- <a href="">
- 路由器
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 网络机顶盒
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 交换机
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 存储卡
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 网卡
- </a>
- </div>
- <div class="sub-row">
- <span class="bold mr10">
- 外部产品:
- </span>
- <a href="">
- 鼠标
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 键盘
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- U 盘
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 移动硬盘
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 鼠标垫
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 电脑清洁
- </a>
- </div>
- </div>
- </div>
- <div class="inner-box">
- <div class="sub-inner-box">
- <div class="title">
- 家用电器
- </div>
- <div class="sub-row">
- <span class="bold mr10">
- 电视:
- </span>
- <a href="">
- 国产品牌
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 韩国品牌
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 欧美品牌
- </a>
- </div>
- <div class="sub-row">
- <span class="bold mr10">
- 空调:
- </span>
- <a href="">
- 显示器
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 柜式
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 中央
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 壁挂式
- </a>
- </div>
- <div class="sub-row">
- <span class="bold mr10">
- 冰箱:
- </span>
- <a href="">
- 多门
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 对开门
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 三门
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 双门
- </a>
- </div>
- <div class="sub-row">
- <span class="bold mr10">
- 洗衣机:
- </span>
- <a href="">
- 滚筒式洗衣机
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 迷你洗衣机
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 洗烘一体机
- </a>
- </div>
- <div class="sub-row">
- <span class="bold mr10">
- 厨房电器:
- </span>
- <a href="">
- 油烟机
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 洗碗机
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 燃气灶
- </a>
- </div>
- </div>
- </div>
- <div class="inner-box">
- <div class="sub-inner-box">
- <div class="title">
- 家具
- </div>
- <div class="sub-row">
- <span class="bold mr10">
- 家纺:
- </span>
- <a href="">
- 被子
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 枕头
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 四件套
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 床垫
- </a>
- </div>
- <div class="sub-row">
- <span class="bold mr10">
- 灯具:
- </span>
- <a href="">
- 台灯
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 顶灯
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 节能灯
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 应急灯
- </a>
- </div>
- <div class="sub-row">
- <span class="bold mr10">
- 厨具:
- </span>
- <a href="">
- 烹饪锅具
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 餐具
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 菜板刀具
- </a>
- </div>
- <div class="sub-row">
- <span class="bold mr10">
- 家装:
- </span>
- <a href="">
- 地毯
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 沙发垫套
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 装饰字画
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 照片墙
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 窗帘
- </a>
- </div>
- <div class="sub-row">
- <span class="bold mr10">
- 生活日用:
- </span>
- <a href="">
- 收纳用品
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 浴室用品
- </a>
- <span class="ml10 mr10">
- /
- </span>
- <a href="">
- 雨伞雨衣
- </a>
- </div>
- </div>
- </div>
- </div>
- <!-- 主导航 -->
- <div class="menu-content" id="menu-content">
- <div class="menu-item">
- <a href="">
- <span>
- 手机, 配件
- </span>
- <i class="icon">
-
- </i>
- </a>
- </div>
- <div class="menu-item">
- <a href="">
- <span>
- 电脑
- </span>
- <i class="icon">
-
- </i>
- </a>
- </div>
- <div class="menu-item">
- <a href="">
- <span>
- 家用电器
- </span>
- <i class="icon">
-
- </i>
- </a>
- </div>
- <div class="menu-item">
- <a href="">
- <span>
- 家具
- </span>
- <i class="icon">
-
- </i>
- </a>
- </div>
- </div>
- <!-- 轮播图 -->
- <div class="banner" id="banner">
- <a href="">
- <div class="banner-slide slide1 slide-active">
- </div>
- </a>
- <a href="">
- <div class="banner-slide slide2">
- </div>
- </a>
- <a href="">
- <div class="banner-slide slide3">
- </div>
- </a>
- </div>
- <a href="javascript:void(0)" class="btn prev" id="prev">
- </a>
- <a href="javascript:void(0)" class="btn next" id="next">
- </a>
- <div class="dots" id="dots">
- <span class="active">
- </span>
- <span>
- </span>
- <span>
- </span>
- </div>
- </div>
- <script src="js/script.js">
- </script>
- </body>
- </HTML>
style.CSS
- /* 通用 */
- *{
- margin:0;
- padding:0;
- }
- @font-face{
- font-family: 'iconfont';
- src:url('../img/font/iconfont.eot');
- src:url('../img/font/iconfont.eot') format('embeded-opentype'),
- url('../img/font/iconfont.woff') format('woff'),
- url('../img/font/iconfont.ttf') format('truetype'),
- url('../img/font/iconfont.svg#iconfont') format('svg');
- }
- a{
- text-decoration:none;
- }
- a:link,a:visited{
- color:#5e5e5e;
- }
- body{
- font-family: "微软雅黑";
- color: #14191e;
- }
- .main{
- width:1200px;
- height:460px;
- margin:30px auto;
- position:relative;
- overflow:hidden;
- }
- /*banner*/
- .banner-slide{
- width:1200px;
- height:460px;
- float: left;
- display: none;
- }
- .slide-active{
- display: block;
- }
- .slide1{
- background-image:url(../img/bg1.jpg);
- }
- .slide2{
- background-image:url(../img/bg2.jpg);
- }
- .slide3{
- background-image:url(../img/bg3.jpg);
- }
- .btn{
- position: absolute;
- transform:rotate(180deg);
- top: 50%;
- left: 244px;
- height: 80px;
- width: 40px;
- margin-top:-40px;
- background:url(../img/arrow.PNG) center center no-repeat;
- }
- .btn:hover{
- background-color:#333;
- opacity: 0.8;
- filter:alpha(opacity=80);
- }
- .next{
- transform:rotate(0deg);
- left:auto;
- right:0;
- }
- .dots{
- position: absolute;
- bottom: 24px;
- right: 0;
- text-align: right;
- padding-right: 24px;
- line-height: 12px;
- }
- .dots span{
- display: inline-block;
- width: 12px;
- height: 12px;
- border-radius: 50%;
- margin-left: 8px;
- background-color: rgba(7, 17, 27, 0.4);
- cursor: pointer;
- box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
- }
- .dots span.active{
- box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;
- background-color: #ffffff;
- }
- /*menu 主菜单 */
- .menu-box{
- position: absolute;
- top:0;
- left:0;
- width:244px;
- height:460px;
- z-index:1;
- background-color: rgba(7, 17, 27, 0.5);
- }
- .menu-content{
- position: absolute;
- top:0;
- left:0;
- width:244px;
- z-index:2;
- }
- .menu-item{
- height:64px;
- line-height:66px;
- padding:0 24px;
- }
- .menu-item a{
- display: block;
- height:63px;
- position: relative;
- color:rgb(255,255,255);
- padding:0 8px;
- border-bottom:1px solid rgba(255,255,255,.2);
- }
- .menu-item:last-child a{
- border-bottom:0;
- }
- .menu-item i{
- position: absolute;
- right:24px;
- top:0px;
- font-style:normal;
- font-family:"iconfont";
- font-size:24px;
- }
- /*menu 子菜单 */
- .sub-menu{
- position: absolute;
- left:244px;
- top:0;
- z-index:500;
- width: 730px;
- height: 458px;
- background-color: #fff;
- border:1px solid #d9dde1;
- box-shadow: 0 4px 7px rgba(0,0,0,.1) inset;
- }
- .inner-box{
- width:100%;
- height:100%;
- background:url(../img/fe.PNG) no-repeat;
- display: none;
- }
- .sub-inner-box{
- width: 652px;
- margin-left: 40px;
- }
- .title{
- color: #f01414;
- font-size: 16px;
- line-height: 16px;
- margin-top: 28px;
- font-weight: bold;
- margin-bottom: 30px;
- }
- .sub-row{
- margin-bottom:25px;
- }
- .bold{
- font-weight:bold;
- }
- .mr10{
- margin-right:10px;
- }
- .ml10{
- margin-left:10px;
- }
- .hide{
- display: none;
- }
script.JS
- var index=0,// 当前轮播图索引
- timer=null,
- prev=byId('prev'),
- next=byId('next'),
- pics=byId('banner').getElementsByTagName('div'),
- dots=byId('dots').getElementsByTagName('span'),
- menuContent=byId('menu-content'),
- menuItems=menuContent.getElementsByClassName('menu-item'),
- subMenu=byId('sub-menu'),
- innerBoxs=subMenu.getElementsByClassName('inner-box'),
- main=byId('main'),
- banner=byId('banner'),
- size=pics.length;
- function byId(id){
- return typeof(id)==='string'?document.getElementById(id):id;
- }
- // 兼容 IE 的事件绑定函数
- function addHandler(elem,type,fn){
- if(elem.addEventListener){
- elem.addEventListener(type,fn);
- }else if(elem.attachEvent){
- elem.attachEvent(type,fn);
- }else{
- elem['on'+type]=fn;
- }
- }
- // 切换图片的函数
- function changeImg(){
- for(var i=0;i<size;i++){
- pics[i].style.display='none';
- dots[i].className='';
- }
- pics[index].style.display='block';
- dots[index].className='active';
- }
- // 自动轮播函数
- function autoPlay(){
- timer=setInterval(function(){
- index++;
- if(index>=size) index=0;
- changeImg();
- },1000);
- }
- // 停止自动轮播的函数
- function stopPlay(){
- if(timer){
- clearInterval(timer);
- }
- }
- // 点击上一个按钮
- addHandler(prev,'click',function(){
- index--;
- if(index<0) index=size-1;
- changeImg();
- })
- // 点击下一个按钮
- addHandler(next,'click',function(){
- index++;
- if(index>=size) index=0;
- changeImg();
- })
- // 点击圆点
- for(var j=0;j<dots.length;j++){
- // 保存当前索引, 否则索引始终会是 3
- dots[j].setAttribute('data-id',j);
- addHandler(dots[j],'click',function(){
- index=this.getAttribute('data-id');
- changeImg();
- })
- }
- // 鼠标移入 main 停止轮播
- addHandler(main,'mouseover',stopPlay);
- // 鼠标移出 main 继续轮播
- addHandler(main,'mouseout',autoPlay);
- // 默认自动轮播
- autoPlay();
- // 鼠标移入出现二级导航
- for(var m=0;m<menuItems.length;m++){
- menuItems[m].setAttribute('data-index',m);
- addHandler(menuItems[m],'mouseover',function(){
- subMenu.className='sub-menu';
- var idx=this.getAttribute('data-index');
- for(var d=0;d<innerBoxs.length;d++){
- innerBoxs[d].style.display='none';
- menuItems[d].style.background = "none";
- }
- innerBoxs[idx].style.display='block';
- menuItems[idx].style.background = "rgba(0,0,0,0.1)";
- });
- }
- // 鼠标移出 banner 隐藏二级导航
- addHandler(banner,'mouseout',function(){
- subMenu.className='sub-menu hide';
- });
- // 鼠标移出主菜单隐藏二级导航
- addHandler(menuContent,'mouseout',function(){
- subMenu.className='sub-menu hide';
- });
- // 鼠标移出子菜单隐藏二级导航
- addHandler(subMenu,'mouseout',function(){
- this.className='sub-menu hide';
- });
- // 鼠标移入子菜单, 显示二级导航
- addHandler(subMenu,'mouseover',function(){
- this.className='sub-menu';
- });
来源: http://www.bubuko.com/infodetail-3361296.html