Site icon Jahid Shah

Change Content Nav on Click Using CSS

Jahid Shah
Change Content Nav on Click Using CSS

Change Content Nav on Click Using CSS

Navigating through a website should be a smooth and engaging experience. One way to enhance user interaction is by changing the content displayed when a navigation item is clicked. This can be achieved using CSS and a bit of JavaScript and also can be achieved just using CSS. In this article, we’ll explore how to create a dynamic navigation system that changes content on click. There are 2 examples, in the first example we will explore “change content nav on click using CSS and JavaScript” and the Second example will just use CSS.

Understanding the Basics

Before diving into the code, let’s understand what we aim to achieve. Imagine a website with a navigation menu. The content area updates to show relevant information without reloading the page when you click on a menu item. This technique is commonly used in single-page applications (SPAs) to provide a seamless user experience.

i. Example of Change Content Nav on Click Using CSS & JavaScript

In this example, we use CSS and JavaScript.

Change Content Nav on Click Using CSS

1. Setting Up the HTML Structure

First, we need a simple HTML structure. We’ll create a navigation menu and a content area where the content will change based on the clicked navigation item.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Navigation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="#" data-content="home">Home</a></li>
            <li><a href="#" data-content="about">About</a></li>
            <li><a href="#" data-content="services">Services</a></li>
            <li><a href="#" data-content="contact">Contact</a></li>
        </ul>
    </nav>
    <div id="content">
        <p>Welcome to our website! Click on the navigation items to see more content.</p>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. Styling with CSS

Next, we’ll add some basic CSS to style our navigation menu and content area. This will make our page look neat and visually appealing.

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

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

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    display: block;
}

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

#content {
    padding: 20px;
    text-align: center;
}

3. Adding Interactivity with JavaScript

We will use JavaScript to make the content change dynamically. We’ll add an event listener to each navigation item that updates the content area when clicked.

document.addEventListener('DOMContentLoaded', function() {
    const navLinks = document.querySelectorAll('nav ul li a');
    const contentDiv = document.getElementById('content');

    navLinks.forEach(link => {
        link.addEventListener('click', function(event) {
            event.preventDefault();
            const content = this.getAttribute('data-content');
            updateContent(content);
        });
    });

    function updateContent(content) {
        let htmlContent = '';

        switch(content) {
            case 'home':
                htmlContent = '<p>Welcome to the Home page!</p>';
                break;
            case 'about':
                htmlContent = '<p>Learn more About us on this page.</p>';
                break;
            case 'services':
                htmlContent = '<p>Discover our Services here.</p>';
                break;
            case 'contact':
                htmlContent = '<p>Get in touch with us on the Contact page.</p>';
                break;
            default:
                htmlContent = '<p>Welcome to our website! Click on the navigation items to see more content.</p>';
        }

        contentDiv.innerHTML = htmlContent;
    }
});

How It Works

1. HTML Structure:

2. CSS Styling:

3. JavaScript Interactivity:

By following these steps, we create a dynamic navigation system that updates the content area based on the clicked navigation item, providing a seamless and engaging user experience.

ii. Example of Change Content Nav on Click Using CSS

In this example we just use HTML and CSS it is possible to change content navigation on click using only CSS:-

1. HTML Structure

First, let’s set up the HTML structure. We’ll use anchor links to navigate between different sections of content.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Navigation with CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
    <div id="content">
        <section id="home">
            <p>Welcome to the Home page!</p>
        </section>
        <section id="about">
            <p>Learn more About us on this page.</p>
        </section>
        <section id="services">
            <p>Discover our Services here.</p>
        </section>
        <section id="contact">
            <p>Get in touch with us on the Contact page.</p>
        </section>
    </div>
</body>
</html>

2. CSS Styling

Next, we’ll add CSS to style the navigation and content sections. We’ll use the :target pseudo-class to display the content based on the clicked link.

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

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

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    display: block;
}

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

#content section {
    display: none;
    padding: 20px;
    text-align: center;
}

#content section:target {
    display: block;
}

How It Works

1. HTML Structure:

2. CSS Styling:

By using the :target pseudo-class, we can create a dynamic navigation system that changes the displayed content based on the clicked link, all without using JavaScript. This method leverages CSS to provide a smooth and engaging user experience.

Benefits of Dynamic Navigation

Conclusion

Changing content navigation on click using CSS and JavaScript is a powerful technique to enhance user interaction on your website. By following the steps outlined in this article, you can create a dynamic and engaging navigation system that improves the overall user experience. Whether you’re building a personal blog, a business website, or a portfolio, this approach can make your site more interactive and user-friendly.

Exit mobile version