→ 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

3.5k

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

asdad
asdad

Author:
Anonymous

4 months ago

776

v.5.3
Fitar's navbar
do not copy

Author:
Fitar Ahmed

3 months ago

823

v.4.6
My site Exm code

Author:
Zahid Hasan Riyad

3 weeks ago

118

v.5.3
Portfolio Full Website

Author:
Zahid Hasan Riyad

3 weeks ago

163

v.5.3
main html and js section keep nav and footer
do not copy

Author:
Fitar Ahmed

3 months ago

288

v.4.6
service

Author:
lamiajahan

3 weeks ago

105

v.4.6
E-Commerce Contact Section

Author:
Creative Araf

1 month ago

173

v.5.3
E-Commarce

Author:
Anonymous

2 weeks ago

109

v.5.3
page Title
goribera toder jonno kosto kore bana lam nsda exam er jonno

Author:
Ad Apon7

3 months ago

1.1k

v.5.3
E-Commerce Product Detail Page

Author:
Creative Araf

1 month ago

248

v.5.3
test nav tabs

Author:
sharp.jkm

1 week ago

84

v.5.3
vulgh

Author:
Anonymous

2 weeks ago

84

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent