版权声明：转载请标明出处 https://blog.csdn.net/wobushixiaobailian/article/details/87794571
本文持续更新！
一、 下拉菜单
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.2 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/[email protected]/lib/index.js"></script>
<link rel="stylesheet" type="text/css" href="//unpkg.com/[email protected]/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我没写。