HTML+CSS实现导航条及下拉菜单1

已于 2022-10-10 21:46:45 修改
阅读量9.7k 收藏 163
点赞数 24
分类专栏： 前端基础 文章标签： css html css3
于 2020-06-05 18:59:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43883625/article/details/106576507
版权

1、效果截图

在这里插入图片描述

2、html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="main-menu">
			<div class="logo">
				<p>XXX后台管理系统</p>
			</div>
			<div class="menu-list">
				<div class="dropdown">
					<button class="dropbtn">首页</button>
				</div>
				<div class="dropdown">
					<button class="dropbtn">下拉菜单</button>
					<div class="dropdown-content">
						<a href="#">菜鸟1</a>
						<a href="#">菜鸟2</a>
						<a href="#">菜鸟3</a>
					</div>
				</div>
				<div class="dropdown">
					<button class="dropbtn">下拉菜单</button>
					<div class="dropdown-content">
						<a href="#">菜鸟1</a>
						<a href="#">菜鸟2</a>
						<a href="#">菜鸟3</a>
					</div>
				</div>
				<div class="dropdown">
					<button class="dropbtn">下拉菜单</button>
					<div class="dropdown-content">
						<a href="#">菜鸟1</a>
						<a href="#">菜鸟2</a>
						<a href="#">菜鸟3</a>
					</div>
				</div>
				<div class="dropdown">
					<button class="dropbtn">下拉菜单</button>
					<div class="dropdown-content">
						<a href="#">菜鸟1</a>
						<a href="#">菜鸟2</a>
						<a href="#">菜鸟3</a>
					</div>
				</div>
				<div class="dropdown">
					<button class="dropbtn">下拉菜单</button>
					<div class="dropdown-content">
						<a href="#">菜鸟1</a>
						<a href="#">菜鸟2</a>
						<a href="#">菜鸟3</a>
					</div>
				</div>
				<div class="dropdown">
					<button class="dropbtn">下拉菜单</button>
					<div class="dropdown-content">
						<a href="#">菜鸟1</a>
						<a href="#">菜鸟2</a>
						<a href="#">菜鸟3</a>
					</div>
				</div>
			</div>
		</div>
		<div class="content"></div>
		<div class="footer"></div>
		
	</body>
</html>

3、css代码

<style>
			.dropbtn {
				background-color: #4CAF50;
				color: white;
				padding: 16px;
				font-size: 16px;
				border: none;
				cursor: pointer;
				width: 120px;
			}

			.dropdown {
				position: relative;
				display: inline-block;
			}

			.dropdown-content {
				display: none;
				position: absolute;
				background-color: #f9f9f9;
				min-width: 120px;
				box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
			}

			.dropdown-content a {
				color: black;
				padding: 12px 16px;
				text-decoration: none;
				display: block;
				text-align: center;
			}

			.dropdown-content a:hover {
				background-color: #55aaff;
			}

			.dropdown:hover .dropdown-content {
				display: block;
			}

			.dropdown:hover .dropbtn {
				background-color: #3e8e41;
			}

			.main-menu {
				background-color: #4caf50;
				height: 55px;
				width: 1200px;
				margin-left: 120px;
			}
			.menu-list{
				margin-left: 250px;
				margin-top: -68px;
			}
			.logo{
				/* background-color: #0000FF; */
				line-height: 55px;
				width: 170px;
				padding-left: 10px;
			}
			.content{
				background-color: #0080FF;
				height: 600px;
				width: 1200px;
				margin-top: 5px;
				margin-left: 120px;
			}
			.footer{
				height: 70px;
				width: 1200px;
				margin-top: 5px;
				margin-left: 120px;
				background-color: #4cc971;
			}
		</style>

4、全部代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.dropbtn {
				background-color: #4CAF50;
				color: white;
				padding: 16px;
				font-size: 16px;
				border: none;
				cursor: pointer;
				width: 120px;
			}

			.dropdown {
				position: relative;
				display: inline-block;
			}

			.dropdown-content {
				display: none;
				position: absolute;
				background-color: #f9f9f9;
				min-width: 120px;
				box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
			}

			.dropdown-content a {
				color: black;
				padding: 12px 16px;
				text-decoration: none;
				display: block;
				text-align: center;
			}

			.dropdown-content a:hover {
				background-color: #55aaff;
			}

			.dropdown:hover .dropdown-content {
				display: block;
			}

			.dropdown:hover .dropbtn {
				background-color: #3e8e41;
			}

			.main-menu {
				background-color: #4caf50;
				height: 55px;
				width: 1200px;
				margin-left: 120px;
			}

			.menu-list {
				margin-left: 250px;
				margin-top: -68px;
			}

			.logo {
				/* background-color: #0000FF; */
				line-height: 55px;
				width: 170px;
				padding-left: 10px;
			}

			.content {
				background-color: #0080FF;
				height: 600px;
				width: 1200px;
				margin-top: 5px;
				margin-left: 120px;
			}

			.footer {
				height: 70px;
				width: 1200px;
				margin-top: 5px;
				margin-left: 120px;
				background-color: #4cc971;
			}
		</style>
	</head>
	<body>
		<div class="main-menu">
			<div class="logo">
				<p>XXX后台管理系统</p>
			</div>
			<div class="menu-list">
				<div class="dropdown">
					<button class="dropbtn">首页</button>
				</div>
				<div class="dropdown">
					<button class="dropbtn">下拉菜单</button>
					<div class="dropdown-content">
						<a href="#">菜鸟1</a>
						<a href="#">菜鸟2</a>
						<a href="#">菜鸟3</a>
					</div>
				</div>
				<div class="dropdown">
					<button class="dropbtn">下拉菜单</button>
					<div class="dropdown-content">
						<a href="#">菜鸟1</a>
						<a href="#">菜鸟2</a>
						<a href="#">菜鸟3</a>
					</div>
				</div>
				<div class="dropdown">
					<button class="dropbtn">下拉菜单</button>
					<div class="dropdown-content">
						<a href="#">菜鸟1</a>
						<a href="#">菜鸟2</a>
						<a href="#">菜鸟3</a>
					</div>
				</div>
				<div class="dropdown">
					<button class="dropbtn">下拉菜单</button>
					<div class="dropdown-content">
						<a href="#">菜鸟1</a>
						<a href="#">菜鸟2</a>
						<a href="#">菜鸟3</a>
					</div>
				</div>
				<div class="dropdown">
					<button class="dropbtn">下拉菜单</button>
					<div class="dropdown-content">
						<a href="#">菜鸟1</a>
						<a href="#">菜鸟2</a>
						<a href="#">菜鸟3</a>
					</div>
				</div>
				<div class="dropdown">
					<button class="dropbtn">下拉菜单</button>
					<div class="dropdown-content">
						<a href="#">菜鸟1</a>
						<a href="#">菜鸟2</a>
						<a href="#">菜鸟3</a>
					</div>
				</div>
			</div>
		</div>
		<div class="content"></div>
		<div class="footer"></div>
	</body>
</html>
唐僧骑白马
关注
  • 24
    点赞
  • 踩
  • 163
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
html导航栏下拉，实现代码
as953的博客
09-14 9689
代码如下（示例）： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{padding: 0px;margin: 0px;box-sizing: border-box;} ul,ol{list-style-type: none;} a{text-decora
【纯html+css垂直导航栏代码】
weixin_52218117的博客
07-18 4716
【纯html+css垂直导航栏代码】
html编写一个简易导航栏带下拉菜单 以下是一个简单的HTML代码示例，实现了一个导航栏带有下拉菜单的效果： ```html ＜!DOCTYPE html＞ ＜html＞ ＜head＞ ＜style＞
酸奶公园
01-15 1412
你可以将上述代码复制到一个HTML文件中，然后在浏览器中打开该文件，即可看到居中的导航栏带有下拉菜单的效果。你可以将上述代码复制到一个HTML文件中，然后在浏览器中打开该文件，即可看到调整后的导航栏标签之间的间距。你可以将上述代码复制到一个HTML文件中，然后在浏览器中打开该文件，即可看到导航栏带有下拉菜单的效果。要使导航栏居中，你可以使用CSS来设置导航栏的样式。请确保图片的路径和文件名是正确的，并且图片文件存在于指定的路径中。要调整导航栏标签之间的间距，可以通过CSS中的。
html实现导航栏
最新发布
studyinstall的博客
05-19 920
【代码】【无标题】
html实现好看的多种风格导航菜单(附源码)
热门推荐
xcLeigh
06-29 4万+
html实现好看的多种风格导航菜单(附源码)，导航菜单，源码下载，分为顶部导航菜单,悬浮按钮菜单,右键功能菜单,左侧导航菜单四种导航菜单。每种导航菜单有至少三种风格，总共23种风格，各种风格都有，代码上手简单，代码独立，可以直接使用，效果酷炫，总有一款你喜欢的。也可直接预览效果。
HTML5网页设计小案例：网页导航栏的设计
weixin_63279307的博客
08-02 1万+
HTML5网页设计小案例：网页导航栏的设计
有趣的HTML实例（四） 旋转菜单
好好读书
02-08 2708
有趣的HTML实例（四） 旋转菜单 一款简单的 HTML+CSS 原生 旋转菜单实例 1、HTML 2、CSS 3、舒适的画面感，代码效果 4、展开折叠效果
HTML网页入门练习——导航栏布局设计
m0_53156691的博客
01-28 2万+
导航栏布局 首先进行页面需求分析，如图所示导航栏分为三部分，包括标志、导航、用户按钮。为了使结构看起来明显，我们使用色块表示，确保结构正确之后再往里面填充内容。 具体步骤如下：
html+jquery+CSS实现最简单的右侧导航栏效果
12-31
本教程将详细讲解如何使用HTML、CSS和jQuery来实现一个最简单的右侧导航栏效果。这个导航栏将具有响应式设计，能在不同设备上良好展示，并能通过点击事件动态显示和隐藏。 首先，我们从HTML结构开始。一个基础的...
CSS3导航条下拉菜单弹出动画特效
06-05
本文将详细介绍如何使用CSS3实现一款具有5种不同下拉动画效果的导航条下拉菜单。 首先，我们需要理解CSS3中的关键特性在创建此类动画中的作用： 1. **选择器**: CSS3引入了更强大的选择器，如`:hover`，`:active`...
HTML下拉框，下拉菜单源码
09-05
这是一个有趣的HTML下拉框，下拉菜单功能，得体大方，方块式呈现下拉功能
html 导航栏
03-25
NULL 博文链接：https://qinya.iteye.com/blog/1142268
html导航样式模板
11-29
多种导航样式模板集合；其中有生成模板的方式，使用方式。项目主要是为了练手 项目适用于移动端 PC端。有兴趣的可以下载看看
HTML各种导航栏例子
07-10
HTML各种导航栏例子
JavaScript实现HTML导航栏下拉菜单
01-21
JavaScript实现HTML导航栏下拉菜单[悬浮显示] 前端界面进行设计时，我们会遇到鼠标悬浮在某选项上，然后就会凭空显示出菜单出来，这种设计的确受到了很多人的青睐。其实纯css也是可以实现的，但是会有一些限制，必须如要显示的菜单需要作为鼠标悬浮元素的子元素，选择器优先级等等。废话不多说，直接看效果！ 样式有点丑。 代码实现（JavaScript） 1、获取要悬浮的对象和菜单对象 //获取需要悬浮的对象 let show = document.getElementById(show); //获取被隐藏的菜单 let menu = document.getElementB
CSS实现的大型导航下拉菜单
09-06
一个基本的导航条可能包含多个`<ul>`（无序列表）和`<li>`（列表项）元素。例如： ```html <li><a href="#">首页</a></li> 服务 <li><a href="#">服务1</a></li> <li><a href="#">服务2</a></li> <li>...
jQuery+CSS3飘带式下拉菜单.zip
11-19
HTML5作为现代网页的标准，提供了更丰富的语义化标签，如用于定义导航条，和用于构建列表结构，这些都为构建下拉菜单提供了基础框架。在HTML5中，我们还可以使用data-*属性来存储自定义数据，方便jQuery进行操作。 ...
HTML+CSS+JS原神官网实现
05-11
在这个项目中，你将使用原生JavaScript来实现动态功能，如导航栏的下拉菜单、轮播图、悬浮按钮等。你将学习到事件监听（event listeners）、DOM操作（Document Object Model，用于访问和修改HTML元素）、定时器...
HTML下拉菜单怎么做成横向,css导航条横向带下拉菜单
05-26
可以使用HTML中的`<ul>`和`<li>`标签以及CSS中的`display: flex`属性来实现横向下拉菜单。 HTML代码： ``` <nav> <ul> <li><a href="#">菜单1</a></li> <li><a href="#">菜单2</a> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> <li><a href="#">子菜单3</a></li> </ul> </li> <li><a href="#">菜单3</a></li> </ul> </nav> ``` CSS代码： ``` nav { display: flex; justify-content: space-between; background-color: #f2f2f2; } nav ul { display: flex; padding: 0; margin: 0; list-style: none; } nav ul li { position: relative; } nav ul li a { display: block; padding: 12px 20px; color: #333; text-decoration: none; } nav ul li:hover > ul { display: block; } nav ul ul { display: none; position: absolute; top: 100%; left: 0; background-color: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 1; } nav ul ul li { width: 200px; } nav ul ul li a { padding: 10px; color: #333; } nav ul ul li:hover { background-color: #f2f2f2; } ``` 这段CSS代码将导航条设置为横向布局，子菜单使用绝对定位，鼠标悬停在父菜单上时显示子菜单。可以根据需要调整样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值