没有 Bootstrap 的简单侧边栏，找不到任何方便的答案

Question

好的，我有一个非常简洁明了的代码，用于 2 面板超轻型网站项目。

左侧的第一个面板是一个巨大的 Nav（从上到下，wiki 样式，270 像素宽度），包含 ± 30 ul 和 li 内容。旁边的第二个面板是内容。没有多余的，我想要它清楚，顶部没有导航栏，没有页脚等，只有两个元素，左和右。

我需要：

第一个面板应该独立于第二个面板滚动。
第一个面板出现并在计算机显示屏上启动时保持打开状态。
第一个面板在移动显示屏上显示为关闭。
出现一个开关可以打开它。
推送内容或覆盖无关紧要。

像这样 Simple Sidebar 但不使用所有不必要的代码、下拉菜单、供应商和 Bootstrap 的垃圾，这些东西需要花费数小时才能删除和清理。

是否有一种简单的方法可以使用 html、css、jquery 或更好的 javascript 的某些行来实现？我需要避免因 bootstrap 无用代码而头疼，而且我对搜索的每个答案的所有 "closed at start" 和 "non-scrollable" 汉堡菜单都快发疯了...!!!

感谢那些用清晰而简单的解决方案让我摆脱这种疯狂的人。

Answer 1

试试这个：See Demo

无 Bootstrap、无 jQuery、无供应商。只有 css 和 javascript.

当第一个面板有足够的元素时，它可以滚动。
第一个停留在桌面视图。
第一个面板在移动默认视图中隐藏。并且将显示一个切换按钮。
单击切换按钮时，将显示第一个面板。

index.html:

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

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <title>CodePen - A Pen by Motahar</title>
    <link rel="stylesheet" href="./style.css">

</head>

<body>
    <div class="content-container">
        <div id="left-panel" class="left-nav-wrapper">
            <ul class="navigation-panel">
                <li class="nav-1 nav-tab active" onclick="openPage(event, 'contentName1')">Tab-1</li>
                <li class="nav-2  nav-tab" onclick="openPage(event, 'contentName2')">Tab-2</li>
                <li class="nav-3 nav-tab" onclick="openPage(event, 'contentName3')">Tab-3</li>
                <li class="nav-4 nav-tab" onclick="openPage(event, 'contentName4')">Tab-4</li>
            </ul>
            <div class="cross-btn" onclick="showNav()">
                <span>X</span>
            </div>
        </div>
        <div class="right-content-wrapper">
            <div id="contentName1" class="content right-pan-normal-mode" style="display: block">
                <div class="heading">
                    <h1>Content 1</h1>
                </div>
                <p>1-
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                    industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
                    and
                    scrambled it to make a type specimen book. It has survived not only five centuries, but also the
                    leap
                    into electronic typesetting, remaining essentially unchanged.
                </p>
            </div>
            <div id="contentName2" class="content right-pan-normal-mode">
                <div class="heading">
                    <h1>Content 2</h1>
                </div>
                <p>2-
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                    industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
                    and
                    scrambled it to make a type specimen book. It has survived not only five centuries, but also the
                    leap
                    into electronic typesetting, remaining essentially unchanged.
                </p>
            </div>
            <div id="contentName3" class="content right-pan-normal-mode">
                <div class="heading">
                    <h1>Content 3</h1>
                </div>
                <p>3-
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                    industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
                    and
                    scrambled it to make a type specimen book. It has survived not only five centuries, but also the
                    leap
                    into electronic typesetting, remaining essentially unchanged.
                </p>
            </div>
            <div id="contentName4" class="content right-pan-normal-mode">
                <div class="heading">
                    <h1>Content 4</h1>
                </div>
                <p>4-
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                    industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
                    and
                    scrambled it to make a type specimen book. It has survived not only five centuries, but also the
                    leap
                    into electronic typesetting, remaining essentially unchanged.
                </p>
            </div>
        </div>
    </div>
    <!-- partial -->
    <script src="./script.js"></script>

</body>

</html>

style.css

.content-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.content-container .left-nav-wrapper {
    width: 270px;
    height: 100vh;
    background: #dfdfdf;
    overflow-y: auto;

}
.content-container ul.navigation-panel {
    padding: 0px;
    margin: 0;
}
.content-container .left-nav-wrapper ul li {
    padding: 10px;
    list-style: none;
    border-bottom: 1px solid gray;
    background: #c1c1c1;
    cursor: pointer;
}

.content-container .left-nav-wrapper ul li.active {
    background: #efefef;
}
.content-container .right-content-wrapper {
    width: 100%;
    padding-left: 15px;
}

.content-container .right-content-wrapper p {
  margin-top: 0px
}
.content-container .right-content-wrapper .content {
  display: none;
}
.cross-btn {
    display: none;
}


@media (max-width: 560px) {
    .content-container {
        position: relative;
    }

    .cross-btn {
        display: block;
        padding: 5px 8px;
        cursor: pointer;
        width: 20px;
        height: 20px;
        background: #dfdfdf;
    }

    .content-container .left-nav-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        background: #fff0;
        position: absolute;
        left: -250px;
        transition: all 0.5s;
    }

    .content-container .right-content-wrapper {
        margin-left: 25px;
    }

    ul.navigation-panel {
        width: 100%;
        background: #dfdfdf;
        margin-top: 0;
    }
    #left-panel {
        left: -250px;
    }


}

script.js

// Right Pane Active/Hide Content
function openPage(evt, pageName) {
    var i, pagecontent, tablinks;
    pagecontent = document.getElementsByClassName("right-pan-normal-mode");
    for (i = 0; i < pagecontent.length; i++) {
        pagecontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("nav-tab");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(pageName).style.display = "block";
    evt.currentTarget.className += " active";
}

// Left Pane Active/Hide Nav on Mobile
function showNav() {
    var navCss = document.getElementById("left-panel");
    if (navCss.style.left === "0px") {
        navCss.style.left = "-250px";
    } else {
        navCss.style.left = "0px";
    }
}

没有 Bootstrap 的简单侧边栏，找不到任何方便的答案

Simple Sidebar without Bootstrap, can't find any convenient answers

html

javascript

css

jquery

sidebar