正文

揭秘Bootstrap：轻松实现UL菜单的无敌展开技巧

/0 浏览量
0324

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 菜单，我们需要对上述基本结构进行一些修改。以下是实现步骤：

  1. 添加自定义样式：为了使菜单在点击后能够无敌展开，我们需要自定义一些样式。
.dropdown:hover .dropdown-menu {
  display: block;
}
  1. 修改 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>
  1. 整合代码：将上述 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 菜单组件。

-- 展开阅读全文 --