为了账号安全,请及时绑定邮箱和手机立即绑定

形形色色的下拉菜单

难度初级
时长 3小时21分
学习人数
综合评分9.57
145人评价 查看评价
9.8 内容实用
9.4 简洁易懂
9.5 逻辑清晰
讲得不好,只顾自己一个劲儿的往下写,都不说为什么,比如二级菜单下的字本来是两排的,加了border:0后就自动变成一排了,二级菜单那里不写float:none的话,并没有影响
backgroud:url(../images/1.jpg)0 0 repeat-x;横向重复
这才是菜单学习的终极目标啊
跟看少儿频道 智慧树 一样
我写了一种比较麻烦的办法就是将 两个标题的文字同时用span标签,分别定义一个class,这样也可以实现移动鼠标变换,可以用在中间的导航栏而不是顶部
我已经快被这个老师逼疯了,根本就没把思路说清楚,他的一个案例我差不多要花半天的时间去理解,不想说了,我已经放弃了。
用transition属性的效果和jQuery的slideDown不一样,transition是颜色透明度淡入淡出的效果,和jQuery的fade()效果一样,slideDown是上卷下拉的效果,终于把老师讲的几个案例弄清楚了,
二级菜单显示时,为什么会有从下往上出现的效果,自己研究了很多遍,transition属性完全显示不出来,又没有源代码,听这个老师讲课真心有点累
/*设置正常状态英文菜单隐藏*/
.top-nav li a span{ display:none; }
/*鼠标移动到链接上面时将英文菜单显示*/
.top-nav li a:hover span{ display:block;color:#FFF; background-color:#DC4E1B;}
/*鼠标移动到链接上面时将中文菜单位置上移*/
.top-nav li a:hover { margin-top:-20px;}
我觉得老师讲得挺复杂的,可能我心里一直有自己的思路,跟老师的不一样,不过最终实现了是重要的,只想知道下拉菜单的尖角是怎样实现的
老师的教学法循序渐进,可以
@muge10 setTimeout("AddH('"+id+"')",1) 是指字符串AddH('加上变量id再加上'), 其实就是AddH('id'),但是由于id是变量,必须要用+连接。因为调用函数subH(u.id),传过去的id是没有引号的,但是在函数subH里,getElementById(id),这里的参数id是必须要加引号才能获取元素。
function subH(){
var navul=document.getElementById('navul');
var h=navul.offsetHeight;
h--;
if(h<=0){
navul.style.height=0;
}else{
navul.style.height=h+'px';
}
}

}
里面的一些bug也解决了,
lis[i].onmouseout=function(){
var ul=this.getElementsByTagName('ul')[0];
clearInterval(timer);
timer=setInterval(subH,100);
}
function addH(){
var navul=document.getElementById('navul');
var h=navul.offsetHeight;
h++;
if(h>53){
return;
}else{
navul.style.height=h+'px';
}
课程须知
1.您至少具备Html、Css相应的基础知识。 2.您须了解JavaScript和jQuery基础语法和引用方法;
老师告诉你能学到什么?
运用CSS、JavaScript和jQuery三种技术实现下拉菜单制作方法。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消