时间戳

首页 > 解决方案 > 没有Bootstrap的简单侧边栏，找不到任何方便的答案

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

问题描述

好的，我为 2 个面板的超轻网站项目提供了一个非常简洁明了的代码。

左边的第一个面板是一个巨大的导航（从上到下，wiki 样式，270px 宽度），带有 ± 30 ul 和 li 的东西。旁边的第二个面板是内容。没有额外的，我想要清楚，顶部没有导航栏，没有页脚等，只有两个元素，左右。

我需要：

就像这个简单的侧边栏一样，但没有使用所有不必要的代码、下拉菜单、供应商和 Bootstrap 需要数小时才能删除和清理的垃圾。

有没有一种简单的方法可以使用 html、css、jquery 甚至更好的一些 javascript 行来实现？我需要避免因引导无用代码而头疼，而且我对搜索的每个答案上的所有“开始时关闭”和“不可滚动”汉堡菜单都感到疯狂......！！！

感谢谁让我摆脱了这种疯狂，并提供了一个清晰而简单的解决方案。

标签： javascripthtmljquerycsssidebar

解决方案

试试这个：查看演示

没有 Bootstrap，没有 jQuery，没有供应商。它仅适用于 css 和 javascript。

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

索引.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>

样式.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;
    }


}

脚本.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";
    }
}

推荐阅读