200字范文 > CSS实现垂直/水平导航栏

CSS实现垂直/水平导航栏

时间：2020-03-05 04:34:14

相关推荐

CSS实现垂直/水平导航栏

文章目录

一级基本导航栏怎么显示？导航栏 = 链接列表垂直导航栏水平导航栏二级导航栏垂直二级水平二级动画效果考虑导航栏位置和导航栏下方内容位置行内元素和块级元素的具体区别是什么？inline-block是什么？行内元素与块级元素的区别blockinlineinline-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分析width: 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;}

结构:

水平二级

由于二级导航栏是水平的，要让多个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没有去掉，最后没有过渡效果，仍为瞬时显示。

这里的动画是通过opacity实现的，有不足：鼠标可以点击到看不见的导航项。

考虑导航栏位置和导航栏下方内容位置

在一级li中添加二级ul，若二级要垂直的导航栏，则对二级ulfloat:none。

使用display: none将二级导航隐藏，这里隐藏式二级导航不占用位置，设置hover将display: block。

对整个导航栏加阴影，同时防止hover时二级导航栏拉伸阴影样式，需要将二级导航栏脱离普通文档。这里不能用float，因为一级导航栏已经清除了浮动，故这里用绝对定位脱离文档流。

可以对一级导航栏使用绝对定位，对html使用相对定位，效果不错。

CSS：

html {position: relative;}ul.nav {list-style-type: none;padding: 0;margin: 0;/* 清除浮动不用overflow，为了阴影效果 *//* overflow: hidden; */position: absolute;top: 2px;left: 2px;/* 对整个导航栏添加阴影效果 */box-shadow: 2px 5px 5px gray;}ul.nav::after {content: '';display: block;clear: both;}ul.nav>li {/* 水平导航栏 */float: left; position: relative;}ul.nav a {display: block;text-decoration: none;width: 5em;line-height: 3em;text-align: center;background: black;color: white;transition-property: background-color;transition-duration: 0.3s;}ul.nav>li>a {border-right: 1px solid grey;}ul.nav a:hover {background: lightblue;}ul.secondNav {padding: 0;margin: 0;list-style-type: none;display: none;transition-property: display;transition-duration: 0.5s;/* 脱离文档流使得导航栏的阴影不会畸变 *//* 不能float，因为ul清除了浮动，hover时二级导航会拉伸阴影 */position: absolute;}ul.secondNav a {background: grey;float: none;border-bottom: 0.5px solid white;}ul.nav>li:hover ul {/*这里用display而不是opacity，若为opacity，鼠标会点击看不见的导航项*/display: block;}div#main {margin: 100px 0;}

html：

<ul class="nav"><li><a href="">level1</a><ul class="secondNav"><li><a href="">level1.1</a></li><li><a href="">level1.2</a></li><li><a href="">level1.3</a></li></ul></li><li><a href="">level2</a><ul class="secondNav"><li><a href="">level2.1</a></li><li><a href="">level2.2</a></li><li><a href="">level2.3</a></li></ul></li><li><a href="">level3</a></li><li><a href="">level4</a></li><li><a href="">level5</a></li></ul><div id="main"><p>THIS IS PARAGRAPH</p></div>

行内元素和块级元素的具体区别是什么？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.//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 { display: block;}*/</style><script></script></head><body><ul id="nav"><li><a href="index.htm"><span class="home">   </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."><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.">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() {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>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。