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

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

导航条菜单的制作

最热最新

心谭

设置可以变化高度的导航栏时，要是height变化，应该设置margin-top为负值，否则会很难看

查看全部

0 采集收起来源：伸缩菜单的制作——改变高度
2017-03-28
我爱娟娟

background-position:第一个值是水平位置第二个值是垂直位置。

查看全部

0 采集收起来源：圆角菜单的制作
2017-03-27
我爱娟娟

一般都使用 “ul\li” 来制作“菜单导航条”

查看全部

0 采集收起来源：练习题
2017-03-27
我爱娟娟

基本的样式清除： *{margin:0;padding:0} 无序列表圆点去除： ul{list-style:none} 下划线去除： a{text-decoration:none} 文本缩进标签 text-indent 不会影响总体宽度（padding会）需要将a标签设置为块元素，才能设高宽、hover效果代码：a{display:block} hover格式 a:hover{}鼠标滑过选项会发生转变

查看全部

0 采集收起来源：垂直菜单的制作
2017-03-27
时光末年_Shmily

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

查看全部

0 采集收起来源：练习题
2018-03-22
慕仙0914885

：hover添加的高度后会默认向下增加高度，固需将对象往上移动设置margin-top为负数

查看全部

0 采集收起来源：编程练习
2017-03-27
垦土行者

display:block//块

查看全部

0 采集收起来源：编程练习
2017-03-27
weibo_小飞侠爸爸的公司_03545118

window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0; i<aLi.length; i++){ 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
weibo_小飞侠爸爸的公司_03545118

<script> window.onload=function(){ var aA=document.getElementsByTagName('a'); for(var i=0; i<aA.length; i++){ aA[i].onmouseover=function(){ var This=this; 【任务1】(This.time); This.time=【任务2】(function(){ This.style.width=This.offsetWidth+8+"px"; if(This.【任务3】>=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
weibo_小飞侠爸爸的公司_03545118

<script> window.onload=function(){ var aA=document.getElementsByTagName('a'); for(var i=0; i<aA.length; i++){ aA[i].onmouseover=function(){ var This=this; 【任务1】(This.time); This.time=【任务2】(function(){ This.style.width=This.offsetWidth+8+"px"; if(This.【任务3】>=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
慕九州9749677

window.onload=function(){ //定义全部加载完后实现 var aA=document.getElementsByTagName('a'); //实例化 a标签 for (var i = 0; i < aA.length; i++) { //循环 aA[i].onmouseover=function(){ //当鼠标移动到 a标签时实现代码 clearInterval(this.time); //清除之前的计时器效果 var This=this; //实例化 This.time=setInterval(function(){ //设定计时器 This.style.width=This.offsetWidth+8+'px'; //设定每次加 8像素 if(This.offsetWidth>=260){ //定义如果宽度达到 260像素时怎样 This.style.width="260px"; //设置最大宽度为260PX clearInterval(This.time) //停止 } },30) }

查看全部

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

基本的样式清除： *{margin:0;padding:0} 无序列表圆点去除： ul{list-style:none} 下划线去除： a{text-decoration:none} 文本缩进标签 text-indent 不会影响总体宽度（padding会）需要将a标签设置为块元素，才能设高宽、hover效果代码：a{display:block} hover格式 a:hover{}鼠标滑过选项会发生转变

查看全部

0 采集收起来源：垂直菜单的制作
2017-03-21
qq_格格_7

导航条菜单的制作第三章第四章第六章

查看全部

0 采集收起来源：编程挑战
2017-03-20
qq_格格_7

导航菜单的制作6-2

查看全部

0 采集收起来源：编程挑战
2017-03-20
李大_

window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0; i<aLi.length; i++){ 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) } } //鼠标离开菜单，二级菜单动画收缩起来。 aLi[i].onmouseout=function(){ } } }

查看全部

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