导航菜单笔记一

最新推荐文章于 2024-05-14 09:55:02 发布

原创最新推荐文章于 2024-05-14 09:55:02 发布 · 420 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

笔记

GitHub源码地址：

https://github.com/wxygoing/firstTimeTest/blob/master/NavigationMenu

1、用无序列表创建菜单
2、*{padding:0px;margin: 0px;} 和 body{padding:0px;margin: 0px;}

*{padding:0px;margin: 0px;}： * 相当于选择器，代表html所有的元素，包括html标签、body标签等； {}大括号里面写入需要给定的属性和属性值即可。 css中一开始写入*{padding:0px;margin: 0px;}，表示初始化所有的标签元素(具有盒子模型)的内外边距均为0px.

body{padding:0px;margin: 0px;}：body只是一个标签，如果它的子标签和该属性均具有继承性，才会继承这里所设置的属性；(比如：border、padding、margin属性不具有继承性；而color属性具有继承性等)
3、text-decoration: none; 去掉链接下划线

4、display: block; 定义关键是将<a>标签设置为块元素，这样可以使用hover

5、line-height设置行间距离，

6、text-indent 规定文本块中文本首行缩进的距离，不会影响总体宽度（padding会）。这里不用padding-left: 10px;因为这个使得块width变成110，

7、list-style: none;无序列表圆点去除

8、float: left; 将垂直菜单变成水平菜单
给水平菜单添加整体背景，需要对height和width进行设置，因为菜单<li>浮动后，<li>脱离了文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给定义宽，高
9、offsetWidth属性和width
a.offsetWidth属性可以返回对象的padding+border+width属性值之和，style.width返回值就是定义的width属性值。
b.offsetWidth属性仅是可读属性，而style.width是可读写的。
c.offsetWidth属性返回值是整数，而style.width的返回值是字符串，并且带有单位。
d.style.width仅能返回以style方式定义的内部样式表的width属性值。

10、clearInterval(this.time);//不做清除，动画会累加

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伸缩菜单,水平方向</title>
	<style type="text/css">
		/* 下划线去除：   a{text-decoration:none}
		文本缩进标签 text-indent 不会影响总体宽度（padding会）
		需要将a标签设置为块元素，才能设高宽、hover效果   代码：a{display:block}
		hover格式   a:hover{} */
		*{margin: 0;padding: 0;font-size: 14px;}/* 初始化页面设置*/
		ul{list-style: none;height: 50px;padding-left: 30px; border-bottom: 5px solid #F60;}
		/* list-style: none;无序列表圆点去除 */
		li{float: left;margin-top: 20px;} /* //将垂直菜单变成水平菜单 */
		a{text-decoration: none; display: block;height: 30px;line-height: 30px;width: 120px;background-color: #ccc;margin-bottom: 1px;text-align: center;}
		/*line-height 属性设置行间的距离（行高）。注释：不允许使用负值。 用于文字上下居中*/
		 .on, a:hover{color: #fff; background-color: #f60;}

	</style>
	<script type="text/javascript">
		/*1.offsetWidth属性可以返回对象的padding+border+width属性值之和，style.width返回值就是定义的width属性值。
		2.offsetWidth属性仅是可读属性，而style.width是可读写的。
		3.offsetWidth属性返回值是整数，而style.width的返回值是字符串，并且带有单位。
		4.style.width仅能返回以style方式定义的内部样式表的width属性值。*/
		window.onload = function() {
			let aLable = document.getElementsByTagName('a');
			for (let i = 0; i < aLable.length; i++) {
				aLable[i].onmouseover = function() {  // 这写法不好
					clearInterval(this.time); //不做清除，动画会累加
					let This = this; //把当前this传进来
					This.time = setInterval(function() {
						This.style.width = This.offsetWidth + 8 + 'px';
						if (This.offsetWidth >= 160) {
							clearInterval(This.time);
						}
					}, 30);
				}

				aLable[i].onmouseout = function() {
					clearInterval(this.time);//不做清除，动画会累加
					let This = 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>
</head>
<body>
	<ul>
		<li><a class="on" href="#">首   页</a></li>
		<li><a href="#">新闻快讯</a></li>
		<li><a href="#">产品展示</a></li>
		<li><a href="#">售后服务</a></li>
		<li><a href="#">联系我们</a></li>
	</ul>

</body>
</html>

标签

#笔记