Skip to content

Commit

Permalink
Merge pull request #1587 from shriyadindi/new-nav1
Browse files Browse the repository at this point in the history 
feat: Resolved the issue of the hamburger #1582
  • Loading branch information
@apu52
apu52 authored Oct 29, 2024
2 parents 2b10686 + d0c8c87 commit 9b51929
Showing 1 changed file with 182 additions and 67 deletions.
249 changes: 182 additions & 67 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -528,82 +528,197 @@ <h1>TourGuide . . .</h1>
<canvas></canvas>
<canvas></canvas>
</div>


<!-- <div id="progressbar"></div> -->

<!-- <div id="scrollPath"></div> -->

<!-- <canvas id="canvas"></canvas> -->
<!-- <nav>
<a href="#" class="nav__logo" data-aos="fade-right">Tourguide<span>.</span></a>
<ul class="nav__links">
<li class="link" data-aos="fade-down"><a href="#Home">Home</a></li>
<li class="link" data-aos="fade-down"><a href="#AboutUs">About Us</a></li>
<li class="link" data-aos="fade-down"><a href="#Destinations">Destinations</a></li>
<li class="link" data-aos="fade-down"><a href="#trip">Pricing</a></li>
<li class="link" data-aos="fade-down"><a href="#testimonials">Testimonials</a></li>
<li class="link" data-aos="fade-down"><a href="#ReviewGallery">Reviews</a></li>
<li class="link" data-aos="fade-down"><a href="feedback.html">Rate Us?</a></li>
<li class="link" data-aos="fade-down"><a href="login.html">Login</a></li>
</ul>
<button id="toggle" data-aos="fade-down">Dark Theme</button>
<a href="#contact"><button class="btn" id="btn-style">Contact Us</button></a>
</nav> -->

<div class="nav-container" id="top">
<nav class="newNav">
<div style="display: flex; flex-direction: row; align-items: center;">
<img src="/favicon.ico" class="sitelogo">

<a href="#" class="nav__logo" data-aos="fade-right">Tourguide<span>.</span></a>
<nav class="newNav">
<div style="display: flex; align-items: center;">
<img src="/favicon.ico" class="sitelogo">
<a href="#" class="nav__logo" data-aos="fade-right">Tourguide<span>.</span></a>
</div>

<ul class="navLinks">
<li class="link" id="View-link" data-aos=""><a href="mapa.html">View</a></li>
<li class="link" id="LogIn-link" data-aos=""><a href="newLogin.html">Log In</a></li>
<li class="link" data-aos=""><a href="#Home">Home</a></li>
<li class="link" data-aos=""><a href="./about.html">About</a></li>
<li class="link dropdown" data-aos="">
<a href="#Services" class="dropdown">Services</a>
<ul class="dropdown-menu">
<li><a href="#Destinations">Destination</a></li>
<li><a href="#trip">Prices</a></li>
<li><a href="#ReviewGallery">Trip Gallery</a></li>
<li><a href="#tourist">Tourist Guide</a></li>
<li><a href="#hotel">Hotel & Resort</a></li>
</ul>
</li>
<li class="link" data-aos=""><a href="./topdeals/topdeals.html">Top Deals</a></li>
<li class="link" data-aos=""><a href="./packages.html">Packages</a></li>
<li class="link" data-aos=""><a href="#testimonials">Testimonial</a></li>
<li class="link" data-aos=""><a href="feedback.html">Rate Us?</a></li>
<li class="link" data-aos=""><a href="#cnt-form">Contact Us</a></li>
<li class="link" id="View-link" data-aos=""><a href="mapa.html">View</a></li>
<li class="link" id="LogIn-link" data-aos=""><a href="newLogin.html">Log In</a></li>
<li class="link" data-aos=""><a href="#Home">Home</a></li>
<li class="link" data-aos=""><a href="./about.html">About</a></li>
<li class="link dropdown" data-aos="">
<a href="#Services" class="dropdown">Services</a>
<ul class="dropdown-menu">
<li><a href="#Destinations" style="color: #000;">Destination</a></li>
<li><a href="#trip" style="color: #000;">Prices</a></li>
<li><a href="#ReviewGallery" style="color: #000;">Trip Gallery</a></li>
<li><a href="#tourist" style="color: #000;">Tourist Guide</a></li>
<li><a href="#hotel" style="color: #000;">Hotel & Resort</a></li>
</ul>
</li>
<li class="link" data-aos=""><a href="./topdeals/topdeals.html">Top Deals</a></li>
<li class="link" data-aos=""><a href="./packages.html">Packages</a></li>
<li class="link" data-aos=""><a href="#testimonials">Testimonial</a></li>
<li class="link" data-aos=""><a href="feedback.html">Rate Us?</a></li>
<li class="link" data-aos=""><a href="#cnt-form">Contact Us</a></li>
</ul>

<a href="newLogin.html" class="contact-btn" id="nav-login-btn"><button class="btn login" id="btn-style"
data-aos="fade-down">Login/SignUp</button></a>
<a href="mapa.html" class="contact-btn" id="nav-view-btn"><button class="btn" id="btn-style" style="margin: 0;"
data-aos="fade-down">view <map name=""></map></button></a>

<a href="loginPage.html" class="contact-btn"><button class="btn" id="logout-btn"
style="margin: 0; display: none;" data-aos="fade-down" disabled>Log Out</button></a>

<!-- <a href="login-modified.html" class="contact-btn"><button class="btn" id="btn-style"
style="margin: 0; box-shadow:1.5px 1.5px 6px red;" data-aos="fade-down">Login</button></a> -->
<div class="contact-btns">
<a href="newLogin.html" class="contact-btn" id="nav-login-btn">
<button class="btn login" id="btn-style" data-aos="fade-down">Login/<br>SignUp</button>
</a>
<a href="mapa.html" class="contact-btn" id="nav-view-btn">
<button class="btn" id="btn-style" style="margin: 0;" data-aos="fade-down">View <map name=""></map></button>
</a>
<a href="loginPage.html" class="contact-btn">
<button class="btn" id="logout-btn" style="margin: 0; display: none;" data-aos="fade-down" disabled>Log Out</button>
</a>
</div>

<div class="toggle-container" data-aos="fade-down" style="margin-right: 28px;">
<input id="themeToggle" class="toggle" type="checkbox">
<input id="themeToggle" class="toggle" type="checkbox">
</div>
<div class="hamburger" data-aos="fade-down">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>

<div class="hamburger" id="hamburger" data-aos="fade-down">
<div class="line" style="margin-bottom: 5px;"></div>
<div class="line" style="margin-bottom: 5px;"></div>
<div class="line" style="margin-bottom: 5px;"></div>
<div class="line" style="margin-bottom: 5px;"></div>
</div>
</nav>
</div>
</nav>

<style>
/* General Styles for the Navigation */
.nav-container {
background-color: #ffffff; /* Background color */
padding: 5px 20px; /* Reduced padding for smaller height */
display: flex;
justify-content: space-between;
align-items: center;
}

.newNav {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}

.sitelogo {
height: 35px; /* Slightly smaller logo */
width: 35px;
margin-right: 10px; /* Reduced space between logo and title */
}

.nav__logo {
font-size: 28px; /* Adjust font size */
color: #ece6e6; /* Logo color */
text-decoration: none; /* Remove underline */
}

.navLinks {
list-style: none; /* Remove bullet points */
display: flex; /* Display items in a row */
margin: 0; /* Remove default margin */
padding: 0; /* Remove default padding */
}
.navLinks.active {
display: flex; /* Show links when the 'active' class is applied */
}


.link {
margin: 0 10px; /* Reduced space between links */
}

.link a {
font-size: 18px; /* Increased font size */
text-decoration: none; /* Remove underline */
color: #d8d4d4; /* Link color */
transition: color 0.3s ease; /* Smooth color transition */
}

.link a:hover {
color: #007BFF; /* Change color on hover */
}

.dropdown-menu {
display: none; /* Hide dropdown initially */
position: absolute; /* Position dropdown below the parent */
background-color: #fff; /* Dropdown background */
border: 1px solid #ccc; /* Border for dropdown */
z-index: 1000; /* Ensure dropdown appears above other content */
}

.dropdown:hover .dropdown-menu {
display: block; /* Show dropdown on hover */
}

.contact-btns {
display: flex; /* Align buttons side by side */
align-items: center;
gap: 10px; /* Small gap between the buttons */
}

.contact-btn {
margin: 0; /* Remove extra space between buttons */
}

.btn {
padding: 8px 12px; /* Adjusted padding for smaller height */
border: none; /* Remove border */
border-radius: 5px; /* Rounded corners */
cursor: pointer; /* Pointer cursor on hover */
}

/* Hamburger Menu Styles */
.hamburger {
display: none; /* Hide on larger screens */
}

/* Toggle Theme Container */
.toggle-container {
display: flex;
align-items: center; /* Center vertically */
}

/* Responsive Styles */
@media (max-width: 1168px) {
.hamburger {
display: block; /* Show hamburger on small screens */
}

.navLinks {
display: none; /* Hide nav links on small screens */
flex-direction: column; /* Stack links vertically */
position: absolute; /* Position over content */
top: 60px; /* Adjusted position below navbar */
left: 0;
background-color: #ffffff; /* Background color */
width: 100%; /* Full width */
z-index: 1000; /* Stack above other content */
padding: 10px 0; /* Padding for spacing */
}

.navLinks.active {
display: flex; /* Show links when active */
padding: 10px; /* Padding around links */
}

.link {
margin: 10px 0; /* Space between links */
text-align: center; /* Center align links */
}

.dropdown {
position: center; /* Position for dropdown menu */
}
}

</style>
<script>
const hamburger = document.getElementById('hamburger');
const navLinks = document.querySelector('.navLinks');
const dropdownToggles = document.querySelectorAll('.dropdown');

hamburger.addEventListener('click', () => {
navLinks.classList.toggle('active'); // Toggles the 'active' class
});
</script>

<header>
<div class="nav-wrapperr">
<div id="progress-container">
Expand Down

0 comments on commit 9b51929

Please sign in to comment.