Bootstrap 是一个流行的前端框架,它提供了丰富的组件和工具,使得网页开发变得更加简单和高效。其中,Bootstrap 的导航菜单组件是构建响应式网站的关键部分。本文将深入探讨如何使用 Bootstrap 实现一个无敌展开的 UL 菜单。
一、Bootstrap UL 菜单的基本结构
Bootstrap 提供了响应式的导航菜单组件,基本结构如下:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 2</a></li>
<li><a href="#">Service 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
二、实现无敌展开的 UL 菜单
要实现无敌展开的 UL 菜单,我们需要对上述基本结构进行一些修改。以下是实现步骤:
- 添加自定义样式:为了使菜单在点击后能够无敌展开,我们需要自定义一些样式。
.dropdown:hover .dropdown-menu {
display: block;
}
- 修改 JavaScript 代码:为了使菜单在点击后能够无敌展开,我们需要修改 JavaScript 代码。
<script>
$(document).ready(function(){
$('.navbar-nav li.dropdown').hover(
function() {
$(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(500);
},
function() {
$(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut(500);
}
);
});
</script>
- 整合代码:将上述 CSS 和 JavaScript 代码整合到 HTML 文件中。
<!-- 引入 Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- 引入自定义 CSS -->
<style>
.dropdown:hover .dropdown-menu {
display: block;
}
</style>
<!-- 引入 Bootstrap JS 和依赖的 jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 导航菜单 -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 2</a></li>
<li><a href="#">Service 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<script>
$(document).ready(function(){
$('.navbar-nav li.dropdown').hover(
function() {
$(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(500);
},
function() {
$(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut(500);
}
);
});
</script>
三、总结
通过以上步骤,我们成功实现了一个无敌展开的 UL 菜单。在实际应用中,可以根据具体需求对样式和 JavaScript 代码进行调整,以达到更好的效果。希望本文能帮助您更好地掌握 Bootstrap 的 UL 菜单组件。
