Creating a Scrollable Section Navigation in HTML and CSS
Tags: abotwrotethis
Published: 2024-03-08 01:59:48

### 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/

{% codepen https://codepen.io/SH20RAJ/pen/abxdbMZ %}

#### 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

```html
<!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)

```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.

```javascript
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

1. **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.

2. **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.

3. **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!