创建一个HTML页面,使用<script>标记直接引入jQuery文件;定义一组无序列表,设置CSS样式,实现列表项从左到右导航条效果;在有下拉菜单的导航标签项li中各嵌套一组无序列表,设置CSS样式;使用jQuery获取作为导航标签的li元素,并通过事件方法绑定mouseover()事件,实现鼠标移到导航某个标签时,获取当前元素的子元素ul并应用slideDown()方法垂直滑动显示(向下增大)其下拉菜单;使用jQuery获取作为导航标签的li元素,并通过事件方法绑定mouseout()事件,实现鼠标移出导航某个标签时,获取当前元素的子元素ul并应用slideUp()方法垂直滑动隐藏(向上减小)其下拉菜单。
时间: 2024-03-05 12:53:47 浏览: 15
好的,以下是代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航条效果</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
ul.nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
display: flex;
}
ul.nav li {
float: left;
}
ul.nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.nav li a:hover {
background-color: #111;
}
ul.nav li ul {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
ul.nav li ul li {
position: relative;
display: block;
float: none;
}
ul.nav li ul li a {
padding: 12px 16px;
color: #333;
text-decoration: none;
display: block;
text-align: left;
}
ul.nav li ul li a:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a>
<ul>
<li><a href="#">国内新闻</a></li>
<li><a href="#">国际新闻</a></li>
</ul>
</li>
<li><a href="#">体育</a>
<ul>
<li><a href="#">足球</a></li>
<li><a href="#">篮球</a></li>
<li><a href="#">乒乓球</a></li>
</ul>
</li>
<li><a href="#">娱乐</a>
<ul>
<li><a href="#">电影</a></li>
<li><a href="#">音乐</a></li>
</ul>
</li>
<li><a href="#">联系我们</a></li>
</ul>
<script>
$(document).ready(function(){
// 鼠标移入事件,滑动下拉菜单
$('ul.nav li').mouseover(function(){
$(this).children('ul').slideDown('fast');
});
// 鼠标移出事件,收起下拉菜单
$('ul.nav li').mouseout(function(){
$(this).children('ul').slideUp('fast');
});
});
</script>
</body>
</html>
```
这段代码实现了一个简单的导航条效果,其中包括一个顶级无序列表,每个列表项包含一个主导航链接和一个下拉菜单的无序列表。CSS样式定义了导航条的外观,其中包括悬停效果和下拉菜单的样式。使用jQuery的mouseover()和mouseout()事件方法,实现鼠标移入和移出导航标签时的下拉菜单的显示和隐藏。