各种前端框架的下拉菜单收集

最新推荐文章于 2024-07-29 12:13:58 发布

我不是小白脸

最新推荐文章于 2024-07-29 12:13:58 发布

阅读量6.8k

点赞数 10

分类专栏： css特效文章标签：下拉菜单

本文链接：https://blog.csdn.net/wobushixiaobailian/article/details/87794571

版权

css特效专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

一、下拉菜单
二、导航栏
- 2.1 垂直导航栏
- 2.1 水平导航栏
三、提示框
四、图片边框
参考文献

本文持续更新！

一、下拉菜单

1.1 纯css、html实现

参考链接

<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例|菜鸟教程(runoob.com)</title>
<meta charset="utf-8">
<style>
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>下拉菜单</h2>
<p>鼠标移动到按钮上打开下拉菜单。</p>

<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="http://www.runoob.com">菜鸟教程 1</a>
    <a href="http://www.runoob.com">菜鸟教程 2</a>
    <a href="http://www.runoob.com">菜鸟教程 3</a>
  </div>
</div>

<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="http://www.runoob.com">菜鸟教程 1</a>
    <a href="http://www.runoob.com">菜鸟教程 2</a>
    <a href="http://www.runoob.com">菜鸟教程 3</a>
  </div>
</div>
</body>
</html>

运行效果:
当下拉区域dropdown获取焦点时，显示dropdown-content：
在这里插入图片描述

该下拉菜单的重点是 dropbtn 与 dropdown-content。当下拉区域dropdown获取焦点时，显示dropdown-content。

注意：为什么是dropdown获取焦点显示dropdown-content，而不是dropbtn获取焦点显示dropdown-content呢？

来我们直接当dropbtn获取焦点时，显示dropdown-conten的效果：

是为了让dropdown-content显示在dropbtn的正下方。因为dropdown-content的position我们选择的是absolute，而绝对定位的元素的位置相对于最近的已定位父元素（也就是dropdown），如果元素没有已定位的父元素，那么它的位置相对于html。如果我们选择让dropbtn获取焦点时显示drodown-content的话，那么当两个dropbtn分别获取焦点时，它们的dropdown-content都是显示在同一位置的（因为dropdown-content的位数是相对于dropdown的）。

1.3 纯css、html实现二

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>导航栏</title>
    <style>
        .drop-content {
            display: none;
            position: absolute;
            width: 100px;
        }

        .drop-menu:hover .drop-content {
            display: block;
        }

        .drop-menu {
            position: relative;
            display: inline-block;
            width: 100px;
            background-color: aqua;
        }

        ul li {
            list-style-type: none;
            display: inline;
        }

        ul li a {
            display: block;
            /*删除下划线*/
            text-decoration:none;
        }
    </style>
</head>

<body>
    <div>
        <ul class="nv_h">
            <li class="drop-menu">
                <span>菜单一</span>
                <a class="drop-content" href="http://www.baidu.com">子项1.1</a>
            </li>
            <li class="drop-menu">
                <span>菜单二</span>
                <a class="drop-content" href="http://www.baidu.com">子项2.1</a></li>
            <li class="drop-menu">
                <span >菜单三</span>
                <a class="drop-content" href="http://www.baidu.com">子项3.1</a></li>
        </ul>
    </div>
</body>

</html>

运行效果。
在这里插入图片描述

1.3 element-ui的下拉菜单的实现

element-ui的下拉菜单的参考链接

<!DOCTYPE html>
<html>
<head>
<title>基于element-ui的下拉菜单实现</title>
<meta charset="utf-8">
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.5.4/lib/index.js"></script>
<link rel="stylesheet" type="text/css" href="//unpkg.com/element-ui@2.5.4/lib/theme-chalk/index.css" />
</head>
<body>
    <div id="app">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项1</el-menu-item>
          <el-menu-item index="2-4-2">选项2</el-menu-item>
          <el-menu-item index="2-4-3">选项3</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3" disabled>消息中心</el-menu-item>
      <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    </el-menu>
    <div class="line"></div>
    <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项1</el-menu-item>
          <el-menu-item index="2-4-2">选项2</el-menu-item>
          <el-menu-item index="2-4-3">选项3</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3" disabled>消息中心</el-menu-item>
      <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    </el-menu>
    </div>
</div>
<script>
var Main = {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>
</body>
</html>

运行效果：
在这里插入图片描述
element-ui实现的下拉菜单，我们可以做出下面效果：

源码：

<el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1"><img width="20" height="20" v-bind:src="head"></el-menu-item>
          <el-submenu index="1">
            <template slot="title"> {{userName}}</template>
            <el-menu-item index="1-1" @click="outerVisible = true">个人信息</el-menu-item>
            <el-menu-item index="1-2" onclick="javascript:window.location.href='gatewayServer/logout'">注销登录
            </el-menu-item>
          </el-submenu>
        </el-menu>

具体一些细节，如userName,outerVisible我没写。

二、导航栏

2.1 垂直导航栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>导航栏</title>
    <style>
        .nv_v{
            background-color: gainsboro;
            width: 200px;
            margin: 0px;
            padding-left:  0px;
            padding-right: 0px;
             
        }
        /*移除列表前小标志。一个导航栏并不需要列表标记,取消li的边距*/
        .nv_v li{
            list-style-type: none;
            margin: 0;
            padding:0;
        }
        .nv_v li:hover {
            background-color:#747474
        }
        .active{
            background-color:#30C76F;
        }
    </style>
</head>

<body>
    <div id="nv_1">
        <ul class="nv_v">
            <li class="active"><a >菜单一</a></li>
            <li><a >菜单二</a></li>
            <li><a >菜单三</a></li>
        </ul>
    </div>

</body>

</html>

效果图。
在这里插入图片描述

参考网址菜鸟教程

2.1 水平导航栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>导航栏</title>
    <style>
        .nv_h {
            background-color: black;
            margin: 0;
            padding: 0;
        }

        /*移除列表前小标志。一个导航栏并不需要列表标记,取消li的边距，水平显示*/
        .nv_h li {
            list-style-type: none;
            margin: 0;
            padding: 15px 15px;
            float: left;
        }

        .nv_h li:hover {
            background-color: #E0E0E0;
        }

        .active {
            background-color: #309BC6;
        }
    </style>
</head>

<body>
    <div>
        <ul class="nv_h">
            <li class="active"><a>菜单一</a></li>
            <li><a>菜单二</a></li>
            <li><a>菜单三</a></li>
        </ul>
    </div>
</body>

</html>

运行效果。
在这里插入图片描述

三、提示框

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>提示工具</title>
    <style>
        .text {
            position: relative;
            display: inline-block;
        }

        .text .tip {
            position: absolute;
            visibility: hidden;
            width: 120px;
            left: 105%;
            top:0;
            background-color: black;
            color: #fff;
            z-index: 1;
            border-radius: 6px;
        }

        .text:hover .tip {
            visibility: visible;
        }
    </style>
</head>

<body>
    <div class="text">
        你才我是干嘛的？
        <span class="tip">
            提示工具示例
        </span>
    </div>
</body>

</html>

运行效果。
在这里插入图片描述

四、图片边框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>图片边框</title>  
<style>
div.img {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.img:hover {
    border: 1px solid #777;
    width: 200px;
}

div.img:hover img{
    height: auto;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}
</style>
</head>
<body>

<div >
  <div class="img">
    <a target="_blank" href="//static.runoob.com/images/demo/demo1.jpg">
      <img src="//static.runoob.com/images/demo/demo1.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">富强</div>
  </div>
</div>
 
<div class="responsive">
  <div class="img">
    <a target="_blank" href="//static.runoob.com/images/demo/demo2.jpg">
      <img src="//static.runoob.com/images/demo/demo2.jpg" alt="图片文本描述" >
    </a>
    <div class="desc">民主</div>
  </div>
</div>
 
<div class="responsive">
  <div class="img">
    <a target="_blank" href="//static.runoob.com/images/demo/demo3.jpg">
      <img src="//static.runoob.com/images/demo/demo3.jpg" alt="图片文本描述" >
    </a>
    <div class="desc">和谐</div>
  </div>
</div>
 
<div class="responsive">
  <div class="img">
    <a target="_blank" href="//static.runoob.com/images/demo/demo4.jpg">
      <img src="//static.runoob.com/images/demo/demo4.jpg" alt="图片文本描述" >
    </a>
    <div class="desc">友善</div>
  </div>
</div>

</body>
</html>