flex 二级导航栏

最新推荐文章于 2021-12-12 21:46:01 发布
最新推荐文章于 2021-12-12 21:46:01 发布
阅读量384 收藏 2
点赞数 1
原文链接：https://juejin.im/post/5ae2c7c16fb9a07aa6317f8d
版权

1、二级导航栏

代码 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>flex 布局实现 navbar</title>
		<style type="text/css">
			* {
				box-sizing: border-box;
			}
			body {
				background: #edeff0;
				font-family: 'Hind', sans-serif;
			}
			ul {
				padding: 0;
			}
			
			ul li {
				list-style: none;
			}
			.navbar {
				max-width: 820px;
				margin: 20 auto 0;
				background: #25283D;
				border-radius: 4px;
			}
			.navbar .menu {
				display: flex;
				position: relative;
			}
			.navbar .menu li {
				flex: 1;
			}
			.navbar .menu a {
				position: relative;
				display: flex;
				justify-content: center;
				padding: 20px;
				color: #fff;
				text-decoration: none;
			}
			.container {
				position: absolute;
				top: 61px;
				left: 0;
				right: 0;
				/*display: flex;*/
				display: none;
				background: #fff;
			}
			.container__list {
				flex: 1;
				display: flex;
				flex-wrap: wrap;
				min-width: 0;
			}
			.container__listItem {
				flex: 0 0 25%;
				padding: 10px 30px;
				overflow: hidden;
				text-align: center;
			}
			.container__listItem > div {
				color: #DB6356;
				text-decoration: underline;
				cursor: pointer;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.container.has-multi .container__list {
				flex-basis: 33.333%;
				border-radius: 4px;
			}
			.container.has-multi .container__listItem {
				flex-basis: 100%;
			}
			
			.container.has-multi .container__list:not(:last-child) {
				border-right: solid 1px #f3f3f3;
				margin-right: 20px;
			}
			
			/**hover时li显示不同的背景色*/
			.navbar .menu li:hover {
				background-color: #8F3985;
			}
			
			/*hover时候出现下面的三角形**/
			a.hasDropdown :after {
				position: absolute;
				bottom: -16px;
				left: 50%;
				z-index: 2;
				transform: translateX(-50%);
				height: 0;
				width: 0;
				border: 8px solid transparent;
			}
			
			.navbar .menu li:hover a.hasDropdown :after {
				content: '';
				border-top-color: #8F3985;
			}
			
			.navbar .menu li:hover .container {
				display: flex;
			}
		</style>
	</head>
	<body>
		<nav class="navbar">
			<ul class="menu">
				<li>
					<a class="hasDropdown" href="#">Electronics <i class="fa fa-angle-down"></i></a>
					<ul class="container">
						<div class="container__list">
							<div class="container__listItem">
								<div>Televisions</div>
							</div>
							<div class="container__listItem">
								<div>MP3, Media Players & Accessories</div>
							</div>
							<div class="container__listItem">
								<div>Audio & Video Accessories</div>
							</div>
							<div class="container__listItem">
								<div>Cameras</div>
							</div>
							<div class="container__listItem">
								<div>DSLR Cameras</div>
							</div>
							<div class="container__listItem">
								<div>Camera Accessories</div>
							</div>
							<div class="container__listItem">
								<div>Musical Instruments & Professional Audio</div>
							</div>
							<div class="container__listItem">
								<div>Gaming Consoles</div>
							</div>
							<div class="container__listItem">
								<div> All Electronics </div>
							</div>
							<div class="container__listItem">
								<div>Air Conditioners</div>
							</div>
							<div class="container__listItem">
								<div>Refrigerators</div>
							</div>
							<div class="container__listItem">
								<div>Washing Machines</div>
							</div>
							<div class="container__listItem">
								<div>Kitchen & Home Appliances</div>
							</div>
							<div class="container__listItem">
								<div>Heating & Cooling Appliances</div>
							</div>
							<div class="container__listItem">
								<div>All Appliances</div>
							</div>
					</ul>
				</li>
				<li>
					<a class="hasDropdown" href="#">Appliances <i class="fa fa-angle-down"></i></a>
					<ul class="container has-multi">
						<div class="container__list container__list-multi">
							<div class="container__listItem">
								<div>Televisions</div>
							</div>
							<div class="container__listItem">
								<div>Home Entertainment Systems</div>
							</div>
							<div class="container__listItem">
								<div>Headphones</div>
							</div>
							<div class="container__listItem">
								<div>Speakers</div>
							</div>
							<div class="container__listItem">
								<div>MP3, Media Players & Accessories</div>
							</div>
							<div class="container__listItem">
								<div>Audio & Video Accessories</div>
							</div>
						</div>
						<div class="container__list container__list-multi">
							<div class="container__listItem">
								<div>Televisions</div>
							</div>
							<div class="container__listItem">
								<div>Home Entertainment Systems</div>
							</div>
							<div class="container__listItem">
								<div>Headphones</div>
							</div>
							<div class="container__listItem">
								<div>Speakers</div>
							</div>
							<div class="container__listItem">
								<div>MP3, Media Players & Accessories</div>
							</div>
							<div class="container__listItem">
								<div>Audio & Video Accessories</div>
							</div>
						</div>
						<div class="container__list container__list-multi">
							<div class="container__listItem">
								<div>Televisions</div>
							</div>
							<div class="container__listItem">
								<div>Home Entertainment Systems</div>
							</div>
							<div class="container__listItem">
								<div>Headphones</div>
							</div>
							<div class="container__listItem">
								<div>Speakers</div>
							</div>
							<div class="container__listItem">
								<div>MP3, Media Players & Accessories</div>
							</div>
							<div class="container__listItem">
								<div>Audio & Video Accessories</div>
							</div>
						</div>
					</ul>
				</li>
				<li>
					<a href="#">Kids</a>
				</li>
				<li>
					<a href="#">Men</a>
				</li>
				<li>
					<a href="#">Baby</a>
				</li>
				<li>
					<a href="#">Women</a>
				</li>
				<li>
					<a href="#">Furniture</a>
				</li>
				<li>
					<a href="#">Decors</a>
				</li>
				<ul>
		</nav>
		<div class="tranigle">
		</div>
	</body>
</html>
复制代码
weixin_34101229
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
FLEX实现的导航菜单
01-09
里面包含源码及事例，效果类似QQ导航菜单，可实现子菜单、为菜单添加图片等功能
利用flex实现的二级导航栏
colorfulqq的博客
04-11 1374
Flex布局的出现是为了什么 在我自己看来，flex布局的出现是为了让我们在处理一些较小且较为复杂的网页布局而出现的，这种布局方式很灵活，容器内的子元素能够按照任意的布局方式进行相应的排列。 为什么我要采取flex的方式来写导航栏的原因 在没接触flex布局之前，我写导航栏都是利用float来写，其中有些很麻烦的地方，清除浮动什么的都是很扎心的一些操作，还会有一些兼容方面的问题，但是fl...
利用flex实现两栏布局
weixin_43720739的博客
03-23 819
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docum...
flex布局二级导航栏
钱辉
09-09 2426
【Flex 布局教程：语法篇】 本文链接： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex布局出现的意义： 在我自己看来，flex布局的出现是为了让我们在处理一些较小且较为复杂的网页布局而出现的，这种布局方式很灵活，容器内的子元素能够按照任意的布局方式进行相应的排列，可以更加简便、完整、响应式地实现各种页面布局。 为什么我............
Flex导航菜单
03-22
NULL 博文链接：https://guangqiang.iteye.com/blog/1007618
可点击展开与收缩的左侧纵向二级导航菜单
11-20
在IT行业中，构建一个可点击展开与收缩的左侧纵向二级导航菜单是常见的需求，尤其在网页设计和前端开发中。这种菜单设计能够有效地组织和展示网站的层级结构，提高用户体验，便于用户快速找到所需信息。下面我们将...
jquery制作一个横向二级导航下拉菜单
06-05
通常，二级导航菜单由一个主导航条和嵌套的子菜单组成。我们可以创建一个`<ul>`作为一级菜单，其中的每个`<li>`包含一个链接和一个二级菜单的`<ul>`。二级菜单默认应设置为隐藏，例如使用CSS的`display:none`。 ```...
jquery实现黑色导航二级下拉菜单
06-06
通过以上步骤，我们成功地利用jQuery实现了黑色导航栏的二级下拉菜单。这个设计既简洁又大气，能够提升网站的专业形象，同时提供良好的用户交互体验。在实际应用中，可以根据需要调整CSS样式以适应不同的设计风格。...
纯CSS二级导航菜单
12-21
纯CSS二级导航菜单是一种常见的网页设计技术，它利用CSS（层叠样式表）来实现页面上的多级导航结构，而不依赖JavaScript或者其他脚本语言。这种技术对于提高网站的加载速度和可访问性非常有利，因为它减少了对服务器...
完美的二级css横向导航条
02-02
本文将深入探讨如何创建一个完美的二级CSS横向导航条，结合实际案例“完美的二级css横向导航条”进行详细讲解。 首先，我们来理解一下二级导航条的概念。一级导航条通常位于页面顶部，包含网站的主要分类；二级导航...
弹性布局---实现二级菜单
m0_49623851的博客
11-13 588
<body> <div class="main-menu"> <div class="menus"> <a href="">首页</a> </div> <div class="menus"> <a href="">关于我们</a> <div class="menu-son"> <a href=""><.
html的flex布局 导航条 下拉框
随风潜入夜，不白头
06-12 2515
代码放下了，jQuery自己引用本地的js ,记得改一下哦！ 就是这行引入jq：<script type="text/javascript" src="../js/jquery-1.8.3.js"></script> <!DOCTYPE html> <html> <head> <meta charset="...
使用display:block制作横向导航菜单
gundumw100的专栏
08-15 323
DIV+css布局的核心是实现了表现和内容的分离，先来认识一下内容部分的代码编写方式： 主页 DIV+CSS教程 常用代码 水晶图标 幻灯图片 软件下载 CSS2.0实用手册 　　这段代码使用了一个新的元素ul，在导航之前，先简要了解一下ul元素。ul是css而已中使用得很广泛的一种元素主要用来描述列表型...
二级菜单导航栏（左侧）
热门推荐
big_beer的博客
04-23 1万+
目标： 实现左侧的二级导航栏 效果图： 项目演示： 点击跳转到演示地址 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>左侧导航栏</title> </head> <style> body{ margin: 0; padding: 0; min-width: 1200px; min-he
flex的使用实例
weixin_30348519的博客
01-13 1479
之前的随笔从阮一峰老师那里学到了flex的基本用法及作用，现在来把flex具体运用到实例中，看看flex的弹性布局效果。 1. flex设置元素垂直居中对齐 在之前的一篇文章中记载过如何垂直居中对齐，方法有很多，但是在学习了flex布局之后，垂直居中更加容易实现 HTML代码： <div class="demo"> <div class="inner...
【css】纯css实现二级导航菜单
weixin_42582523的博客
12-12 2170
效果： html: <div class="navbar"> <div class="nav"> <ul> <li> <a href="javascript:;">一级菜单1</a> </li> <li> <a href="javascript:;">一级菜单2</a> <ol> .
初次写博客之运用flex实现下拉菜单
LX2018612的博客
08-01 579
二级菜单效果图： 1.初始状态下的样式以及布局： 2.当鼠标放在一级标题上时的效果，字体和背景色改变 3.鼠标放到二级标题时显示的效果 HTML代码： <!DOCTYPE html> <html> <head> <link href="../css/erji_flex.css" rel="stylesheet"> <meta charset="utf-8"> <title>flex 导航栏&...
FLex布局实现导航
qq_24192465的博客
08-09 3228
一、要点 1、display: flex; 2、justify-content: center; 3、align-items: center; 4、justify-content: space-between; 5、width: calc((100% - 1336px)*0.57); 二、部分代码 1、html                    
用html和css写一个二级导航栏
最新发布
06-16
二级导航栏示例 <li><a href="#">主页</a></li> 一级菜单 <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> <li><a href="#">子菜单3</a></li> <li><a href="#">关于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值