Browse Source

更改nav效果

sunjuan 3 years ago
parent
commit
16327c9f06

+ 37 - 2
nngkxxdp/src/main/resources/static/mxt/css/index.css

@@ -89,7 +89,7 @@ li {
 
 .box-nav {
 	width: 100%;
-	height: 57px;
+	height: 55px;
 	background-color: #F2F2F2;
 	margin-top: 15px;
 	display: flex;
@@ -105,10 +105,11 @@ li {
 	cursor: pointer;
 	font-weight: 600;
     font-family: 微软雅黑;
+    position: relative;
 }
 
 .box-nav>li:nth-child(1) {
-	width: 20%;
+	width: 22%;
 }
 
 .box-nav li.active {
@@ -118,6 +119,40 @@ li {
 	font-weight: 400;
 }
 
+.box-nav li:hover{
+	font-size: 18px;
+}
+
+.box-nav li i {
+	background: url(../img/m3-icon8.png)  no-repeat;
+	position: absolute;
+	width: 4px;
+    height: 6px;
+    position: absolute;
+    bottom: 0;
+    right: -4px;
+}
+
+.box-nav li:nth-child(2) i {
+	display: none;
+}
+
+.box-nav li:nth-child(3) i {
+	display: none;
+}
+
+.box-nav li:nth-child(4) i {
+	display: none;
+}
+
+.box-nav li:nth-child(5) i {
+	display: none;
+}
+
+.box-nav li:nth-child(6) i {
+	display: none;
+}
+
 .box-item {
 	width: 49%;
 	margin-top: 20px;

+ 6 - 6
nngkxxdp/src/main/resources/static/mxt/mxt.html

@@ -16,12 +16,12 @@
 			<div class="block-contanier">
 
 				<ul class="box-nav">
-					<li data-index="0" class="active">重庆市南岸区人民政府</li>
-					<li data-index="1">南岸健康卫士</li>
-					<li data-index="2">南岸人力社保</li>
-					<li data-index="3">南岸公安</li>
-					<li data-index="4">南岸智慧城管</li>
-					<li data-index="5">遇见南坪</li>
+					<li data-index="0" class="active">重庆市南岸区人民政府<i></i></li>
+					<li data-index="1">南岸健康卫士<i></i></li>
+					<li data-index="2">南岸人力社保<i></i></li>
+					<li data-index="3">南岸公安<i></i></li>
+					<li data-index="4">南岸智慧城管<i></i></li>
+					<li data-index="5">遇见南坪<i></i></li>
 				</ul>
 
 				<div class="box-contanier">