added menu designed toggle
This commit is contained in:
44
footer.php
44
footer.php
@@ -76,11 +76,55 @@
|
||||
<script src="lib/waypoints/waypoints.min.js"></script>
|
||||
<script src="lib/counterup/counterup.min.js"></script>
|
||||
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Template Javascript -->
|
||||
<script src="js/main.js"></script>
|
||||
<script src="bib-toaster/toaster.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const navbarToggler = document.querySelector('.navbar-toggler');
|
||||
const navbarCollapse = document.getElementById('navbarSupportedContent');
|
||||
|
||||
if (!navbarToggler || !navbarCollapse) return;
|
||||
|
||||
// Remove Bootstrap attributes
|
||||
navbarToggler.removeAttribute('data-bs-toggle');
|
||||
navbarToggler.removeAttribute('data-bs-target');
|
||||
|
||||
// Only handle the main menu toggle
|
||||
navbarToggler.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
navbarCollapse.classList.toggle('show');
|
||||
this.setAttribute('aria-expanded', navbarCollapse.classList.contains('show').toString());
|
||||
});
|
||||
|
||||
// Don't close menu when clicking on dropdown elements
|
||||
document.addEventListener('click', function(e) {
|
||||
if (window.innerWidth > 991) return;
|
||||
|
||||
const isClickOnDropdown = e.target.closest('.dropdown-menu') || e.target.closest('.dropdown-toggle');
|
||||
const isClickOnToggler = e.target.closest('.navbar-toggler');
|
||||
const isClickInsideNavbar = e.target.closest('.navbar');
|
||||
|
||||
if (isClickOnDropdown) return; // Don't close if clicking dropdown
|
||||
|
||||
if (!isClickInsideNavbar && !isClickOnToggler && navbarCollapse.classList.contains('show')) {
|
||||
navbarCollapse.classList.remove('show');
|
||||
navbarToggler.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
165
header.php
165
header.php
@@ -29,10 +29,12 @@
|
||||
|
||||
<!-- Customized Bootstrap Stylesheet -->
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> -->
|
||||
|
||||
<!-- Template Stylesheet -->
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
<link href="bib-toaster/toaster.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -147,71 +149,108 @@
|
||||
|
||||
<!-- Navbar & Hero Start -->
|
||||
<div class="container nav-bar p-0">
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-white px-4 px-lg-5 py-3 py-lg-0">
|
||||
<a href="index.php" class="navbar-brand p-0">
|
||||
<h1 class="display-5 text-secondary m-0"><img src="img/Orient.png" class="img-fluid" alt=""></h1>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
|
||||
<span class="fa fa-bars"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<div class="navbar-nav ms-auto py-0" style="border: none;">
|
||||
<div class="nav-item dropdown">
|
||||
<a href="aboutus.php" class="nav-link" data-bs-toggle="dropdown"><span class="dropdown-toggle">About
|
||||
Us</span></a>
|
||||
<div class="dropdown-menu m-0">
|
||||
<a href="aboutus.php" class="dropdown-item">Company Profile</a>
|
||||
<a href="messagefrommd.php" class="dropdown-item">Message from MD</a>
|
||||
<!--<a href="aboutus.php#network" class="dropdown-item">Our Network</a>-->
|
||||
</div>
|
||||
</div>
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-white px-4 px-lg-5 py-3 py-lg-0">
|
||||
<a href="index.php" class="navbar-brand p-0">
|
||||
<h1 class="display-5 text-secondary m-0"><img src="img/Orient.png" class="img-fluid" alt=""></h1>
|
||||
</a>
|
||||
|
||||
<!-- Corrected toggler button -->
|
||||
<button class="navbar-toggler" type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation">
|
||||
<span class="fa fa-bars"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav ms-auto py-0">
|
||||
|
||||
<!-- About Us Dropdown -->
|
||||
<li class="nav-item dropdown">
|
||||
<a href="aboutus.php" class="nav-link dropdown-toggle"
|
||||
role="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
About Us
|
||||
</a>
|
||||
<div class="dropdown-menu m-0" aria-labelledby="aboutDropdown">
|
||||
<a href="aboutus.php" class="dropdown-item">Company Profile</a>
|
||||
<a href="messagefrommd.php" class="dropdown-item">Message from MD</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<div class="nav-item dropdown">
|
||||
<a href="#" class="nav-link" data-bs-toggle="dropdown"><span
|
||||
class="dropdown-toggle">Destination</span></a>
|
||||
<div class="dropdown-menu m-0">
|
||||
<a href="australia.php" class="dropdown-item">Australia</a>
|
||||
<a href="canada.php" class="dropdown-item">Canada</a>
|
||||
<a href="uk.php" class="dropdown-item">Uk</a>
|
||||
<a href="usa.php" class="dropdown-item">USA</a>
|
||||
<a href="newzealand.php" class="dropdown-item">New Zealand</a>
|
||||
<a href="korea.php" class="dropdown-item">South Korea</a>
|
||||
<a href="japan.php" class="dropdown-item">Japan</a>
|
||||
<a href="vietnam.php" class="dropdown-item">Vietnam</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-item dropdown">
|
||||
<a href="#" class="nav-link" data-bs-toggle="dropdown"><span
|
||||
class="dropdown-toggle">Test Preparation</span></a>
|
||||
<div class="dropdown-menu m-0">
|
||||
<a href="ielts.php" class="dropdown-item">IELTS</a>
|
||||
<a href="pte.php" class="dropdown-item">PTE</a>
|
||||
<a href="toefl.php" class="dropdown-item">TOEFL</a>
|
||||
<a href="gre.php" class="dropdown-item">GRE</a>
|
||||
<a href="gmat.php" class="dropdown-item">GMAT</a>
|
||||
<a href="sat.php" class="dropdown-item">SAT</a>
|
||||
<a href="japanese.php" class="dropdown-item">Japanese</a>
|
||||
<a href="korean.php" class="dropdown-item">Korean</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="services.php" class="nav-item nav-link">Services</a>
|
||||
<div class="nav-item dropdown">
|
||||
<a href="#" class="nav-link" data-bs-toggle="dropdown"><span
|
||||
class="dropdown-toggle">Resources</span></a>
|
||||
<div class="dropdown-menu m-0">
|
||||
<a href="essentials.php" class="dropdown-item">Essential Resources</a>
|
||||
<a href="sample-documents.php" class="dropdown-item">Sample Documents</a>
|
||||
<a href="embassy.php" class="dropdown-item">Embassy Addresses</a>
|
||||
<a href="visa-information.php" class="dropdown-item">Visa Information</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<a href="blog.php" class="nav-item nav-link">Blog</a>
|
||||
<!-- Destination Dropdown -->
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link dropdown-toggle"
|
||||
role="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
Destination
|
||||
</a>
|
||||
<div class="dropdown-menu m-0">
|
||||
<a href="australia.php" class="dropdown-item">Australia</a>
|
||||
<a href="canada.php" class="dropdown-item">Canada</a>
|
||||
<a href="uk.php" class="dropdown-item">UK</a>
|
||||
<a href="usa.php" class="dropdown-item">USA</a>
|
||||
<a href="newzealand.php" class="dropdown-item">New Zealand</a>
|
||||
<a href="korea.php" class="dropdown-item">South Korea</a>
|
||||
<a href="japan.php" class="dropdown-item">Japan</a>
|
||||
<a href="vietnam.php" class="dropdown-item">Vietnam</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<a href="contact.php" class="nav-item nav-link">Contact Us</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Test Preparation Dropdown -->
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link dropdown-toggle"
|
||||
role="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
Test Preparation
|
||||
</a>
|
||||
<div class="dropdown-menu m-0">
|
||||
<a href="ielts.php" class="dropdown-item">IELTS</a>
|
||||
<a href="pte.php" class="dropdown-item">PTE</a>
|
||||
<a href="toefl.php" class="dropdown-item">TOEFL</a>
|
||||
<a href="gre.php" class="dropdown-item">GRE</a>
|
||||
<a href="gmat.php" class="dropdown-item">GMAT</a>
|
||||
<a href="sat.php" class="dropdown-item">SAT</a>
|
||||
<a href="japanese.php" class="dropdown-item">Japanese</a>
|
||||
<a href="korean.php" class="dropdown-item">Korean</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a href="services.php" class="nav-link">Services</a>
|
||||
</li>
|
||||
|
||||
<!-- Resources Dropdown -->
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link dropdown-toggle"
|
||||
role="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
Resources
|
||||
</a>
|
||||
<div class="dropdown-menu m-0">
|
||||
<a href="essentials.php" class="dropdown-item">Essential Resources</a>
|
||||
<a href="sample-documents.php" class="dropdown-item">Sample Documents</a>
|
||||
<a href="embassy.php" class="dropdown-item">Embassy Addresses</a>
|
||||
<a href="visa-information.php" class="dropdown-item">Visa Information</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a href="blog.php" class="nav-link">Blog</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a href="contact.php" class="nav-link">Contact Us</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- Navbar & Hero End -->
|
||||
|
||||
|
||||
32
index.html
Normal file
32
index.html
Normal file
@@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarTest"
|
||||
aria-controls="navbarTest"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarTest">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Home</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user