☰

AO3: Disable Hover in Main Menu

Ao3 menu dropdowns are no longer visible at hover, you have to click the main menu entry instead

  1. // ==UserScript==
  2. // @name         AO3: Disable Hover in Main Menu
  3. // @description  Ao3 menu dropdowns are no longer visible at hover, you have to click the main menu entry instead
  4. // @version      1.2
  5. // @author       escctrl
  6. // @namespace    https://greasyfork.org/en/users/906106-escctrl
  7. // @match        https://archiveofourown.org/*
  8. // @require      https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js
  9. // @grant        none
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. (function($) {
  14.     'use strict';
  15.  
  16.     // AO3 menu seems to be built with Bootstrap JS, based on existance of data-* attributes
  17.     // AO3 has CSS (#header .dropdown:hover .menu {display: block}) to make dropdown-on-hover work, but CSS override meant clicking wouldn't show menu anymore either ¯\_(ツ)_/¯
  18.     // hack inspired by this comment: https://stackoverflow.com/a/19191435/22187458
  19.     // this combo (mouse-in and mouse-out both hide the dropdown and reset the Bootstrap class) gives the most predictable experience if the pointer moves back and forth across all menu entries without clicking anywhere
  20.     
  21.     //// when a li.dropdown is being hovered over
  22.     $('#header ul.navigation.actions li.dropdown').hover(function() {
  23.         // Ao3 CSS tries to show its ul.dropdown-menu entries -> we force-hide it again with JS
  24.         $(this).find('.dropdown-menu').hide();
  25.         // when mouse away, dropdown still closes -> reset the Bootstrap class so next click opens dropdown again
  26.         $(this).removeClass('open');
  27.     });
  28.  
  29. })(jQuery);