二级导航栏

最新推荐文章于 2024-05-27 17:27:19 发布

kleinBlue.

最新推荐文章于 2024-05-27 17:27:19 发布

阅读量240

点赞数

分类专栏： html5 web前端 css 文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_43299703/article/details/120388895

版权

web前端同时被 3 个专栏收录

33 篇文章 3 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

html5

3 篇文章 0 订阅

订阅专栏

css 样式

为了工作和平时项目的需要，在自己工作空余时间自己写的一个 css 样式
同时也是为了巩固 css 和 sass 的知识
目的是为了：适应每一个项目自己重置样式,创造属于自己的 style
虽然目前已有很多流行和成熟的 css 框架，如 bootstrap,Semantic UI,Pure…都有各的优点
但还是决定做更加适合前端工作的 css 样式，我并没说是 css 框架，因为还需要不断更新
自己在空余时间也会不断的去优化，学习和进步

 @charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

body, html {
  height: 100%;
  overflow: hidden;
}

.container-fluid {
  width: 100%;
  padding-bottom: 10px;
}

.carect {
  position: relative;
  width: 0;
  height: 0;
  margin-left: 5px;
  margin-bottom: 2px;
  border-top: 6px solid;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-radius: 10px;
  display: inline-block;
}

/*
    导航组件
*/
nav {
  width: 100%;
  height: 91px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: 0 2px 4px #ccc;
  box-shadow: 0 2px 4px #ccc;
  padding: 10px 0;
}
nav li, nav a {
  text-decoration: none;
  list-style: none;
}
nav .nav-logo {
  width: auto;
  height: 100%;
  margin-left: 20px;
  float: left;
}
nav .nav-logo a, nav .nav-logo li, nav .nav-logo ol, nav .nav-logo span, nav .nav-logo p {
  font-size: 30px;
  font-weight: bold;
  list-style: none;
  color: #1f79ec;
  text-decoration: none;
}
nav .nav-logo img {
  max-width: 100%;
  max-height: 100%;
  margin-left: 100px;
  width: 160px;
  height:91px;
}
nav ::-webkit-scrollbar {
  display: none;
}
nav .nav-list {
  /*nav-list*/
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  float: right;
  line-height: 80px;
  margin-right: 120px;
}
@media (max-width: 1200px) {
  nav .nav-list {
    position: fixed;
    height: 91px;
    top: 0;
    padding-top: 10px;
    width: 60%;
    background: #fff;
    left: -60%;
    -webkit-transition: 1s;
    transition: 1s;
    -webkit-box-shadow: 3px 0px 10px #f0eded;
    box-shadow: 3px 0px 10px #f0eded;
  }
}
nav .nav-list > li {
  position: relative;
  list-style: none;
  float: left;
  text-align: center;
}
@media (max-width: 1200px) {
  nav .nav-list > li {
    width: 100%;
    margin: 0;
    overflow: hidden;
  }
  nav .nav-list > li {
    margin-bottom: 15px;
  }
}
nav .nav-list > li .active {
  color: #fff;
  background: #094fb7;
}
nav .nav-list > li a {
  color: #5a5c5f;
  display: inline-block;
  line-height: 32px;
  padding: 1px 15px;
  margin: 0 10px;
  font-size: 15px;
  border-radius: 5px;
  text-decoration: none;
}
@media (max-width: 1200px) {
  nav .nav-list > li a {
    width: 100%;
    border-radius: 0;
    margin: 0;
  }
}
nav .nav-list > li a:hover {
  color: #fff;
  background-color: #094fb7;
}
nav .nav-list > li .menu {
  min-width: 100px;
  background: #fff;
  -webkit-box-shadow: 0 2px 10px #ccc;
  box-shadow: 0 2px 10px #ccc;
  position: absolute;
  border-radius: 5px;
  white-space: nowrap;
  left: 0;
  height: 0;
  overflow: hidden;
  -webkit-transition: 1s;
  transition: 1s;
}
@media (max-width: 1200px) {
  nav .nav-list > li .menu {
    position: relative;
    width: 100%;
    text-align: center;
    border-radius: 0;
    -webkit-box-shadow: 0 -1px 7px #ccc inset;
    box-shadow: 0 -1px 7px #ccc inset;
  }
}
nav .nav-list > li .menu li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
}
nav .nav-list > li:hover .menu {
  height: auto;
}
nav .nav-menu {
  display: none;
  z-index: 999;
  background: #fff;
  cursor: pointer;
}
@media (max-width: 1200px) {
  nav .nav-menu {
    display: block;
    float: right;
    padding: 8px 5px;
    position: relative;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-right: 15px;
  }
  nav .nav-menu span {
    height: 2px;
    width: 25px;
    display: block;
    background: #CCC;
    border-radius: 10px;
  }
  nav .nav-menu span + span {
    margin-top: 6px;
  }
}
nav .open {
  left: 0%;
  overflow: auto;
}

/*# sourceMappingURL=zd-1.0.css.map */

html 和 js 样式

<!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>二级导航栏</title>

<link rel="stylesheet" href="css/zd-1.0.css">

</head>
<body>
<nav>
	<!-- logo -->
	<div class="nav-logo">
		<a href="###"><img src="img/5e2b1c7056a1ae79916139519e01957.png" alt=""></a>
	</div>
	<!-- 控制menu -->
	<div class="nav-menu">
		<span></span>
		<span></span>
		<span></span>

	</div>
	<!-- 菜单 -->
	<ul class="nav-list">
		<li>
			<a href="" class="active">首页<div class="carect"></div></a>

		</li>
		<li>
			<a href="">我是</a>
			<ul class="menu">
				<li><a href="">不断学习</a></li>
				<li><a href="">不断进步</a></li>
			</ul>
		</li>
		<li>
			<a href="">一个</a>
			<ul class="menu">
				<li><a href="">不断学习</a></li>
				<li><a href="">不断进步</a></li>
			</ul>
		</li>
		<li>
			<a href="">热爱</a>
			<ul class="menu">
				<li><a href="">不断学习</a></li>
				<li><a href="">不断进步</a></li>
			</ul>
		</li>
		<li>
			<a href="">Web</a>
			<ul class="menu">
				<li><a href="">不断学习</a></li>
				<li><a href="">不断进步</a></li>
			</ul>
		</li>
		<li>
			<a href="">前端</a>
			<ul class="menu">
				<li><a href="">不断学习</a></li>
				<li><a href="">不断进步</a></li>
			</ul>
		</li>
		<li>
			<a href="">的有</a>
			<ul class="menu">
				<li><a href="">不断学习</a></li>
				<li><a href="">不断进步</a></li>
			</ul>
		</li>
		<li>
			<a href="">为青</a>
			<ul class="menu">
				<li><a href="">不断学习</a></li>
				<li><a href="">不断进步</a></li>
			</ul>
		</li>
		<li>
			<a href="">年！</a>
			<ul class="menu">
				<li><a href="">不断学习</a></li>
				<li><a href="">不断进步</a></li>
			</ul>
		</li>
	</ul>
</nav>
<div>
	<button ></button>
</div>
<script src="js/jquery.min.js"></script>
<script>
	$(document).click(function(){
		$('.nav-list').removeClass('open')
	})
	$('.nav-menu,.nav-list').click(function(e){e.stopPropagation()})
	$('nav').find('.nav-menu').click(function(e){
		$('.nav-list').toggleClass('open')
	})
</script>


</body>
</html>

kleinBlue.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二级导航栏

css 样式为了工作和平时项目的需要，在自己工作空余时间自己写的一个 css 样式同时也是为了巩固 css 和 sass 的知识目的是为了：适应每一个项目自己重置样式,创造属于自己的 style虽然目前已有很多流行和成熟的 css 框架，如 bootstrap,Semantic UI,Pure…都有各的优点但还是决定做更加适合前端工作的 css 样式，我并没说是 css 框架，因为还需要不断更新自己在空余时间也会不断的去优化，学习和进步 @charset "UTF-8";* { mar
复制链接

扫一扫

专栏目录