→ zobaidul kaziex
→ HTML, CSS, and JavaScript for Multi-laye...

HTML, CSS, and JavaScript for Multi-layer Dropdown Header

HTML:
Added dropdown-submenu class to handle nested dropdowns.

CSS:
Dropdown Submenu: Positioned to the right of the parent dropdown.

JavaScript:
Event Listeners: Added to show and hide nested dropdowns on mouse enter and leave.

How to Use:

Create an header.html file and paste the updated code into it.
Include Bootstrap and Font Awesome if needed for styling and icons.

This bootstrap css example is contributed by zobaidul kaziex, on 05-Sep-2024. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Header

Author zobaidul kaziex

720

v.4.6

Fork Fullscreen

<nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container">
            <a class="navbar-brand" href="#">YourBrand</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Services
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <li><a class="dropdown-item" href="#">Service 1</a></li>
                            <li><a class="dropdown-item" href="#">Service 2</a></li>
                            <li class="dropdown-submenu">
                                <a class="dropdown-item dropdown-toggle" href="#">More Services</a>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#">Sub Service 1</a></li>
                                    <li><a class="dropdown-item" href="#">Sub Service 2</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            About Us
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown2">
                            <li><a class="dropdown-item" href="#">Our Team</a></li>
                            <li><a class="dropdown-item" href="#">Our History</a></li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    </nav>

More Examples

Rotating Navigation Animation
Rotating Navigation Animation

Author:
Rami AlAjo

1 month ago

618

v.4.6
Hidden Search Widget
Hidden Search Widget

Author:
Rami AlAjo

1 month ago

375

v.4.6
Error page template
Modern and clean 404-page template made with Bootstrap

Author:
Anonymous

3 months ago

2.9k

v.5.3
User Profile Card with Bootstrap 5

Author:
Anonymous

2 months ago

768

v.5.3
Glowing Card
glowing effect and smooth hover animation

Author:
Prajwal Hallale

1 year ago

1.2k

v.5.3
Stats cards using Bootstrap 5
BS5 stat cards

Author:
Anonymous

9 months ago

5.2k

v.5.3
Error Page, you can use HTML, CSS, and Bootstrap.
HTML: Error Title: A large, bold number (e.g., 404) to indicate the error type. Error Message: A brief message explaining the error. Button: A button to navigate back to the home page. Adjust the href attribute to point to your actual home page URL. CSS: Background Gradient: Applied to the body to give a stylish look. Error Container: Centered on the page with a semi-transparent background for contrast. Button Styling: Custom colors for the button, including hover effects.

Author:
zobaidul kaziex

7 months ago

915

v.4.6
Responsive Admin Dashboard Component

Author:
Isaac Winslow

5 months ago

864

v.5.3
Product Card
A product card layout for an e-commerce website with an image at the top

Author:
Juan Martinez

9 months ago

5.7k

v.5.3
Call-to-Action Example
Call-to-Action section with bootstrap 5

Author:
Omar Khaled

8 months ago

680

v.5.3
Image slider
Image slider with auto-scrolling and with title and description

Author:
Anonymous

7 months ago

1.7k

v.5.3
Bootstrap 5.3 Testimonial Card Component

Author:
Levi Treadwell

4 months ago

366

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent