Improved mobile menu + several fixes after FontAwesome switch CDN > Kit

giovannimanetti11 · Jan 30, 2024 · c222fda · c222fda
1 parent c970dcd
commit c222fda
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 66 deletions.
diff --git a/header.php b/header.php
@@ -62,8 +62,11 @@ function gtag(){dataLayer.push(arguments);}
     </div>
 
     <div class="mobileMenu">
-        <i id="menu-icon" class="fa-solid fa-bars"></i>
+        <div id="menu-icon-container">
+            <i id="menu-icon" class="fa-solid fa-bars"></i>
+        </div>
     </div>
+
     <div id="popup-menu" class="mobileMenuPopup">
         <?php
             wp_nav_menu(array(

diff --git a/inc/js/custom-polly.js b/inc/js/custom-polly.js
@@ -8,6 +8,7 @@ const Polly = new AWS.Polly({
 });
 
 function synthesizeSpeech(text, language) {
+
     const params = {
         OutputFormat: 'mp3',
         Text: text,
@@ -18,12 +19,12 @@ function synthesizeSpeech(text, language) {
 
     Polly.synthesizeSpeech(params, (err, data) => {
         if (err) {
-            console.error(err);
+            console.error('Error in synthesizeSpeech:', err);
             return;
         }
-    
+
         if (data.AudioStream instanceof ArrayBuffer || data.AudioStream instanceof Uint8Array) {
-            const audioBlob = new Blob([data.AudioStream], {type: 'audio/mpeg'});
+            const audioBlob = new Blob([data.AudioStream], { type: 'audio/mpeg' });
             const audioUrl = URL.createObjectURL(audioBlob);
             const audio = new Audio(audioUrl);
             audio.play();
@@ -32,8 +33,13 @@ function synthesizeSpeech(text, language) {
 }
 
 function handleClick(event) {
-    const target = event.target;
-    if (target.classList.contains('fa-volume-up')) {
+    // Check if the clicked element or any of its parents has the 'voice-icon' class.
+    let target = event.target;
+    while (target !== document && !(target.classList && target.classList.contains('voice-icon'))) {
+        target = target.parentNode;
+    }
+
+    if (target !== document) {
         const text = target.getAttribute('data-text');
         const language = target.getAttribute('data-language') || 'it';
         synthesizeSpeech(text, language);
@@ -44,4 +50,4 @@ function init() {
     document.addEventListener('click', handleClick);
 }
 
-document.addEventListener('DOMContentLoaded', init);
+document.addEventListener('DOMContentLoaded', init);
diff --git a/inc/js/functions.js b/inc/js/functions.js
@@ -1,38 +1,71 @@
-// Menu toggle
-
 document.addEventListener("DOMContentLoaded", function() {
-  var menuIcon = document.getElementById("menu-icon");
+  var menuIconContainer = document.getElementById("menu-icon-container");
   var popupMenu = document.getElementById("popup-menu");
+  var menuLinks = popupMenu.querySelectorAll('a');
   var isClicked = false;
 
-  // Toggle menu icon and visibility when clicked
-
-  menuIcon.addEventListener("click", function() {
-    if (!isClicked) {
-      menuIcon.classList.remove("fa-bars");
-      menuIcon.classList.add("fa-xmark");
-      menuIcon.classList.add("hidden");
-      setTimeout(function() {
-        menuIcon.classList.remove("hidden");
-        menuIcon.classList.add("visible");
-      }, 10);
-      popupMenu.style.display = "block";
-      isClicked = true;
-    } else {
-      menuIcon.classList.remove("fa-xmark");
-      menuIcon.classList.add("fa-bars");
-      menuIcon.classList.add("hidden");
-      setTimeout(function() {
-        menuIcon.classList.remove("hidden");
-        menuIcon.classList.add("visible");
-      }, 10);
-      popupMenu.style.display = "none";
+  // Ensure menu elements are present
+  if (!menuIconContainer || !popupMenu) {
+    console.error("Menu elements not found.");
+    return;
+  }
+
+  // Handle click on the menu icon container
+  menuIconContainer.addEventListener("click", function(event) {
+    event.stopPropagation();
+    var menuIcon = document.getElementById("menu-icon");
+
+    // Check if the menu icon is present
+    if (!menuIcon) {
+      console.error("Menu icon not found.");
+      return;
+    }
+
+    isClicked = !isClicked;
+    menuIcon.className = isClicked ? "fa-solid fa-xmark" : "fa-solid fa-bars";
+    popupMenu.classList.toggle("show", isClicked);
+  });
+
+  // Close the menu when clicking outside
+  document.addEventListener("click", function() {
+    if (isClicked) {
+      var menuIcon = document.getElementById("menu-icon");
+      menuIcon.className = "fa-solid fa-bars";
+      popupMenu.classList.remove("show");
       isClicked = false;
     }
   });
+
+  // Function to handle the closing of the menu
+  function closeMenu(target) {
+    popupMenu.classList.remove('show');
+    isClicked = false;
+    setTimeout(function() {
+      window.location.href = target;
+    }, 400); 
+  }
+
+  // Handle click on menu items
+  menuLinks.forEach(function(link) {
+    link.addEventListener('click', function(event) {
+      event.preventDefault();
+      closeMenu(this.getAttribute('href'));
+    });
+
+    // Add touch event listener for mobile devices
+    link.addEventListener('touchend', function(event) {
+      event.preventDefault();
+      closeMenu(this.getAttribute('href'));
+    });
+  });
 });
 
 
+
+
+
+
+
 // Initialize the mailing list popup and other features
 document.addEventListener('DOMContentLoaded', () => {
 

diff --git a/single.php b/single.php
@@ -37,13 +37,14 @@
             </div>
         </div>
 
-
-
-
         <div class="article-title">
-            <h1><?php the_title(); ?></h1> <i class="fa-solid fa-volume-high" data-text="<?php echo esc_attr(get_the_title()); ?>" data-language="it"></i>
+            <h1><?php the_title(); ?></h1> 
+            <span class="voice-icon" data-text="<?php echo esc_attr(get_the_title()); ?>" data-language="it">
+                <i class="fa-solid fa-volume-high"></i>
+            </span>
         </div>
 
+
         <?php $meta_box_value = get_post_meta( get_the_ID(), 'meta-box-nome-scientifico', true ); ?>
         <?php if (!empty($meta_box_value)) : ?>
             <div class="meta-box-nome-scientifico"><?php echo esc_html( $meta_box_value ); ?></div>

diff --git a/style.css b/style.css
@@ -189,6 +189,7 @@ body {
 
 .breadcrumbs {
   width: 50%;
+  max-width: 1000px;
   margin: 0 auto;
   color: #0A2944;
 }
@@ -242,11 +243,15 @@ header {
   align-items: center;
   padding: 0 10%;
   background: #0A2944;
-  border-bottom: 1px solid #000;
 }
 
 .menu {
   margin-left: 50px;
+  transition: all 0.3s ease-in-out;
+}
+
+.menu-icon {
+  color: #fff;
 }
 
 .menu ul {
@@ -292,17 +297,25 @@ header {
   border: 1px solid #fff;
 }
 
-.mobileMenu i {
-  color: #fff;
-  display: none;
+#popup-menu {
+  position: fixed;
+  margin-top: 42px;
+  width: 100%;
+  background-color: #0A2944;
+  text-align: center;
+  border-bottom: 1px solid #000;
+  padding-bottom: 10px;
+  transform: translateY(-100%);
+  opacity: 0;
+  visibility: hidden;
+  transition: transform 0.7s ease, opacity 0.7s ease, visibility 0.7s ease;
+  z-index: 1000;
 }
 
-#popup-menu {
- width: 100%;
- background-color: #0A2944;
- text-align: center;
- border-bottom: 1px solid #000;
- padding-bottom: 10px;
+#popup-menu.show {
+  transform: translateY(0);
+  opacity: 1;
+  visibility: visible;
 }
 
 #popup-menu ul {
@@ -314,6 +327,14 @@ header {
 #popup-menu ul li {
   list-style-type: none;
   text-align: center;
+  opacity: 0;
+  transform: translateY(-20px);
+  transition: transform 0.7s ease, opacity 0.7s ease;
+}
+
+#popup-menu.show ul li {
+  opacity: 1;
+  transform: translateY(0);
 }
 
 #popup-menu ul li a {
@@ -326,21 +347,10 @@ header {
   text-decoration: underline;
 }
 
-.mobileMenuPopup, #popup-menu {
-  display: none;
-}
-
-#menu-icon {
-  transition: opacity 0.3s ease-in-out;
-}
-
-#menu-icon.visible {
-  opacity: 1;
+#popup-menu button {
+  transition: transform 0.7s ease, opacity 0.7s ease;
 }
 
-#menu-icon.hidden {
-  opacity: 0;
-}
 
 #mailingList-popup, #login-popup, #signup-popup, #contact-popup {
   margin-top: 55px;
@@ -737,7 +747,7 @@ header {
 .alert-icon {
   float: left;
   color: #9F6000;
-  margin-right: 15px;
+  margin-right: 5px;
 }
 
 .home-content {
@@ -1159,6 +1169,7 @@ header {
 
 .post-content {
   width: 50%;
+  max-width: 1000px;
   margin: 0 auto;
   background: #fff;
   border: 1px solid #bdbdbd;
@@ -1687,6 +1698,15 @@ header {
   margin: 20px 0 0 15px;
 }
 
+.voice-icon:hover {
+  transition: all 0.6s;
+}
+
+.voice-icon:hover {
+  cursor: pointer;
+  opacity: 0.8;
+}
+
 .postid-196 .fa-volume-high, .postid-829 .fa-volume-high, .postid-1462 .fa-volume-high {
   display: none;
 }
@@ -2583,11 +2603,6 @@ footer {
     margin-bottom: 15px;
   }
 
-  .article-title i {
-    margin-top: 10px;
-    margin-left: 10px;
-  }
-
   .breadcrumbs {
     width: 95%;
     padding: 15px 0;
@@ -2599,10 +2614,11 @@ footer {
     margin-left: auto;
   }
 
-  .mobileMenu i {
+  .mobileMenu svg {
     display: block;
     transition: all .3s ease;
     margin-top: -30px;
+    color: #fff;
   }
 
   #menu-icon:hover {