Vue.js 网站导航栏设计：悬停显示下拉菜单
<!DOCTYPE html>
<html>
<head>
<title>Vue Website</title>
<link rel='stylesheet' type='text/css' href='style.css'>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
</head>
<body>
<div id='app'>
<header>
<nav>
<div class='logo'>
<img src='logo.png'>
</div>
<div class='menu'>
<ul>
<li v-for='item in menu' :key='item.id' @mouseover='showBox(item.id)' @mouseleave='hideBox()'>
<a>{{item.title}}</a>
<div class='box' v-if='item.show'>
<a v-for='subItem in item.submenu' :key='subItem.id'>{{subItem.title}}</a>
</div>
</li>
</ul>
</div>
</nav>
</header>
<main>
<p>Welcome to our website!</p>
<p>We provide the latest news and announcements about our company.</p>
<p>Stay tuned for exciting updates!</p>
</main>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
menu: [
{id: 1, title: 'About Us', show: false, submenu: [
{id: 1, title: 'Mission'},
{id: 2, title: 'Vision'},
{id: 3, title: 'Values'},
{id: 4, title: 'History'}
]},
{id: 2, title: 'News Center', show: false, submenu: [
{id: 1, title: 'Press Releases'},
{id: 2, title: 'Media Coverage'},
{id: 3, title: 'Events'}
]},
{id: 3, title: 'Policy Notices', show: false, submenu: [
{id: 1, title: 'Privacy Policy'},
{id: 2, title: 'Terms and Conditions'},
{id: 3, title: 'Cookie Policy'},
{id: 4, title: 'Disclaimer'}
]}
]
},
methods: {
showBox: function(id) {
this.menu.forEach(function(item) {
if (item.id == id) {
item.show = true;
}
});
},
hideBox: function() {
this.menu.forEach(function(item) {
item.show = false;
});
}
}
})
</script>
</body>
</html>
<p>/* CSS */</p>
<ul>
<li>{
margin: 0;
padding: 0;
box-sizing: border-box;
}</li>
</ul>
<p>body {
font-family: Arial, sans-serif;
font-size: 16px;
}</p>
<p>header {
background-color: #333;
color: #fff;
padding: 10px;
}</p>
<p>nav {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}</p>
<p>.logo {
width: 40%;
}</p>
<p>.logo img {
max-width: 100%;
height: auto;
}</p>
<p>.menu {
width: 60%;
}</p>
<p>ul {
list-style: none;
display: flex;
}</p>
<p>li {
margin-right: 20px;
position: relative;
}</p>
<p>a {
color: #fff;
text-decoration: none;
}</p>
<p>.box {
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
padding: 10px;
display: none;
z-index: 1;
}</p>
<p>.box a {
display: block;
margin-bottom: 5px;
color: #333;
}</p>
<p>li:hover .box {
display: block;
}</p>
原文地址: https://www.cveoy.top/t/topic/lNlr 著作权归作者所有。请勿转载和采集!