Struggling to locate a straightforward sidebar solution without relying on Bootstrap. Finding an easy-to-use answer seems

Question

Struggling to locate a straightforward sidebar solution without relying on Bootstrap. Finding an easy-to-use answer seems

I have a lightweight and easy-to-understand code for a website project with two panels.

The first panel on the left is a large navigation (270px width, top to bottom, similar to a wiki) with approximately 30 unordered list items. Next to it is the second panel which contains the content. I want it to be simple - just two elements, left & right, with no extra features like a navbar at the top or footer.

Here's what I need:

The first panel should have its own scroll bar independent from the second panel.
On a computer display, the first panel should appear and stay open by default.
On a mobile display, the first panel should appear closed initially.
A toggle button should allow users to open the first panel when needed.
Whether the content pushes aside or overlays doesn't matter.

I'm looking for a solution similar to the Simple Sidebar demo (linked here), but without all the excess code, dropdowns, vendors, and unnecessary Bootstrap components that are tedious to remove.

Is there a straightforward way to achieve this using HTML, CSS, jQuery, or even better, just a few lines of JavaScript? I want to avoid dealing with bloated Bootstrap code and frustrating menu configurations that seem to dominate search results...

Thank you to anyone who can provide a clear and simple resolution to this issue and help me escape this madness!

javascript html jquery css sidebar

Answer 1

Answer №1

Check out this demo: See Demo

No Bootstrap, No jQuery, No vendor dependencies. This solution utilizes only CSS and JavaScript.

The 1st panel will become scrollable when it contains enough elements.
The 1st panel remains visible in desktop view.
The 1st panel is initially hidden in the default mobile view. A toggle button will appear to reveal it.
Clicking on the toggle button will display the 1st panel.

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>
        ... (Content of right pane)
    </div>
    <script src="./script.js"></script>

</body>

</html>

style.css

(CSS styles)

script.js

// Right Pane Active/Hide Content
function openPage(evt, pageName) {
    (JavaScript function code for handling content visibility)
}

// Left Pane Active/Hide Nav on Mobile
function showNav() {
    (JavaScript function code for toggling left panel visibility)
}

Answer 2

Check out this demo: See Demo

No Bootstrap, No jQuery, No vendor dependencies. This solution utilizes only CSS and JavaScript.

The 1st panel will become scrollable when it contains enough elements.
The 1st panel remains visible in desktop view.
The 1st panel is initially hidden in the default mobile view. A toggle button will appear to reveal it.
Clicking on the toggle button will display the 1st panel.

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>
        ... (Content of right pane)
    </div>
    <script src="./script.js"></script>

</body>

</html>

style.css

(CSS styles)

script.js

// Right Pane Active/Hide Content
function openPage(evt, pageName) {
    (JavaScript function code for handling content visibility)
}

// Left Pane Active/Hide Nav on Mobile
function showNav() {
    (JavaScript function code for toggling left panel visibility)
}

Struggling to locate a straightforward sidebar solution without relying on Bootstrap. Finding an easy-to-use answer seems

Answer №1

Similar questions

Incorporate a Background Image, which is linked to a website URL, by utilizing an external CSS file within

Is it possible to simultaneously verify if an array is empty within an Object along with checking the other fields?

AngularJS $http get isn't functioning properly, but surprisingly $.ajax works perfectly

Setting up a connection to MongoDB on a local network using express and mongoose

Error 404 encountered while attempting to download a file through the <iframe> and AJAX method

The post request is successful in Postman and cURL, however, it faces issues when executed in Angular

Achieving 10 touchdowns within a set of 5 plays during a football game

Most efficient method for dynamically changing HTML content with JavaScript

What are the implications of declaring a controller as a variable within itself or utilizing $scope?

Issue with Bootstrap JQUERY Plugin in External Modal

JavaScript: Struggles with utilizing a function as an argument and later executing it inside a nested function

What is causing the duplication of Google Map drawing controls?

Navigating across various iFrames with the help of XPath and C#

Which framework should be used: client-side or server-side?

The Material UI appbar fails to resize properly on mobile devices

Homepage experiencing issues with Jquery slider functionality

What are the consequences of submitting a form to a different website through POST method?

Using Buttons to Filter Data in React

Performing an AJAX request using jQuery without specifying the method name in the URL

Firefox is unable to display SWF files