Added drop down symbol

I have added drop down symbol when hovers it rotates 180 degrees and also reduced the lists present in the navbar by adding the book recommendation section in the MORE
anuragverma108 · May 27, 2024 · 8e29367 · 8e29367
1 parent 739fc88
commit 8e29367
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 25 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -540,7 +540,11 @@ background-size: cover;
   padding: 0; /* Remove default padding */
 }
 
+
 .navbar-link {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   position: relative;
   color: var(--charcoal);
   padding: 8px 12px; /* Adjust padding as needed */
@@ -567,12 +571,8 @@ background-size: cover;
   z-index: 1;
   transition: all 0.3s ease;
   top: 100%;
+  text-align: center;
 }
-
-.dropdown-item {
-  margin-top: 5px;
-}
-
 .dropdown-menu-list {
   list-style: none;
   margin: 0;
@@ -598,11 +598,20 @@ background-size: cover;
 
 .navbar-item.dropdown {
   position: relative; /* Ensure the dropdown menu is positioned relative to the navbar item */
+} 
+.dropdown-menu-item .navbar-link {
+  display: inline-block; /* Ensure links are inline-block to center them */
 }
-
 .navbar-item.dropdown:hover .dropdown-menu {
   display: block;
-} */
+} 
+.dropdown-arrow {
+  transition: transform 0.3s ease; /* Smooth transition for rotation */
+}
+
+.navbar-item.dropdown:hover .dropdown-arrow {
+  transform: rotate(180deg);
+}
 
 
 .nav-toggle-btn {

diff --git a/assets/js/script.js b/assets/js/script.js
@@ -219,19 +219,4 @@ function validateAndConnect() {
     document.getElementById('bookAuthor').value='';
     document.getElementById('yourPrice').value='';
   }
-}
-
-
-function toggleMoreDropdown(event) {
-  event.preventDefault();
-  const moreDropdown = document.getElementById('more-dropdown');
-  const dropdownMenu = document.getElementById('dropdown-menu');
-  const moreLink = document.getElementById('more-link');
-
-  if (dropdownMenu.style.display === "block") {
-    dropdownMenu.style.display = "none";
-    moreLink.style.display = "block";
-  } else {
-    dropdownMenu.style.display = "block";
-  }
-}
+}
diff --git a/index.html b/index.html
@@ -127,9 +127,9 @@
           <li class="navbar-item" id="login-signup-link">
             <a href="./assets/html/login.html" class="navbar-link">Login/Signup</a>
           </li>
-
           <li class="navbar-item dropdown" id="more-dropdown">
-            <a href="#" class="navbar-link" id="more-link" onclick="toggleMoreDropdown(event)">More <i class="ri-arrow-down-s-line"></i></a>
+            <a href="#" class="navbar-link" id="more-link">More 
+            <svg  class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24"><path fill="currentcolor" d="m12 13.171l4.95-4.95l1.414 1.415L12 16L5.636 9.636L7.05 8.222z"/></svg></a>
             <div class="dropdown-menu" id="dropdown-menu">
 
               <ul class="dropdown-menu-list">
@@ -142,6 +142,11 @@
                 <li class="dropdown-menu-item">
                   <a href="./assets/html/addremovebook.html" class="navbar-link">Booklist for Swapping</a>
                 </li>
+                <li class="dropdown-menu-item">
+                  <a href="book_recommend.html" class="navbar-link" data-nav-link>
+                    <i class="ri-customer-service-2-fill"></i> Book Recommendation
+                  </a>
+                </li>
               </ul>
             </div>
           </li>