小序
凡所经历，皆为过往
但终会在记忆和时光中留痕
今天接着上面谈谈CSS
CSS除了简单的文字背景样式外，还有着多样的格式
本篇文章笔者将谈一谈导航栏 今天这篇会涉及HTML和VUE哦~ ~ ~
目录
- 小序
- 正文
- HTML
- 垂直导航栏
- 水平导航栏
- VUE
- 结束语
正文
导航栏的规整是网页美观的必需品
各式各样的功能也需要导航栏来为用户精准指引
首先，我们先来看看HTML的导航栏
我们废话不多说，直接上代码 看效果
HTML
垂直导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS垂直导航栏</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: pink;
color: white;
}
li a:hover:not(.active) {
background-color: #33CCFF;
color: white;
}
</style>
</head>
<body>
<h2>垂直导航</h2>
<p> "active" 指代选中情况</p>
<ul>
<li><a class="active" href="#home">主页</a></li>
<li><a href="#content1">内容1</a></li>
<li><a href="#content2">内容2</a></li>
<li><a href="#content3">内容3</a></li>
</ul>
</body>
</html>
效果如图：
水平导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS水平导航栏</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #FF00CC ;
}
li {
float: left;
border-right:1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #CCCCFF;
}
.active {
background-color: #99CCFF;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">主页</a></li>
<li><a href="#content1">内容1</a></li>
<li><a href="#content2">内容2</a></li>
<li><a href="#content3">内容3</a></li>
</ul>
</body>
</html>
效果如下：
下拉菜单
<!DOCTYPE html>
<html>
<head>
<title>CSS导航下拉菜单</title>
<meta charset="utf-8">
<style>
.dropbtn {
background-color: #9966FF;
color: white;
padding: 15px;
font-size: 15px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #CCCCFF;
min-width: 130px;
box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.1);
}
.dropdown-content a {
color: black;
padding: 8px 5px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3366FF;
}
</style>
</head>
<body>
<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>
</body>
</html>
效果如下：
VUE
下面代码使用了Element-UI 的组件，具体实现为之前的项目经历，读者可根据需要自行改进
<template>
<el-menu
class="el-menu-vertical-demo"
default-active="2"
:collapse="isCollapse"
@open="handleOpen"
@close="handleClose"
:default-active="routes.path"
router
@select="handleSelect"
>
<el-radio-group v-model="isCollapse">
<el-radio-button :label="false" style=""><el-icon><Expand /></el-icon></el-radio-button>
<el-radio-button :label="true"><el-icon><Fold /></el-icon></el-radio-button>
</el-radio-group>
<el-menu-item index="/22">
<el-icon><location /></el-icon>
<template #title>首页</template>
</el-menu-item>
<el-menu-item index="/upload" style="align-self: center">
<el-icon><Picture /></el-icon>
<template #title>表情识别</template>
</el-menu-item>
<el-menu-item index="/33">
<el-icon><VideoCamera /></el-icon>
<template #title>摄像头实时检测</template>
</el-menu-item>
<el-menu-item index="/data">
<el-icon><View /></el-icon>
<template #title>数据统计</template>
</el-menu-item>
<el-menu-item>
<el-icon><switchButton /></el-icon>
<template v-for="router in currentRouters">
<template v-if="!isLogin && !router.meta.isLogin && router.meta.isNav">
<el-menu-item :index="router.path"></el-menu-item>
</template>
<template v-else-if="isLogin && router.meta.isLogin && router.meta.isNav">
<el-menu-item :index="router.path">{{ router.name }}</el-menu-item>
</template>
</template>
</el-menu-item>
</el-menu>
</template>
<style scoped>
.logo{
max-width: 1024px;
margin-bottom:10px;
display: flex;
flex-direction: column;
align-items:center;
}
.el-header {
/*width: 1225px;*/
/*background-color: #ff6a6c;*/
width: auto;
--el-header-padding: 0 100px;
--el-header-height: 60px;
padding: var(--el-header-padding);
box-sizing: border-box;
flex-shrink: 0;
height: var(--el-header-height);
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
/*background-color: #c9e7cd;*/
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
.active {
color: white;
background-color: #89af4c;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
/*position: static;*/
width: 200px;
min-height: 720px;
background-color: #1111;
}
.el-menu--collapse{
background-color: #1111;
min-height: 720px;
}
</style>
效果如下：
本文没有过多的论述和讲解代码，笔者认为单纯看懂并不能解决问题，动手实践恰恰是最好的方式。
欢迎大家积极评论，积极实践
结束语
这是CSS专栏的第三篇啦
希望我能继续坚持更下去
你们的支持是我不竭的动力
谨以此句，送给你们，更勉励自己
不积跬步，无以至千里
不积小流，无以成江海
时间刚刚好
那最后用一段最近听的歌结束吧
从前 追晚风的人
追上了 朦胧的黄昏
追上了 起雾的清晨 与你同尘
悲欢在 记忆里留痕
时光里 在对视的我们
这一路 山海与晨昏
随风而沉
