HTML左固定式导航栏

一坨man

已于 2025-01-17 00:14:58 修改

阅读量465

点赞数 9

分类专栏： HTML分享文章标签： html 前端 bootstrap 学习

于 2025-01-17 00:09:59 首次发布

本文链接：https://blog.youkuaiyun.com/a_mann/article/details/145194312

版权

HTML分享专栏收录该内容

1 篇文章

订阅专栏

对于新手来说想做一些自己想做的样式，在网上又找不到符合自己心目中的代码。今天为大家带来的是HTML左固定式导航栏！

---运行图如下：（上导航栏固定、左导航栏固定）

1.创建一个HTML文件

2.引入Bootstrap框架（没接触过的小伙伴不要着急，去菜鸟教程看看bootstrap5）

把link改成：<link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">

把script改成：<script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>

代码最后就能直接用啦！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" href="../css/bootstrap.css">
    <title>Document</title>
</head>
<body>
    
</body>
<script src="../js/bootstrap.js"></script>
</html>

3.做一个顶部导航栏左边是字右边是两个按钮


<body>
    <div class="container-fluid">
        <div class="row bg-dark fixed-top" id="navbar">
            <div class="col-md-2 col-lg-2 text-white">
                <h1 class="text-center " style="margin-top: 8px;">挂号平台</h1>
            </div>
            <div class=" col-md-2  offset-md-8 text-left d-flex justify-content-end align-items-center">
                <button type="button" name="" id="" class="btn btn-primary btn-lg btn-block">登录</button>
                <button type="button" name="" id="" class="btn btn-primary btn-lg btn-block">注册</button>
            </div>
            
 </div>
</body>

4.做一个左侧导航并且固定


        <div class="row bg-dark " id="content" style="padding: 0px; margin-top:70px; height: 100vh;">
            <!-- 左边 -->
             <div class="col-md-2 col-lg-2 position-fixed" style="top: 70px; bottom: 0;">
                <nav class="navbar w-100">
                    <ul class="nav nav-pills flex-column w-100">
                        <li class="nav-item">
                            <a class="nav-link active" href="#">首页</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">XX</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">XX</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">挂号</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">评价</a>
                        </li>
                    </ul>
                </nav>
            </div>
        
        </div>

5.在右侧添加自己需要的内容（添加了一个js计算高度函数后的完整代码）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <title>Document</title>
</head>
<style>
    
    .btn-lg{
        margin-left: 10px;
    }
    .navbar ul li {
        width: 100%;
        text-align: center;
        padding: 0px;
    }
    
</style>
<body>
    <!-- 头部 -->
    <div class="container-fluid">
        <div class="row bg-dark fixed-top" id="navbar">
            <div class="col-md-2 col-lg-2 text-white">
                <h1 class="text-center " style="margin-top: 8px;">挂号平台</h1>
            </div>
            <div class=" col-md-2  offset-md-8 text-left d-flex justify-content-end align-items-center">
                <button type="button" name="" id="" class="btn btn-primary btn-lg btn-block">登录</button>
                <button type="button" name="" id="" class="btn btn-primary btn-lg btn-block">注册</button>
            </div>
            
        </div>

        
        <div class="row bg-dark " id="content" style="padding: 0px; margin-top:70px; height: 100vh;">
            <!-- 左边 -->
             <div class="col-md-2 col-lg-2 position-fixed" style="top: 70px; bottom: 0;">
                <nav class="navbar w-100">
                    <ul class="nav nav-pills flex-column w-100">
                        <li class="nav-item">
                            <a class="nav-link active" href="#">首页</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">XX</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">XX</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">挂号</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">评价</a>
                        </li>
                    </ul>
                </nav>
            </div>
            <!-- 右边 -->
            <div class="col-md-10 col-lg-10 offset-md-2 offset-lg-2">
                <div class="row">
                    <div class="col-md-12 col-lg-12 text-white">
                        <h1>首页</h1>
                    </div>
                </div>
            </div>


            
        </div>

    
    </div>

    
    
</body>

<script>
    function adjustMarginTop() {
        const navbar = document.getElementById('navbar');
        const content = document.getElementById('content');
        const navbarHeight = navbar.offsetHeight;
        content.style.marginTop = navbarHeight + 'px';
    }

    // 调整页面加载时和窗口大小改变时的 margin-top
    window.onload = adjustMarginTop;
    window.onresize = adjustMarginTop;
</script>
<script src="../js/bootstrap.js"></script>

</html>

有需要可以直接复制代码哟，有什么问题可以直接评论区留言