Creating a Scrollable Section Navigation in HTML and CSS

#abotwrotethis

Creating a Scrollable Section Navigation in HTML and CSS

When designing a webpage with multiple sections of content, it's essential to provide a seamless user experience for navigating through these sections. One effective way to achieve this is by implementing a scrollable section navigation. In this article, we'll guide you through creating a simple scrollable section navigation using HTML, CSS, and a sprinkle of JavaScript.

See Example :- https://shades-nu.vercel.app/community/

Setting Up the Structure

Let's start by setting up the basic structure of our webpage. We'll have a navigation bar at the top with clickable links for each section, and below that, the corresponding sections of content.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scrollable Section Navigation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="nav">
        <ul>
            <li><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
            <li><a href="#section3">Section 3</a></li>
        </ul>
    </nav>

    <main>
        <section id="section1" class="section">
            <h2>Section 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </section>
        <section id="section2" class="section">
            <h2>Section 2</h2>
            <p>Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        </section>
        <section id="section3" class="section">
            <h2>Section 3</h2>
            <p>Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</p>
        </section>
    </main>

    <script src="script.js"></script>
</body>
</html>

CSS Styles (styles.css)

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.nav {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
}

.nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.nav ul li {
    display: inline-block;
    margin-right: 20px;
}

.nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
}

.nav ul li a:hover {
    background-color: #555;
}

.main {
    padding: 20px;
}

.section {
    padding: 20px;
    margin: 20px;
    background-color: #f9f9f9;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

Adding Functionality with JavaScript (script.js)

To make our navigation interactive, we'll use JavaScript to handle smooth scrolling when clicking on the navigation links.

document.addEventListener("DOMContentLoaded", function() {
    const links = document.querySelectorAll('.nav a');

    links.forEach(link => {
        link.addEventListener('click', clickHandler);
    });

    function clickHandler(e) {
        e.preventDefault();
        const href = this.getAttribute("href");
        const offsetTop = document.querySelector(href).offsetTop;

        scroll({
            top: offsetTop,
            behavior: "smooth"
        });
    }
});

How It Works

HTML Structure: We have a simple HTML structure with a navigation bar (<nav>) containing a list of links (<ul> and <li>). Each link corresponds to a section (<section>) in the main content area.
CSS Styling: The CSS styles (defined in styles.css) provide basic styling for the navigation bar, links, sections, and overall layout. We use colors, padding, margins, and box-shadow to enhance the visual appearance.
JavaScript Interaction: When the page loads, the JavaScript (in script.js) waits for the DOM content to be fully loaded (DOMContentLoaded event). It then selects all the navigation links and adds a click event listener to each link.

When a navigation link is clicked (clickHandler function), it prevents the default link behavior (e.preventDefault()).
The script then retrieves the target section's ID from the href attribute of the clicked link.
It calculates the offsetTop position of the target section relative to the top of the document.
Finally, it smoothly scrolls to the target section using the scroll method with behavior: "smooth".

Conclusion

With this scrollable section navigation, users can easily navigate between different sections of content on your webpage. The smooth scrolling effect enhances the user experience, making it more pleasant and engaging to explore the content. Customize the styles and content to fit your design needs, and feel free to expand upon this concept to create even more interactive and user-friendly web experiences!

DEV Community

Creating a Scrollable Section Navigation in HTML and CSS