CSS之导航栏

最新推荐文章于 2024-05-31 06:51:25 发布

fancymeng

最新推荐文章于 2024-05-31 06:51:25 发布

阅读量2.2k

点赞数 5

分类专栏： css vue 文章标签： css 前端 javascript vue html

本文链接：https://blog.csdn.net/Fancymeng/article/details/132627293

版权

css 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

小序

凡所经历，皆为过往
但终会在记忆和时光中留痕

今天接着上面谈谈CSS
CSS除了简单的文字背景样式外，还有着多样的格式
本篇文章笔者将谈一谈导航栏今天这篇会涉及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>