css停靠菜单

CSS停靠菜单基础概念

CSS停靠菜单（Dock Menu）是一种常见的用户界面元素，通常用于显示应用程序的主要功能或导航选项。这种菜单通常固定在屏幕的某个边缘（如顶部、底部或侧面），并且可以展开或折叠以显示或隐藏其内容。

类型

顶部停靠菜单：固定在屏幕顶部，常见于浏览器和某些应用程序。
底部停靠菜单：固定在屏幕底部，常见于移动设备和某些桌面应用程序。
侧边停靠菜单：固定在屏幕侧面，常见于桌面应用程序。

应用场景

桌面应用程序：如办公软件、图像处理软件等。
移动应用程序：如社交媒体应用、游戏应用等。
网页应用：如在线工具、管理平台等。

示例代码

以下是一个简单的CSS停靠菜单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Dock Menu</title>
    <style>
        .dock-menu {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #333;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 10px 0;
        }
        .dock-menu a {
            color: white;
            text-decoration: none;
            font-size: 16px;
        }
        .dock-menu a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="dock-menu">
        <a href="#">Home</a>
        <a href="#">Search</a>
        <a href="#">Profile</a>
        <a href="#">Settings</a>
    </div>
    <div style="height: 2000px; background-color: #f0f0f0;">
        Main Content Area
    </div>
</body>
</html>