CSS实现垂直/水平导航栏

文章目录

一级基本导航栏

怎么显示？导航栏 = 链接列表
垂直导航栏
水平导航栏

二级导航栏

垂直二级
水平二级
动画效果

行内元素和块级元素的具体区别是什么？inline-block是什么？

行内元素与块级元素的区别

block
inline
inline-block
其他不同

行内元素和块级元素转换
inline-block

举个例子

一级基本导航栏

怎么显示？导航栏 = 链接列表

导航栏需要标准的 HTML 作为基础。在我们的例子中，将用标准的 HTML 列表来构建导航栏。导航栏基本上是一个链接列表，因此使用 ul 和 li 元素是非常合适的：
```
<div id="nav">
	<ul class="firstNav">
		<li>
			<a href="#">一级菜单1</a>
		</li>
		<li>
			<a href="#">一级菜单2</a>
		</li>
		<li>
			<a href="#">一级菜单3</a>
		</li>
	</ul>
</div>
```
以上是标准的导航栏代码。

去掉list-style-type，去掉默认的项目符号和外边距、内边距:

	ul {
		list-style-type: none;
		padding: 0;
		margin: 0;
	}

垂直导航栏

display: block：把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度。行内元素无法设置物理width。inline-block、block、inline分析
140px：块元素默认占用全部可用宽度。我们需要规定 140 像素的宽度。
line-height：可以用来实现垂直居中效果，水平居中用text-align: center。
对锚点设置而不是li设置，由此提供更好的浏览器兼容性。

<!DOCTYPE html>
<html>
<head>
	<title>导航栏</title>
	<style type="text/css">
		ul {
			list-style-type: none;
			padding: 0;
			margin: 0;
		}
		#nav>ul>li {
			text-align: center;
		}
		a {
			display: block;	/*垂直排列，且点击区域为方块*/
			width: 100px;	/*block可设置width*/
			line-height: 40px; /*获得垂直居中效果*/
			text-decoration: none;
			color: white;
			background-color: black;
			border: 1px solid white;
		}
	</style>
</head>
<body>
	<div id="nav">
		<ul class="firstNav">
			<li>
				<a href="#">一级菜单1</a>
			</li>
			<li>
				<a href="#">一级菜单2</a>
			</li>
			<li>
				<a href="#">一级菜单3</a>
			</li>
		</ul>
	</div>
</body>
</html>

水平导航栏

两种方法：行内元素(inline-block)和浮动(float)

行内元素
```
 	#nav>ul>li {
		text-align: center;
		display: inline-block;
	}
```
li默认是块内元素，前后有换行，设置成inline-block后，同时具有inline同行水平排列和block可以设置width等属性的特点。
不足：会有间隔，因为原本的block元素前后有换行，使用inline-block之后，元素之间会有间隔。如何解决看inline-block、block、inline分析。

浮动

	#nav>ul>li {
		text-align: center;
		float: left;
	}

浮动方法：没有间隔，紧挨着

float:left - 使用 float 来把块元素滑向彼此。
可以发现，元素之间的间隔仅为设置的border的1px间隔，也就是浮动元素之间是紧挨着的，这点与inline-block区分开。
不足：float会有副作用，需要设置clear:both清除浮动带来的可能的坍塌后果。

二级导航栏

垂直二级

css:

ul {
			list-style-type: none;
			padding: 0;
			margin: 0;
		}
		#nav>ul>li {
			text-align: center;
			float: left;
			/*display: inline-block;*/
		}
		a {
			display: block;	/*垂直排列，且点击区域为方块*/
			width: 100px;	/*block可设置width*/
			line-height: 40px; /*获得垂直居中效果*/
			text-decoration: none;
			color: rgb(133, 119, 114);
			background-color: rgb(237, 237, 237);
			/*border: 1px solid white;*/
		}
		.firstNav::after {
			content: '';
			clear: both;
			display: block;
		}
		.secondNav a {
			background-color: rgb(237, 237, 237);
			border-bottom: 1px solid white;
		}
		.secondNav {
			display: none;
		}
		.firstNav>li:hover >a{
			background-color: rgb(101, 101, 101);
			color: white;
		}
		.firstNav>li:hover .secondNav {
			display: block;
		}

结构:

<div id="nav">
		<ul class="firstNav">
			<li>
				<a href="#">一级菜单1</a>
				<ul class="secondNav">
					<li><a href="#">二级菜单1.1</a></li>
					<li><a href="#">二级菜单1.2</a></li>
					<li><a href="#">二级菜单1.3</a></li>
				</ul>
			</li>
			<li>
				<a href="#">一级菜单2</a>
				<ul class="secondNav">
					<li><a href="#">二级菜单2.1</a></li>
					<li><a href="#">二级菜单2.2</a></li>
					<li><a href="#">二级菜单2.3</a></li>
				</ul>
			</li>
			<li>
				<a href="#">一级菜单3</a>
				<ul class="secondNav">
					<li><a href="#">二级菜单3.1</a></li>
					<li><a href="#">二级菜单3.2</a></li>
					<li><a href="#">二级菜单3.3</a></li>
				</ul>
			</li>
		</ul>
	</div>

水平二级

由于二级导航栏是水平的，要让多个li同行分布，按照水平基本导航栏的做法（1）float 或者（2）inline-block。注意一级导航要设置relative定位，二级导航设置absolute定位来脱离文档流，此时二级导航的宽度仍然受一级导航的限制（此时一级导航是距离最近的非static定位的元素），否则会有错位情况发生。

css改动:

		.firstNav {
			position: relative;
		}
		.secondNav {
			display: none;
			position: absolute;
		}
		.secondNav>li {
			float: left;
		}

动画效果

css改动：

		.secondNav {
			/*display: none;*/
			position: absolute;
			opacity: 0;
			transition-property: opacity;
			transition-duration: 1s;
		}
		.firstNav>li:hover .secondNav {
			/*display: block;*/
			opacity: 1;
		}

需要注意：如果display:none没有去掉，最后没有过渡效果，仍为瞬时显示。

行内元素和块级元素的具体区别是什么？inline-block是什么？

行内元素与块级元素的区别

block

总在新的一行开始（换行）
width、height以及padding、margin可设置
如果不设置width，默认为整个容器的100%
常用块元素：div、p、h1、form、ul、li

inline

和其他元素同一行（不换行）
行高width、height和padding、margin不可设置（img除外，img可设置width、height）
widht为文字或图片的宽度，不可改变
常用行内元素：span、a、label、input、img

inline-block

和其他元素同一行（不换行）
width、height、margin、padding可设置
默认底部在同一水平线，可使用vertical-align

其他不同

行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。
块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。
块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。
行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。

行内元素和块级元素转换

display:block; (字面意思表现形式设为块级元素)

display:inline; (字面意思表现形式设为行内元素)

inline-block

inline-block 的元素（如input、img)既具有 block 元素可以设置宽高的特性，同时又具有 inline元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align（因为这个垂直对齐属性只对设置了inline-block的元素有效）属性。
HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，使用inline-block 会产生元素间的空隙。
在导航栏中可设置水平导航，与float相比没有浮动副作用。

举个例子

虽然原理很清晰明了，但是实际做的时候总有很多意外情况，这里列举我遇到的关于导航栏的小demo，源自我自己的作业和小练习。

效果： 二级水平导航栏，二级导航的宽度比一级大 ;

注意和关键：

记得导航元素的时候，设置锚点的宽度而不是li（这次代码中忘记了）；
使用CSS增加后序after的方式清除浮动时，注意是在最外层ul的后面添加，display设置为block；
注意base标签为页面上的所有链接规定默认地址href或默认目标target。
二级导航设置绝对定位脱离文档流可以不受一级导航宽度的限制，前提是一级导航为static元素，否则将会以最近的非static即一级导航为相对位置定位。

代码：

<!DOCTYPE html>
<html>
<head>
<title>menu</title>
<base href="http://www.sysu.edu.cn/2012/cn/">
<style>
    a:link,a:visited {text-decoration:none;color:blue}
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    ul#nav {
        background-color: rgb(208, 208, 208);
    }
    ul>li {
        background-color: rgb(208, 208, 208);
        padding: 4px 6px;
    }
    ul#nav::after {
        content: "";
        display: block;
        clear: both;
    }
    ul#nav>li {
        float: left;
        padding: 0 10px;
    }
    ul#nav>li>ul {
        display: none;
        position: absolute;
        border: 1px solid gray;
        background-color: rgb(208, 208, 208);
        /*top: 30px;*/
        /*使得二级导航栏的宽度不受一级导航栏的限制*/
    }
    span.home {
        display: inline-block;
        width: 25px;
        height: 21px;
        margin-left: 250px;
        background-image: url("F:/中大/大三下/专业工程项目实践/js实验2/code/images/home.gif");
        /*由于使用了base，要用绝对路径*/
        background-position: -3px -8px;
    }
    /*ul#nav>li:hover ul { <!-- hover控制二级导航栏显示隐藏 -->
        display: block;
    }*/
</style>
<script>
  
</script>
</head>
<body>
   <ul id="nav">
     <li><a href="index.htm"><span class="home">&nbsp;&nbsp;&nbsp;</span></a>
     </li>
     <li><a href="zdgk/index.htm"><span>学校概况</span></a>
         <ul> <li><a href="zdgk/zdgk01/index.htm">中大简介</a></li>
              <li><a href="zdgk/zdgk02/index.htm">中大校区</a></li>
              <li><a href="zdgk/zdgk03/index.htm">现任领导</a></li>
              <li><a href="zdgk/zdgk04/index.htm">管理服务</a></li>
              <li><a href="zdgk/zdgk06/index.htm">校歌 校训 校徽</a></li>
              <li><a href="zdgk/zdgk07/index.htm">数字中大</a></li>
              <li><a href="zdgk/zdgk05/index.htm">中大校史</a></li>
              <li><a href="zdgk/zdgk08/index.htm">中大图志</a></li>
        </ul>
     </li>
     <li><a href="yx/index.htm"><span>院系设置</span></a>
     </li>
     <li><a href="xksz/index.htm"><span>学科与师资</span></a>
        <ul>
           <li><a href="xksz/xksz01/index.htm">学科建设</a></li>
           <li><a href="xksz/xksz02/index.htm">人才名录</a></li>
           <li><a href="xksz/xksz03/index.htm">名师垂范</a></li>
        </ul>
     </li>
     <li><a href="jyjx/index.htm"><span>教育教学</span></a>
        <ul>
           <li><a href="jyjx/jyjx01/index.htm">本科教育</a></li>
           <li><a href="jyjx/jyjx02/index.htm">研究生教育</a></li>
           <li><a href="jyjx/jyjx03/index.htm">国际教育</a></li>
           <li><a href="jyjx/jyjx04/index.htm">继续教育</a></li>
        </ul>
     </li>
     <li><a href="kxyj/index.htm"><span>科学研究</span></a>
        <ul>
          <li><a href="kxyj/kxyj01/index.htm">重点研究机构</a></li>
          <li><a href="kxyj/kxyj04/index.htm">学术期刊</a></li>
          <li><a href="kxyj/kxyj05/index.htm">博士后科研流动站</a></li>
        </ul>
     </li>
     <li><a href="zsjy/index.htm"><span>招生与就业</span></a>
        <ul>
          <li><a href="zsjy/zsjy01/index.htm">本科招生</a></li>
          <li><a href="zsjy/zsjy02/index.htm">研究生招生</a></li>
          <li><a href="zsjy/zsjy03/index.htm">留学生招生</a></li>
          <li><a href="jyjx/jyjx04/index.htm">继续教育招生</a></li>
          <li><a href="zsjy/zsjy04/index.htm">就业指导与服务</a></li>
        </ul>
     </li>
     <li><a href="http://library.sysu.edu.cn"><span>图书馆</span></a>
     </li>
     <li><a href="rczp/index.htm"><span>人才招聘</span></a>
     </li>
     <li><a href="xyjj/index.htm"><span>校友与基金</span></a>
     </li>
     <li><a href="zjzd/index.htm"><span>走进中大</span></a>
         <ul>
           <li><a href="http://myspace.sysu.edu.cn">5D空间</a>
           <li><a href="zjzd/zjzd02/index.htm">校区地图</a>
           <li><a href="zjzd/zjzd03/index.htm">生活服务</a>
           <li><a href="zjzd/zjzd04/index.htm">中大博物馆</a>
           <li><a href="zjzd/zjzd05/index.htm">校园文化</a>
         </ul>
     </li>
    </ul>
<script>
    window.onload = function() {
    	<!-- 使用JS控制二级导航栏显示/隐藏 -->
        var item = document.querySelectorAll("ul#nav>li");
        for (let i = 0; i < item.length; ++ i) {
            item[i].addEventListener("mouseover", function() {
                console.log(item[i].childNodes);
                if (item[i].childNodes.length > 2)
                    item[i].childNodes[2].style.display = "block";
            });
            item[i].addEventListener("mouseout", function() {
                console.log(item[i].childNodes);
                if (item[i].childNodes.length > 2) {
                    console.log(item[i].childNodes[2]);
                    item[i].childNodes[2].style.display = "none";
                }
            });
        }
    }
</script>
</body>
</html>

初学前端，记录学习的内容和进度~