Bootstrap Hover Dropdown 教程

龚盼韬

于 2024-08-12 08:31:07 发布

阅读量350

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00650/article/details/141117768

版权

Bootstrap Hover Dropdown 教程

bootstrap-hover-dropdown项目地址:https://gitcode.com/gh_mirrors/boo/bootstrap-hover-dropdown

项目介绍

bootstrap-hover-dropdown 是一个开源的 JavaScript 插件，旨在为 Bootstrap 框架添加悬停功能，使得下拉菜单在用户鼠标悬停时自动展开，而不是仅在点击时展开。这个插件特别适用于桌面用户，提供更流畅的导航体验。

项目快速启动

安装

首先，你需要通过 Git 克隆项目到本地：

git clone https://github.com/CWSpear/bootstrap-hover-dropdown.git

引入文件

在你的 HTML 文件中引入必要的 CSS 和 JavaScript 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap Hover Dropdown Example</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="path/to/bootstrap-hover-dropdown.min.js"></script>
</head>
<body>

使用插件

在引入文件后，你可以通过以下代码启用悬停功能：

<script>
    $(document).ready(function() {
        $('.dropdown-toggle').dropdownHover();
    });
</script>

示例代码

以下是一个完整的示例，展示如何在 Bootstrap 导航栏中使用悬停下拉菜单：

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
                <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Page 1-1</a></li>
                    <li><a href="#">Page 1-2</a></li>
                    <li><a href="#">Page 1-3</a></li>
                </ul>
            </li>
            <li><a href="#">Page 2</a></li>
            <li><a href="#">Page 3</a></li>
        </ul>
    </div>
</nav>