HTML CSS AND JAVASCRIPT CODE FOR NAVIGATION BAR

Posted on by admin
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Enhanced Sidebar Navigation</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        /* General body styling */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            height: 100vh;
            background-color: #f4f4f4;
            transition: background-color 0.3s ease;
        }

        /* Sidebar styling */
        .navbar {
            display: flex;
            flex-direction: column;
            position: fixed;
            right: -300px; /* Initially hidden */
            top: 0;
            height: 100%;
            width: 300px;
            background-color: #2C3E50;
            border-radius: 0 0 10px 0;
            padding: 20px;
            box-shadow: -4px 0 10px rgba(0, 0, 0, 0.5);
            transition: right 0.3s ease;
            z-index: 1000;
            overflow-y: auto; /* Scrollable if content overflows */
        }

        /* Profile section in the sidebar */
        .profile {
            text-align: center;
            margin-bottom: 20px;
            color: white;
        }

        .profile img {
            border-radius: 50%;
            width: 80px;
            height: 80px;
            margin-bottom: 10px;
            border: 3px solid #2980B9; /* Border for profile image */
        }

        /* Navbar link styling */
        .navbar a {
            text-decoration: none;
            color: white;
            text-align: left;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            border-radius: 8px;
            margin-bottom: 10px;
            transition: background 0.3s, transform 0.2s;
            font-size: 16px; /* Increased font size */
        }

        .navbar a:hover {
            background-color: #34495E;
            transform: translateX(5px);
        }

        /* Active link styling */
        .navbar a.active {
            background-color: #2980B9;
        }

        /* Icon styling */
        .navbar i {
            font-size: 20px;
            margin-right: 15px;
        }

        /* Section styling */
        section {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            font-weight: bold;
            padding: 40px;
            transition: background-color 0.3s;
            border-radius: 10px; /* Rounded corners for sections */
        }

        #home { background-color: #ffdddd; }
        #services { background-color: #ddffdd; }
        #about { background-color: #ddddff; }
        #contact { background-color: #ffe5b4; }
        #faq { background-color: #d0e0f0; }
        #testimonials { background-color: #f0e0d0; }
        #blog { background-color: #e0f0d0; }

        /* Content cards styling */
        .card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s, box-shadow 0.3s;
            margin: 20px;
            width: 300px;
            text-align: center;
        }

        .card img {
            border-radius: 10px;
            width: 100%;
            height: auto; /* Responsive image */
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
        }

        /* Button styling */
        .toggle-button, .theme-toggle, .back-to-top {
            position: fixed;
            background-color: #2980B9;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 10px 15px;
            cursor: pointer;
            z-index: 1001;
            transition: background-color 0.3s, transform 0.3s;
        }

        .toggle-button:hover, .theme-toggle:hover, .back-to-top:hover {
            background-color: #1A5276;
            transform: scale(1.05); /* Slight scale effect on hover */
        }

        .toggle-button {
            top: 20px;
            right: 20px;
        }

        .theme-toggle {
            top: 70px;
            right: 20px;
        }

        .back-to-top {
            bottom: 20px;
            right: 20px;
            display: none; /* Initially hidden */
        }

        /* Footer styling */
        footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #2C3E50;
            color: white;
            text-align: center;
            padding: 10px;
            font-size: 14px;
            z-index: 1000;
        }

        /* Search bar styling */
        .search-bar {
            margin: 20px 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .search-bar input {
            padding: 10px;
            border: none;
            border-radius: 5px;
            width: 70%;
            transition: width 0.3s ease;
        }

        .search-bar input:focus {
            width: 90%;
            outline: none;
            box-shadow: 0 0 5px #2980B9;
        }

        /* Custom scrollbar */
        .navbar::-webkit-scrollbar {
            width: 8px;
        }

        .navbar::-webkit-scrollbar-thumb {
            background-color: #2980B9;
            border-radius: 10px;
        }

        .navbar::-webkit-scrollbar-thumb:hover {
            background-color: #1A5276;
        }

        /* Responsive styles */
        @media (max-width: 768px) {
            .navbar {
                width: 250px; /* Adjust width on smaller screens */
            }

            /* Make sidebar collapsible */
            .navbar {
                position: absolute;
                right: -250px; /* Hide off-screen */
            }

            .navbar.open {
                right: 0; /* Show sidebar */
            }

            /* Card styling adjustments */
            .card {
                width: 90%; /* Full width on smaller screens */
                margin: 10px; /* Less margin */
            }
        }
    </style>
</head>
<body>

    <!-- Profile Area -->
    <div class="navbar" id="navbar" role="navigation" aria-label="Main Navigation">
        <div class="profile">
            <img src="https://via.placeholder.com/80" alt="Profile Picture">
            <h4>User Name</h4>
            <p>User Role</p>
        </div>
        <div class="search-bar">
            <input type="text" id="search" placeholder="Search..." aria-label="Search">
        </div>
        <a href="#home" onclick="navigateTo('home')" class="nav-link" aria-label="Navigate to Home">
            <i class="fas fa-home"></i> Home
        </a>
        <a href="#services" onclick="navigateTo('services')" class="nav-link" aria-label="Navigate to Services">
            <i class="fas fa-concierge-bell"></i> Services
        </a>
        <a href="#about" onclick="navigateTo('about')" class="nav-link" aria-label="Navigate to About Us">
            <i class="fas fa-info-circle"></i> About Us
        </a>
        <a href="#contact" onclick="navigateTo('contact')" class="nav-link" aria-label="Navigate to Contact">
            <i class="fas fa-envelope"></i> Contact
        </a>
        <a href="#faq" onclick="navigateTo('faq')" class="nav-link" aria-label="Navigate to FAQ">
            <i class="fas fa-question-circle"></i> FAQ
        </a>
        <a href="#testimonials" onclick="navigateTo('testimonials')" class="nav-link" aria-label="Navigate to Testimonials">
            <i class="fas fa-star"></i> Testimonials
        </a>
        <a href="#blog" onclick="navigateTo('blog')" class="nav-link" aria-label="Navigate to Blog">
            <i class="fas fa-blog"></i> Blog
        </a>
    </div>

    <!-- Main Content Area -->
    <div class="main-content">
        <button class="toggle-button" onclick="toggleNavbar()">☰ Menu</button>
        <button class="theme-toggle" onclick="toggleTheme()">Toggle Theme</button>
        <button class="back-to-top" onclick="scrollToTop()">↑ Back to Top</button>

        <section id="home">
            <h1>Home Section</h1>
            <p>Welcome to our modern sidebar navigation system.</p>
        </section>
        <section id="services">
            <h1>Services Section</h1>
            <div class="card">
                <img src="https://via.placeholder.com/150" alt="Service Image">
                <h3>Our Services</h3>
                <p>Learn more about what we offer.</p>
            </div>
        </section>
        <section id="about">
            <h1>About Us Section</h1>
            <div class="card">
                <img src="https://via.placeholder.com/150" alt="About Image">
                <h3>About Us</h3>
                <p>Learn more about our mission and vision.</p>
            </div>
        </section>
        <section id="contact">
            <h1>Contact Us Section</h1>
            <div class="card">
                <img src="https://via.placeholder.com/150" alt="Contact Image">
                <h3>Contact Us</h3>
                <p>Get in touch with us.</p>
            </div>
            <form id="contact-form">
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required>
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>
                <label for="message">Message:</label>
                <textarea id="message" name="message" required></textarea>
                <button type="submit">Send Message</button>
            </form>
        </section>
        <section id="faq">
            <h1>FAQ Section</h1>
            <p>Frequently Asked Questions</p>
            <div class="card">
                <h3>Question 1</h3>
                <p>Answer to question 1...</p>
            </div>
            <div class="card">
                <h3>Question 2</h3>
                <p>Answer to question 2...</p>
            </div>
        </section>
        <section id="testimonials">
            <h1>Testimonials Section</h1>
            <div class="card">
                <h3>Customer Testimonial</h3>
                <p>"Great service! Highly recommended."</p>
            </div>
            <div class="card">
                <h3>Another Testimonial</h3>
                <p>"Fantastic experience from start to finish!"</p>
            </div>
        </section>
        <section id="blog">
            <h1>Blog Section</h1>
            <div class="card">
                <h3>Blog Post Title</h3>
                <p>Summary of the blog post...</p>
            </div>
            <div class="card">
                <h3>Another Blog Post Title</h3>
                <p>Summary of another blog post...</p>
            </div>
        </section>
    </div>

    <!-- Footer -->
    <footer>
        © 2024 Modern Enhanced Sidebar Navigation. All rights reserved.
    </footer>

    <script>
        // Function to toggle the sidebar
        function toggleNavbar() {
            const navbar = document.getElementById('navbar');
            navbar.classList.toggle('open'); // Toggle the 'open' class
        }

        // Function to toggle between dark and light themes
        function toggleTheme() {
            const body = document.body;
            body.classList.toggle('dark-mode');
            body.style.backgroundColor = body.classList.contains('dark-mode') ? '#333' : '#f4f4f4';
            body.style.color = body.classList.contains('dark-mode') ? 'white' : 'black';
        }

        // Function to scroll to the top of the page
        function scrollToTop() {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }

        // Function to set active link and handle navigation
        function navigateTo(section) {
            const navbarLinks = document.querySelectorAll('.nav-link');
            navbarLinks.forEach(link => link.classList.remove('active'));
            const activeLink = Array.from(navbarLinks).find(link => link.href.includes(section));
            if (activeLink) activeLink.classList.add('active');

            // Smooth scroll to the section
            const targetSection = document.getElementById(section);
            targetSection.scrollIntoView({ behavior: 'smooth' });

            // Show back to top button when scrolled down
            document.querySelector('.back-to-top').style.display = 'block';
        }

        // Show/hide back to top button based on scroll position
        window.onscroll = function() {
            const backToTopButton = document.querySelector('.back-to-top');
            if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
                backToTopButton.style.display = 'block';
            } else {
                backToTopButton.style.display = 'none';
            }
        };

        // Contact form submission
        document.getElementById('contact-form').addEventListener('submit', function(e) {
            e.preventDefault(); // Prevent default form submission
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const message = document.getElementById('message').value;

            // Simulate sending message
            alert(`Message sent from ${name} (${email}): "${message}"`);
            this.reset(); // Reset the form after submission
        });
    </script>
</body>
</html>
JavaScript

Leave a Reply

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


error: Content is protected !!
Scroll to Top
MacroNepal
Verified by MonsterInsights