CSS Bootstrap 3 移动端滑入菜单/导航栏

在本文中，我们将介绍如何使用CSS和Bootstrap 3创建一个移动端滑入菜单或导航栏。移动设备已成为人们访问网站的主要手段之一，因此提供一个优雅且易于使用的导航栏对于网站的用户体验至关重要。通过使用CSS和Bootstrap 3，我们可以轻松地创建一个在移动设备上滑入显示的菜单，以提升用户的互动体验。

阅读更多：CSS 教程

创建基本结构

我们首先需要创建一个基本的HTML结构来容纳我们的滑入菜单。以下是一个简单的HTML模板，其中包括一个滑入菜单按钮和一个滑入菜单容器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滑入菜单示例</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <style>
        .menu {
            position: fixed;
            top: 0;
            left: -300px;
            width: 300px;
            height: 100%;
            background-color: #f8f8f8;
            padding: 20px;
            transition: all 0.3s ease;
        }

        .menu.open {
            left: 0;
        }

        .menu-btn {
            position: fixed;
            top: 20px;
            left: 20px;
            width: 40px;
            height: 40px;
            background-color: #333;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .menu-btn:before,
        .menu-btn:after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 20px;
            height: 2px;
            background-color: #fff;
            transform: translate(-50%, -50%);
            transition: all 0.3s ease;
        }

        .menu-btn:before {
            transform: translate(-50%, -50%) rotateZ(-45deg);
        }

        .menu-btn:after {
            transform: translate(-50%, -50%) rotateZ(45deg);
        }

        .menu.open + .menu-btn:before {
            transform: translate(-50%, -50%) rotateZ(45deg);
        }

        .menu.open + .menu-btn:after {
            transform: translate(-50%, -50%) rotateZ(-45deg);
        }
    </style>
</head>
<body>
    <div class="menu"></div>
    <div class="menu-btn"></div>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>

在这个基本结构中，我们通过使用position: fixed来固定菜单的位置，然后使用left属性将其移到屏幕外。当点击菜单按钮时，我们将通过添加open类来移动菜单到屏幕内。

添加交互效果

接下来，我们需要使用JavaScript来添加交互效果，以处理菜单的显示与隐藏。以下是我们所需的JavaScript代码：

const menuBtn = document.querySelector('.menu-btn');
const menu = document.querySelector('.menu');

menuBtn.addEventListener('click', function() {
    menu.classList.toggle('open');
});

此代码将监听菜单按钮的点击事件，并在每次点击时切换菜单的open类。该类将触发CSS中的过渡效果，使菜单以动画的方式滑入或滑出。

自定义菜单内容

在我们的HTML结构中，.menu元素代表我们的滑入菜单容器。你可以根据自己的需求随意修改这个容器的内容和样式。例如，你可以在该容器中添加导航链接、标题、图标等，以构建一个符合你网站风格的滑入菜单。

<div class="menu">
    <h2>菜单</h2>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</div>

完整的示例

将以上所述的HTML、CSS和JavaScript代码合并在一起，你就可以得到一个完整的滑入菜单示例。通过在移动设备上打开这个示例，你将能够看到菜单在点击按钮时滑入屏幕。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滑入菜单示例</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <style>
        .menu {
            position: fixed;
            top: 0;
            left: -300px;
            width: 300px;
            height: 100%;
            background-color: #f8f8f8;
            padding: 20px;
            transition: all 0.3s ease;
        }

        .menu.open {
            left: 0;
        }

        .menu-btn {
            position: fixed;
            top: 20px;
            left: 20px;
            width: 40px;
            height: 40px;
            background-color: #333;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .menu-btn:before,
        .menu-btn:after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 20px;
            height: 2px;
            background-color: #fff;
            transform: translate(-50%, -50%);
            transition: all 0.3s ease;
        }

        .menu-btn:before {
            transform: translate(-50%, -50%) rotateZ(-45deg);
        }

        .menu-btn:after {
            transform: translate(-50%, -50%) rotateZ(45deg);
        }

        .menu.open + .menu-btn:before {
            transform: translate(-50%, -50%) rotateZ(45deg);
        }

        .menu.open + .menu-btn:after {
            transform: translate(-50%, -50%) rotateZ(-45deg);
        }
    </style>
</head>
<body>
    <div class="menu">
        <h2>菜单</h2>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </div>
    <div class="menu-btn"></div>
    <script>
        const menuBtn = document.querySelector('.menu-btn');
        const menu = document.querySelector('.menu');

        menuBtn.addEventListener('click', function() {
            menu.classList.toggle('open');
        });
    </script>
</body>
</html>

以上示例中的滑入菜单采用了简单的样式和动画效果。你可以根据个人需求对菜单进行自定义样式和功能的修改。可以添加更多的菜单项、调整菜单的宽度、更改背景颜色等。