→ 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

124

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

Pill Buttons

Author:
Prajwal Hallale

7 months ago

244

v.4.6
Pricing Cards
Three pricing tiers (Basic, Pro, and Enterprise) using Bootstrap's card component.

Author:
Sofia Petrova

3 months ago

214

v.5.3
Bootstrap 5 Image Gallery

Author:
Anonymous

3 months ago

337

v.5.3
Bootstrap tabs
tab navigation

Author:
Anonymous

7 months ago

236

v.5.3
Card w/ gradient background
A modern and visually appealing card component with a gradient background and hover effect.

Author:
Prajwal Hallale

7 months ago

378

v.5.3
Bootstrap copyright footer

Author:
Anonymous

3 months ago

250

v.5.3
Custom buttons

Author:
Anonymous

7 months ago

382

v.5.3
Coming Soon Page
Coming Soon Landing page

Author:
Juan Martinez

3 months ago

185

v.5.3
Gradient Footer Component
A modern, responsive footer component with a smooth gradient background, social icons, quick links, and newsletter subscription - perfect for contemporary web applications.

Author:
Alaric Sloane

1 week ago

45

v.5.3
Pricing cards

Author:
Kemaya m

7 months ago

363

v.4.6
Gradient Hero Section
A visually stunning hero section with a gradient background and a call-to-action button.

Author:
Prajwal Hallale

7 months ago

247

v.5.3
Beautiful Stats Section
App stats section with icons. with hover effect

Author:
Riz Mohammad

3 months ago

265

v.5.3

Didn't find component you were looking for?

Search from 200+ componenent