jquery 图标菜单

基础概念

jQuery图标菜单是一种使用jQuery库实现的交互式菜单，其中包含图标作为菜单项的标识。这种菜单通常用于网站的导航栏或工具栏，以提供直观的用户界面。

类型

水平菜单：图标和文本水平排列，常见于网站的顶部导航栏。
垂直菜单：图标和文本垂直排列，适用于侧边栏或工具栏。
下拉菜单：点击图标后展开的下拉菜单，可以包含多个子菜单项。
悬停菜单：鼠标悬停在图标上时显示的菜单，适用于桌面端应用。

应用场景

网站导航栏
工具栏
侧边栏
移动应用界面
数据可视化工具

示例代码

以下是一个简单的jQuery图标菜单示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Icon Menu</title>
    <style>
        .menu {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .menu li {
            display: inline-block;
            margin-right: 10px;
        }
        .menu li a {
            text-decoration: none;
            color: #333;
        }
        .menu li a:hover {
            color: #007bff;
        }
    </style>
</head>
<body>
    <ul class="menu">
        <li><a href="#"><i class="fas fa-home"></i> Home</a></li>
        <li><a href="#"><i class="fas fa-user"></i> Profile</a></li>
        <li><a href="#"><i class="fas fa-cog"></i> Settings</a></li>
    </ul>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.menu li').hover(
                function() {
                    $(this).css('background-color', '#f0f0f0');
                },
                function() {
                    $(this).css('background-color', 'transparent');
                }
            );
        });
    </script>
</body>
</html>