导航条菜单的制作_学习笔记

首页免费课导航条菜单的制作笔记

导航条菜单的制作

最热最新

lonehappines

var oSubNav=this.getElementsByTagName('ul')[0]; if(oSubNav){ var This=oSubNav; clearInterval(This.time); This.time=setInterval(function(){ This.style.height=This.offsetHeight-16+"px"; if(This.offsetHeight<=0) clearInterval(This.time); },30) }

查看全部

0 采集收起来源：编程挑战
2018-03-22
lonehappines

aLi[i].onmouseover=function(){ //鼠标经过一级菜单，二级菜单动画下拉显示出来 var oSubNav=this.getElementsByTagName('ul')[0]; if(oSubNav){ var This=oSubNav; clearInterval(This.time); This.time=setInterval(function(){ This.style.height=This.offsetHeight+16+"px"; if(This.offsetHeight>=120) clearInterval(This.time); },30) }

查看全部

0 采集收起来源：编程挑战
2018-03-22
左手拇指

1.如果要给水平菜单增加整体背景，需要对（）进行哪些CSS设置？解析: 菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。

查看全部

0 采集收起来源：练习题
2018-03-22
牛肉面2704

<a>元素加上display:block;后会变成块元素可以直接在上面定义宽高、背景等和div一样。一般都使用 “ul\li” 来制作“菜单导航条”

查看全部

0 采集收起来源：练习题
2018-03-22
qq_柠檬不该羡慕西瓜的甜_03361538

增加一条橙色实线： boder-bottom:5px solid #f60；

查看全部

0 采集收起来源：练习题
2016-05-15
一业

text-decoration:none//CSS文字修饰为无，用于清除超链接的默认下划线 display：block//成块 text-indent锁进\

查看全部

1 采集收起来源：编程练习
2016-05-14
巴黎的猫

菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。

查看全部

0 采集收起来源：练习题
2018-03-22
_莫忘初衷_

这里使用一张背景图片的位移实现圆角的

查看全部

0 采集收起来源：圆角菜单的制作
2016-05-12
慕粉3315603

1.jS(原生代码)实现：动画开始前先清除一下定时器，避免动画累加。 window.onload=function (){ var aA=document.getElementByTagName('a'); for(var i=0;i<aA.length;i++){ aA[i].onmouseover=function (){ clearInterval(This.time); var This=this; /*把当前的this对象传进来*/ This.time=setInterval(function (){ This.style.width=This.offsetWidth+8+"px"; /*8是变宽的速度*/ if(This.offsetWidth>=160){ clearInterval(This.time); } },30); } aA[i].onmouseout=function (){ clearInterval(This.time); var This=this; This.time=setInterval(function (){ This.style.width=This.offsetWidth-8+"px"; if(This.offsetWidth<=120){ This.style.width="120px"; clearInterval(This.time); } },30); } } }; 2.jQuery实现：动画打开时，先把上一个动画清理掉（使用stop方法）。 $(function(){ $('a').hover( function(){ $(this).stop().animate({"width":"160px"}.200); } function(){ $(this).stop().animate({"width":"120px"}.200); } )) })

查看全部

0 采集收起来源：伸缩菜单的制作——水平方向
2018-03-22
慕粉3315603

onmouseover , 鼠标移过； onmouseout , 鼠标离开； setIntervel , 不停地调用函数； clearInterval , 取消 setInterval 函数的运行； this , 提取这个函数的值； offsetWidth , 元素内可见区域的宽度 + 元素边框宽度（如果有滚动条还要包括滚动条的宽度）； clientWidth , 元素内可见区域的宽度； scrollWidth , 元素的全文宽度（如果有滚动条，那么这个宽度还包括滚动条能滚动到的所有区域）；

查看全部

0 采集收起来源：伸缩菜单的制作——水平方向
2016-05-12
gqyphys

要先清除缓存，不然会累加

查看全部

0 采集收起来源：伸缩菜单的制作——水平方向
2016-05-11
erutdioup8556

border-radius

查看全部

0 采集收起来源：圆角菜单的制作
2016-05-11
小菜地

a:hover li:hover why234撑不起来？

查看全部

0 采集收起来源：编程挑战
2016-05-11
UFO2015

<script> window.onload=function(){ var aA=document.getElementsByTagName('a'); for(var i=0; i<aA.length; i++){ aA[i].onmouseover=function(){ var This=this; clearInterval(This.time); This.time=setInterval(function(){ This.style.width=This.offsetWidth+8+"px"; if(This.offsetWidth>=160) clearInterval(This.time); },30) } aA[i].onmouseout=function(){ clearInterval(this.time); var This=this; this.time=setInterval(function(){ This.style.width=This.offsetWidth-8+"px"; if(This.offsetWidth<=120){ This.style.width='120px'; clearInterval(This.time); } },30) } } } </script>

查看全部

0 采集收起来源：编程练习
2018-03-22
苏苏爱学习3303578 01:28

margin负值可以向相反方向移动

查看全部

0 采集收起来源：伸缩菜单的制作——改变高度
2016-05-10