老师，二级菜单那里有点问题

首页课程实战体系课手记专栏慕课教程

老师，二级菜单那里有点问题

来源：5-3 二级菜单展开效果

慕容0129426

2020-04-11 15:42:39

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

<a href="">手机存储卡</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<a href="">网络机顶盒</a>

</div>

</div>

</div>

</div>

</div>

<a href="">滚筒式洗衣机</a>

<a href="">迷你洗衣机</a>

<a href="">洗烘一体机</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</a>

</a>

</div>

</div>

</body>

</html>

margin:0;

padding:0;

}

body{

font-family:"微软雅黑";

color:#14191e;

}

ul{

list-style:none;

}

@font-face{

font-family:"iconfont";

src:url("../images/font/iconfont.eot");

src:url("../images/font/iconfont.eot") format("embedded-opentype"),

url("../images/font/iconfont.woff") format("woff"),

url("../images/font/iconfont.ttf") format("truetype"),

url("../images/font/iconfont.svg#iconfog") format("svg");

}

a:link,a:visited{

text-decoration:none;

}

.main{

width:1200px;

height:460px;

margin:30px auto;

overflow:hidden;

position:relative;

}

.banner{

width:1200px;

height:460px;

overflow:hidden;

position:relative;

}

.banner-slide{

width:1200px;

height:460px;

background-repeat:no-repeat;

position:absolute;

display:none;

}

.slide-active{

display:block;

}

.slide1{

background-image:url("../images/bg1.jpg");

}

.slide2{

background-image:url("../images/bg2.jpg");

}

.slide3{

background-image:url("../images/bg3.jpg");

}

.button{

position:absolute;

width:40px;

height: 80px;

left:244px;

top:50%;

margin-top:-40px;

/*background-color:yellow;*/

background:url("../images/arrow.png") center center no-repeat;

}

.next{

left:auto;

right:0;

}

.prev{

/*旋转180度*/

transform:rotate(180deg);

}

.button:hover{

background-color:black;

opacity:0.2;

/*支持iE浏览器*/

filter:alpha(opacity=20);

}

.dots{

position:absolute;

right:20px;

bottom: 20px;

text-align: right;

}

.dots span{

display:inline-block;

width:12px;

height: 12px;

line-height:12px;

border-radius:50%;

margin-left:8px;

background:rgba(7, 17, 27, 0.4);

/*inset 阴影方向向内*/

box-shadow:0 0 0 2px rgba(255, 255, 255, 0.8) inset;

/*光标改成手型*/

cursor:pointer;

}

.dots span.active{

box-shadow:0 0 0 2px rgba(7, 17, 27, 0.4) inset;

background:#fff;

}

/*主菜单*/

.menu-box{

width:244px;

height: 460px;

position:absolute;

z-index:10;

left:0;

top:0;

background:rgba(7, 17, 27, 0.5);

opacity:0.5;

}

.menu-content{

width:244px;

height: 460px;

position:absolute;

z-index:20;

padding-top:6px;

box-sizing: border-box;

/*background-color:yellow;*/

left:0;

top:0;

}

.menu-item{

height: 64px;

line-height:66px;

font-size:16px;

padding:0 24px;

position:relative;

}

.menu-item a:link,.menu-item a:visited{

color:white;

}

.menu-item a{

display:block;

border-bottom:1px solid rgba(255, 255, 255, 0.2);

padding:0 8px;

height: 63px;

}

.menu-item i{

position:absolute;

font-family:"iconfont";

top:1px;

right:32px;

font-size:24px;

font-weight:normal;

font-style:normal;

color:rgba(255, 255, 255, 0.5);

}

/*子菜单*/

.sub-menu{

width:730px;

height:460px;

position:absolute;

z-index:999;

left:244px;

top:0;

border: 1px solid #d9dde1;

box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.1);

/*background-color:#fff;*/

}

.inner-box{

width:100%;

height: 100%;

background:url("../images/fe.png") no-repeat;

}

.sub-inner-box{

width:652px;

margin-left:40px;

overflow:hidden;

}

.title{

color:red;

font-size:16px;

line-height:16px;

margin:28px 0 30px 0;

font-weight:bold;

}

.bold{

font-weight:bold;

}

.mr10{

margin-right:10px;

}

.ml10{

margin-left:10px;

}

.sub-row{

margin-bottom:25px;

}

.hide{

display:block;

}

function byId(id) {

return typeof(id) === "string" ? document.getElementById(id) : id;

}

var index = 0,

timer = null,

pics = byId("banner").getElementsByTagName("div"),

dots = byId("dots").getElementsByTagName("span"),

prev=byId("prev"),

next=byId("next"),

len = pics.length,

menu=byId("menu-content"),

subMenu=byId("sub-menu"),

innerBox=subMenu.getElementsByClassName("inner-box"),

menuItems=menu.getElementsByClassName("menu-item");

function slideImg() {

var main = byId("main");

// 滑动清除定时器，离开继续

main.onmouseover = function() {

// 滑动清除定时器

if (timer) clearInterval(timer);

}

main.onmouseout = function() {

timer = setInterval(function() {

index++;

if (index >= len) {

index = 0;

}

changeImg();

}, 2000);

}

main.onmouseout();

// 点击按钮

for (var d = 0; d < len; d++) {

dots[d].id = d;

dots[d].onclick = function() {

index = this.id;

changeImg();

}

prev.onclick=function(){

index--;

if(index<0) index=len-1;

changeImg();

}

next.onclick=function(){

index++;

if(index>=len) index=0;

changeImg();

}

// 菜单切换

for(var m=0;m<menuItems.length;m++){

menuItems[m].setAttribute("date-index", m);

menuItems[m].onmouseover=function(){

var idx=this.getAttribute("date-index");

// console.log(idx);

for (var i =0; i<innerBox.length; i++) {

innerBox[i].display.block='none';

}

subMenu.className="sub-menu";

innerBox[idx].style.display='block';

}

//切换图片

function changeImg() {

for (var i = 0; i < len; i++) {

pics[i].style.display = "none";

dots[i].className="";

}

pics[index].style.display = "block";

dots[index].className="active";

}

slideImg();

写回答

1回答

好帮手慕小琪

2020-04-11

同学你好，到目前视频的进度来看，同学的二级菜单展示是没有问题的。我们在下节课也就是5-4二级菜单的展开与收起的课程中就会学到如何将二级菜单收起。同学具体的问题是什么呢，同学可以将具体的问题发到问答区，方便老师更快回复同学的问题。

如果我的回答解决了你的疑惑，请采纳，祝学习愉快~

0 学习 · 9666 问题

查看课程

相似问题

如何使菜单选中的效果取消掉

回答 2

老师帮我看看我的二级菜单的问题

回答 1

老师，麻烦解答一下鼠标离开主菜单区域，子菜单消失这个效果。

回答 3

为什么子菜单不能覆盖在背景大图片上

回答 1

隐藏子菜单时图片一起隐藏了没找到错误在哪里

回答 1

打开慕课网App查看更多内容