Merge pull request #3826 from SrijaVuppala295/dropdownMenu

Fix Dropdown Functionality and Correct URL Paths for Pricing Section
anuragverma108 · Oct 21, 2024 · 636e992 · 636e992
2 parents 0e69119 + c160cb7
commit 636e992
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 16 deletions.
diff --git a/assets/html/ConnReader.html b/assets/html/ConnReader.html
@@ -383,6 +383,23 @@
   margin-top: 10px; /* Increase the top margin of each item */
 }
 
+
+/* Initially hide the dropdown */
+#dropdown-menu {
+  display: none;
+  position: absolute;
+  background-color: #7c0f1b;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  padding: 10px;
+}
+
+/* Show the dropdown when the 'open' class is added */
+#dropdown-menu.open {
+  display: block;
+}
+
+
 /* footer  */
 
 .socialmediaicons {
@@ -715,6 +732,15 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
     if (savedAvatar) {
         document.getElementById("profile-avatar").src = `./assets/images/${savedAvatar}`;
     }
+
+    document.getElementById('more-link').addEventListener('click', function(event) {
+  event.preventDefault(); // Prevent the default action of the anchor tag
+
+  // Toggle the 'open' class for the dropdown menu
+  const dropdownMenu = document.getElementById('dropdown-menu');
+  dropdownMenu.classList.toggle('open');
+});
+
 });
 
 

diff --git a/assets/html/booklistswap.html b/assets/html/booklistswap.html
@@ -285,6 +285,23 @@
       animation: none;
     }
 
+
+/* Initially hide the dropdown */
+#dropdown-menu {
+  display: none;
+  position: absolute;
+  background-color: #7c0f1b;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  padding: 10px;
+}
+
+/* Show the dropdown when the 'open' class is added */
+#dropdown-menu.open {
+  display: block;
+}
+
+
     /* .prebut
       { */
     /* position: fixed; */
@@ -650,6 +667,8 @@
             </div>
           </li>
           <li>
+
+
             <div class="action">
               <div class="profile" onclick="menuToggle();">
                 <img id="profile-avatar" src="../images/avatar1.jpg" />
@@ -686,6 +705,14 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
         }
       });
 
+      document.getElementById('more-link').addEventListener('click', function(event) {
+  event.preventDefault(); // Prevent the default action of the anchor tag
+
+  // Toggle the 'open' class for the dropdown menu
+  const dropdownMenu = document.getElementById('dropdown-menu');
+  dropdownMenu.classList.toggle('open');
+});
+
 
       function menuToggle() {
         const toggleMenu = document.querySelector(".menu");

diff --git a/assets/html/freeBooks.html b/assets/html/freeBooks.html
@@ -503,6 +503,23 @@
       .but {
         font-size: x-large;
       }
+
+
+/* Initially hide the dropdown */
+#dropdown-menu {
+  display: none;
+  position: absolute;
+  background-color: #7c0f1b;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  padding: 10px;
+}
+
+/* Show the dropdown when the 'open' class is added */
+#dropdown-menu.open {
+  display: block;
+}
+
     </style>
 
 
@@ -695,6 +712,13 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
             document.getElementById("profile-avatar").src = `./assets/images/${savedAvatar}`;
           }
         });
+        document.getElementById('more-link').addEventListener('click', function(event) {
+  event.preventDefault(); // Prevent the default action of the anchor tag
+
+  // Toggle the 'open' class for the dropdown menu
+  const dropdownMenu = document.getElementById('dropdown-menu');
+  dropdownMenu.classList.toggle('open');
+});
 
 
         function menuToggle() {

diff --git a/assets/html/pricing.html b/assets/html/pricing.html
@@ -461,25 +461,25 @@
     max-width: 30rem; /* Optional max width for cards */
     margin: 1rem; /* Optional margin around each card */
 }
-
-
-
 .card img {
     width: 100%;
     height: auto;
 }
 
+/* Initially hide the dropdown */
+#dropdown-menu {
+  display: none;
+  position: absolute;
+  background-color: #7c0f1b;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  padding: 10px;
+}
 
-
-
-
-
-
-
-
-
-
-
+/* Show the dropdown when the 'open' class is added */
+#dropdown-menu.open {
+  display: block;
+}
 
     </style>
 </head>
@@ -587,13 +587,13 @@
 
               <ul class="dropdown-menu-list">
                 <li>
-                  <a href="chat.html" class="navbar-link" style="font-family: sans-serif; color: black; margin-bottom: 5px;">
+                  <a href="/chat.html" class="navbar-link" style="font-family: sans-serif; margin-bottom: 5px;">
                     Community chat
                 </a>
                 </li>
                 <li>
                   <a href="bookpref.html" class="navbar-link"
-                    style="font-family: sans-serif; color: black; margin-bottom: 5px;">
+                    style="font-family: sans-serif; margin-bottom: 5px;">
                     Book Prefer Quiz
                   </a>
                 </li>
@@ -617,7 +617,7 @@
                   <a href="../html/read_later.html" class="navbar-link" data-nav-link><i class="ri-price-tag-3-fill"></i>Read Later</a>
                 </li>
                 <li class="dropdown-menu-item">
-                  <a href=".../html/ConnReader.html" class="navbar-link" data-nav-link><i class="ri-price-tag-3-fill"></i>Reader Connection</a>
+                  <a href="../html/ConnReader.html" class="navbar-link" data-nav-link><i class="ri-price-tag-3-fill"></i>Reader Connection</a>
                 </li>
                 <li class="dropdown-menu-item">
                   <a href="../html/about.html" class="navbar-link">About</a>
@@ -661,6 +661,13 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
                       document.getElementById("profile-avatar").src = `./assets/images/${savedAvatar}`;
                   }
                 });
+                document.getElementById('more-link').addEventListener('click', function(event) {
+  event.preventDefault(); // Prevent the default action of the anchor tag
+
+  // Toggle the 'open' class for the dropdown menu
+  const dropdownMenu = document.getElementById('dropdown-menu');
+  dropdownMenu.classList.toggle('open');
+});
 
 
                 function menuToggle() {