Solution 1 :

Try this: See Demo

No Bootstrap, No jQuery, No vendor. It’s only with css and javascript.

  1. 1st panel will be scrollable when it will have enough element.
  2. 1st stays on desktop view.
  3. 1st panel is hidden on mobile default view. And a toggle button will be shown.
  4. When the toggle button will be clicked the 1st panel will be shown.

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";
    }
}

Problem :

Ok I have a very light and clear code for a 2 panels extra light website project.

1st panel on the left is a huge Nav (top to bottom, wiki style, 270px width) with ± 30 ul and li stuff.
2nd panel next to it is the content.
No extra, I want it clear, no navbar on top, no footer etc, just two elements, left & right.

I need:

  • 1st panel should be scrollable independently from the 2nd.
  • 1st panel appears and stays open at startup on computer display.
  • 1st panel appears closed on mobile display.
  • A toggle appears to open it.
  • Push content or overlay doesn’t matter.

Like this Simple Sidebar but without using all the unnecessary code, dropdowns, vendors and shit of Bootstrap that takes hours and hours to remove and clean.

Is there a simple way to do it with html, css, jquery, or even better, some lines of javascript ?
I need to avoid headaches with bootstrap useless codes, and I’m driving crazy with all the “closed at start” and “non-scrollable” burger menus on every answers to my searches…!!!

Thanks to whoever gets me out of this crazyness, with a clear and simple solution.

Comments

Comment posted by Motahar Hossain

Please check my answer. I have created it for you.

Comment posted by aalleexx

Thank you a lot, It was very helpful !

By

Leave a Reply

Your email address will not be published. Required fields are marked *