大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
通过css也可以实现简单的导航栏效果,一些不会写js的下伙伴不用担心了。
先上HTML部分
<nav>
<ul class="level">
<li><a href="">首页</a></li>
<li>
<a href="">栏目1</a>
<ul class="two">
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
</ul>
</li>
<li>
<a href="">栏目2</a>
<ul class="two">
<li>二级菜单4</li>
<li>二级菜单5</li>
<li>二级菜单6</li>
</ul>
</li>
<li>
<a href="">栏目3</a>
<ul class="two">
<li>二级菜单7</li>
<li>二级菜单8</li>
<li>二级菜单9</li>
</ul>
</li>
<li>
<a href="">栏目4</a>
<ul class="two">
<li>二级菜单10</li>
<li>二级菜单11</li>
<li>二级菜单12</li>
</ul>
</li>
<li>
<a href="">栏目5</a>
<ul class="two">
<li>二级菜单13</li>
<li>二级菜单14</li>
<li>二级菜单15</li>
</ul>
</li>
</ul>
</nav>
效果如下图,现在什么样式也没有,我们需要对HTML进行一些样式上的调整让其看起来好看一下。
现附上css:
<style>
*{padding: 0;margin: 0;} /* 先重置一下html,消除HTML标签默认的内外边距 */
.wrap{width: 800px;margin: 0 auto;} /* 对导航的内容设置一个主体为800px的宽并使其居中 */
.clear{clear: both;} /* 清除浮动 */
a{text-decoration-line: none;} /* 去掉默认a标签的下划线 */
ul,li{list-style: none;}
nav .level>li{float: left;width: 16.66%;text-align: center;background: bisque;padding: 10px 0;font-size: 16px;}
nav .level>li a{color: black;}
nav .level>li:hover{background: red;} /* 设置鼠标滑过后的样式 */
nav .two{display: none;} /* 先使二级菜单的内容隐藏 */
nav .level>li:hover .two{display: block;} /* 鼠标滑过一级菜单后的显示二级菜单 */
</style>
如下图,现在导航栏已经有了一些大概的效果了,但是目前来看还是有一些不好看,我们还需要美观一下
现在我们要写一下颜色变换和二级导航的样式,话不多说,直接附上代码
nav .level>li{transition: .4s;} /* 颜色添加过渡时间 未处理兼容性*/
nav .two li{padding: 5px 0;transition: .4s;cursor: pointer;}
nav .two li:hover{background: pink;}
效果如下图,现在我们已经实现了纯css实现导航栏下拉效果
是不是很简单,有什么不懂的欢迎留言!
最后附上全部的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css实现简单的导航栏下拉</title>
</head>
<style>
*{padding: 0;margin: 0;} /* 先重置一下html,消除HTML标签默认的内外边距 */
.wrap{width: 800px;margin: 0 auto;} /* 对导航的内容设置一个主体为800px的宽并使其居中 */
.clear{clear: both;} /* 清除浮动 */
a{text-decoration-line: none;} /* 去掉默认a标签的下划线 */
ul,li{list-style: none;}
nav .level>li{float: left;width: 16.66%;text-align: center;background: bisque;padding: 10px 0;font-size: 16px;transition: .4s;}
nav .level>li a{color: black;}
nav .level>li:hover{background: red;} /* 设置鼠标滑过后的样式 */
nav .two{display: none;margin-top: 10px;} /* 先使二级菜单的内容隐藏 */
nav .level>li:hover .two{display: block;} /* 鼠标滑过一级菜单后的显示二级菜单 */
nav .two li{padding: 5px 0;transition: .4s;cursor: pointer;}
nav .two li:hover{background: pink;}
</style>
<body>
<nav>
<div class="wrap">
<ul class="level">
<li><a href="">首页</a></li>
<li>
<a href="">栏目1</a>
<ul class="two">
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
</ul>
</li>
<li>
<a href="">栏目2</a>
<ul class="two">
<li>二级菜单4</li>
<li>二级菜单5</li>
<li>二级菜单6</li>
</ul>
</li>
<li>
<a href="">栏目3</a>
<ul class="two">
<li>二级菜单7</li>
<li>二级菜单8</li>
<li>二级菜单9</li>
</ul>
</li>
<li>
<a href="">栏目4</a>
<ul class="two">
<li>二级菜单10</li>
<li>二级菜单11</li>
<li>二级菜单12</li>
</ul>
</li>
<li>
<a href="">栏目5</a>
<ul class="two">
<li>二级菜单13</li>
<li>二级菜单14</li>
<li>二级菜单15</li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/159446.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...