CSS实现垂直/水平导航栏
2024-04-25 18:11:11
文章目录
- 一级基本导航栏
- 怎么显示？导航栏 = 链接列表
- 垂直导航栏
- 水平导航栏
- 二级导航栏
- 垂直二级
- 水平二级
- 动画效果
- 考虑导航栏位置和导航栏下方内容位置
- 行内元素和块级元素的具体区别是什么？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分析 - 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;}
结构:
<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没有去掉，最后没有过渡效果，仍为瞬时显示。
这里的动画是通过opacity实现的，有不足：鼠标可以点击到看不见的导航项。
考虑导航栏位置和导航栏下方内容位置
在一级li中添加二级ul，若二级要垂直的导航栏，则对二级ul float: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.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"> </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>
CSS实现垂直/水平导航栏相关推荐
- css垂直+水平导航栏代码实例
第一种:垂直导航栏 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- CSS学习笔记（十二）CSS 水平导航栏
CSS 水平导航栏 水平导航栏 有两种创建水平导航栏的方法:使用行内或浮动列表项. 行内列表项 构建水平导航栏的一种方法是,除了上一章中的"标准"代码外,还要将 <li> ...
- CSS导航栏 水平导航栏出炉
越往后面这速度就降低下来了,前面的简单可以快速过去. <!DOCTYPE html> <html lang="en"><head><met ...
- 使用html，css实现简单的导航栏
标题:使用html,css实现简单的导航栏 一.实现过程 首先通过ul,li实现一个无序列表,添加背景得到如图所示的样式[文档流] 让li浮动,使得垂直排列–>水平排列,[注意需要开启bfc,让 ...
- php导航条css代码生成器,怎么使用css代码制作网站导航栏？（示例）
本篇文章主要给大家介绍关于如何用css做导航栏的相关知识,希望对有需要的朋友有所帮助.对于任何一个网站来说,导航栏的存在是至关重要的,那么如果仅仅只是用html做出枯燥乏味的导航菜单,效果肯定是不佳的 ...
- 水平导航栏+导航栏跟随+导航栏下划线滑动效果
先放代码: HTML: <!doctype html> <html> <head> <meta charset="utf-8"> & ...
- css制作动态按钮导航栏,巧妙使用checkbox制作纯css动态导航栏
前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...
- 直播app开发搭建，纯css/html实现侧边导航栏
直播app开发搭建,纯css/html实现侧边导航栏 css代码: *{margin: 0px;padding: 0px;}#box{position: absolute;height: 300px; ...
- 精致纯CSS打造绿色漂亮导航栏
代码简介: 极精致的纯CSS实现的菜单,兼容性非常好,条例WEB标准,能用性好,用到有修饰图片,请根据代码地址自己下载. 代码内容: <!DOCTYPE html PUBLIC "-/ ...
最新文章
- jmeter启动警告项解决方案
- 静态内部类和非静态内部类区别汇总
- HSRP多组基础配置实验
- 对Linux系统中的时钟和时间的探讨
- php类实例方法静态方法,PHP类中的静态方法使用实例
- 生产环境碰到系统CPU飙高和频繁GC，你要怎么排查？
- 苹果手机java_iphone手机，苹果手机如何登陆网易163邮箱
- python信号分析_Python频谱分析
- 技术人的少年感，和年龄无关。
- GIT 中同时 push 代码到多个远程仓库
- 如何open一个新tab页面
- 中国塑料瓶市场趋势报告、技术动态创新及市场预测
- spring REST中的内容协商(同一资源,多种展现:xml,json,html)
- 配置nginx，Tomcat日志记录请求耗时
- 【java】抽象类下有两个具体子类，子类下有两个实例
- 【协同任务】基于matlab遗传算法考虑分配次序的多无人机协同任务分配【含Matlab源码 143期】
- 用MATLAB画出双极性NRZ,[工学]通信原理MATLAB仿真教程第7章.ppt
- 地图测量面积工具app_面积测量精灵手机版下载
- postman使用之Tests使用
- 前端学习笔记之——使用边框和背景