Improve Navbar Visibility and Add Dropdown Menu

Enhanced navbar visibility with better readability and contrast. Added a dropdown menu for better organization.
apu52 · Jul 27, 2024 · e2a2c4e · e2a2c4e
1 parent c776fc7
commit e2a2c4e
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -312,21 +312,24 @@ <h1>TourGuide . . .</h1>
         <a href="#" class="nav__logo" data-aos="fade-right">Tourguide<span>.</span></a>
 
         <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="#AboutUs">About</a></li>
-          <li class="link" data-aos=""><a href="#Destinations">Destination</a></li>
-          <li class="link" data-aos=""><a href="#trip">Prices</a></li>
-          <li class="link" data-aos=""><a href="#ReviewGallery">Trip Gallery</a></li>
-          <li class="link" data-aos=""><a href="#tourist">Tourist Guide</a></li>
-          <li class="link" data-aos=""><a href="#hotel">Hotel & Resort</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="#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>
-
+      </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>

diff --git a/styles.css b/styles.css
@@ -2054,7 +2054,7 @@ body {
   gap: 0.5rem;
   height: auto;
   width: 100%;
-  padding: 1rem 2rem;
+  padding: 0rem 2rem;
 }
 
 .navLinks {
@@ -2070,10 +2070,46 @@ body {
   right: 24px;
 }
 
-.link a {
+.link {
   position: relative;
 }
+.link > a {
+  display: block;
+  color: white;
+  text-align: center;
+  padding: 14px 20px;
+  text-decoration: none;
+}
+.link > a:hover {
+  background-color: #575757;
+}
+.dropdown-menu {
+  display: none;
+  position: absolute;
+  background-color: #123456;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
 
+.dropdown-menu > li {
+  float: none;
+}
+
+.dropdown-menu > li > a {
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+  text-align: left;
+}
+
+.dropdown-menu > li > a:hover {
+  background-color: #575757;
+}
+
+.dropdown:hover .dropdown-menu {
+  display: block;
+}
 /* .link a::before {
   position: absolute;
   content: "";
@@ -2924,7 +2960,7 @@ a {
   position: relative;
   text-decoration: none;
   color: black;
-  font-size: 18px;
+  font-size: 14px;
 }
 a::after {
   content: '';