Feat: Implement hover-to-open navbar with animation (#1768)

Author: this-is-varunxyz

_includes/navbar.ext

@@ -26,11 +26,11 @@
             </li>
             <li class="dropdown">
               <a class="dropdown-toggle" data-toggle="dropdown" href="{{site.baseurl}}/index.html" id="meetings_menu"><span class="glyphicon glyphicon-phone-alt"></span>&nbsp;&nbsp;Meetings<span class="caret"></span></a>
-                <ul class="dropdown-menu" aria-labelledby="activities_menu">
+                <ul class="dropdown-menu" aria-labelledby="meetings_menu">
                  {% for meeting in site.meetings %}
                    <li><a href="{{ meeting.url }}">{{ meeting.title }}</a></li>
                  {% endfor %}
-               </ul>
+                </ul>
             </li>
             <li class="dropdown">
               <a class="dropdown-toggle" data-toggle="dropdown" href="{{site.baseurl}}/index.html" id="communication_menu"><span class="glyphicon glyphicon-bullhorn"></span>&nbsp;&nbsp;Communication<span class="caret"></span></a>
@@ -67,7 +67,7 @@
             <li class="dropdown">
               <a class="dropdown-toggle" data-toggle="dropdown" href="{{ site.baseurl }}/index.html" id="about_menu"><span class="glyphicon glyphicon-info-sign"></span>&nbsp;&nbsp;About<span class="caret"></span></a>
               <ul class="dropdown-menu" aria-labelledby="about_menu">
-                <li><a href="{{ site.baseurl }}/get_involved.html">Get involved!</a><li>
+                <li><a href="{{ site.baseurl }}/get_involved.html">Get involved!</a></li>
                 <li><a href="{{ site.baseurl }}/organization/team.html">The Steering Group</a></li>
                 <li><a href="{{ site.baseurl }}/organization/advisory-group.html">HSF Advisory Group</a></li>
                 <li class="divider"></li>

_layouts/default.html

@@ -35,5 +35,49 @@
 
 <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+<!-- Navbar Hover Effect -->
+<script>
+$(document).ready(function() {
+
+  function applyDesktopNavbar() {
+    // Turn on hover-open functionality
+    $('ul.nav li.dropdown').hover(function() {
+      $(this).addClass('open');
+    }, function() {
+      $(this).removeClass('open');
+    });
+
+    // Disable the default click and remove focus styling on desktop
+    $('.dropdown > a.dropdown-toggle').on('click.desktop', function(e) {
+      e.preventDefault();  // Prevents the link from being followed
+      e.stopPropagation(); // Stops the event from bubbling up
+      $(this).blur();      // Removes the focus, getting rid of the yellow color
+    });
+  }
+
+  function removeDesktopNavbar() {
+    // Turn off hover functionality for mobile
+    $('ul.nav li.dropdown').off('mouseenter mouseleave');
+    // Restore default click behavior for mobile
+    $('.dropdown > a.dropdown-toggle').off('.desktop');
+  }
+
+  // Check window size to apply the correct behavior
+  function toggleNavbarBehavior() {
+    if ($(window).width() > 767) {
+      applyDesktopNavbar();
+    } else {
+      removeDesktopNavbar();
+    }
+  }
+
+  // Run the check once on page load
+  toggleNavbarBehavior();
+
+  // And run it again whenever the window is resized
+  $(window).on('resize', toggleNavbarBehavior);
+
+});
+</script>
 </body>
 </html>

css/hsf.css

@@ -414,4 +414,27 @@ figure.centered-figure {
   .big-link-container a {
     min-height: 0;
   }
+}
+/* Navbar Hover Effect */
+/* This applies the animation only to desktop-sized screens */
+@media (min-width: 768px) {
+  .navbar-nav .dropdown-menu {
+    /* Keep the menu in the document flow but make it invisible */
+    display: block;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none; /* Prevent mouse interaction when hidden */
+
+    /* Animate the fade-in and slide-down effect */
+    transform: translateY(-10px);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+  }
+
+  /* When the .open class is added by our script, make the menu visible */
+  .navbar-nav .dropdown.open > .dropdown-menu {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto; /* Allow mouse interaction */
+    transform: translateY(0);
+  }
 }