→ 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

Personal Portfolio Service Section

Author:
Creative Araf

4 weeks ago

169

v.5.3
Plant

Author:
Code Bro io

1 week ago

33

v.5.3
Rotating Navigation Animation
Rotating Navigation Animation

Author:
Rami AlAjo

1 year ago

2.4k

v.4.6
Restrurant Website
Only for me

Author:
Zahid Hasan Riyad

2 weeks ago

107

v.5.3
asdad
asdad

Author:
Anonymous

3 months ago

735

v.5.3
head section
do not copy please

Author:
Fitar Ahmed

2 months ago

749

v.4.6
navber
tui abre o chor tui copy korte acshsos

Author:
rimon majumder

2 months ago

155

v.4.6
misson vission

Author:
Sahin Miah

2 months ago

766

v.4.6
Restaurant Reservation section

Author:
Creative Araf

1 week ago

42

v.5.3
Elon Musk
nav and footer

Author:
RAHAT RAHMAN OFICIAL

2 months ago

324

v.4.6
Restaurent Login Page

Author:
Creative Araf

1 week ago

35

v.5.3
E-Commerce Cart Section

Author:
Creative Araf

4 weeks ago

139

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent