→ 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.4k

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

navbar white simple #1

Author:
java stories story

11 months ago

3.5k

v.5.3
cllient review
do not copy

Author:
Fitar Ahmed

1 month ago

728

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

Author:
Ad Apon7

2 months ago

846

v.5.3
Liberation war Archive WDD

Author:
Anonymous

3 weeks ago

131

v.4.6
E-commarce Product-page

Author:
Zahid Hasan Riyad

1 week ago

62

v.5.3
Rotating Navigation Animation
Rotating Navigation Animation

Author:
Rami AlAjo

1 year ago

2.4k

v.4.6
Home Page of portfolio (WDD)

Author:
sajid taz

3 weeks ago

373

v.4.6
E-Commerce Checkout Section

Author:
Creative Araf

1 week ago

64

v.5.3
Personal Portfolio Index

Author:
Creative Araf

1 week ago

37

v.5.3
E-commarce Contact-Page

Author:
Zahid Hasan Riyad

1 week ago

37

v.5.3
page title section
do not copy

Author:
Fitar Ahmed

1 month ago

204

v.4.6
E-Commerce Product Page

Author:
Creative Araf

1 week ago

76

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent