☰

Greasy Fork is available in English.

Reddit Dropdown Menu

Adds a dropdown menu with links to r/all and r/popular

  1. // ==UserScript==
  2. // @license MIT
  3. // @name         Reddit Dropdown Menu
  4. // @namespace    http://tampermonkey.net/
  5. // @version      0.2.5-Beta
  6. // @description  Adds a dropdown menu with links to r/all and r/popular
  7. // @author       Daniel Vasquez
  8. // @match        https://*.reddit.com/*
  9. // @grant        none
  10. // ==/UserScript==
  11. (function() {
  12.     'use strict';
  13.  
  14.     // Create dropdown menu container
  15.     let dropdown = document.createElement("div");
  16.     dropdown.textContent = "RMenu"; // Text for the dropdown button
  17.     dropdown.style.position = "fixed";
  18.     dropdown.style.top = "6px";
  19.     dropdown.style.right = "5px";
  20.     dropdown.style.zIndex = "1000";
  21.     dropdown.style.padding = "10px 20px";
  22.     dropdown.style.backgroundColor = "#FF4500";
  23.     dropdown.style.border = "none";
  24.     dropdown.style.color = "white";
  25.     dropdown.style.borderRadius = "5px";
  26.     dropdown.style.cursor = "pointer";
  27.     dropdown.style.textAlign = "center";
  28.  
  29.     // Style for the dropdown content
  30.     let dropdownContentStyle = "display: none; position: fixed; right: 10px; top: 46px; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1001; border-radius: 5px;";
  31.  
  32.     // Create dropdown content
  33.     let dropdownContent = document.createElement("div");
  34.     dropdownContent.style = dropdownContentStyle;
  35.  
  36.     // Timeout variable to manage the hover state
  37.     let hoverTimeout;
  38.  
  39.     // Create menu items
  40.     function createMenuItem(text, href) {
  41.         let item = document.createElement("a");
  42.         item.textContent = text;
  43.         item.href = href;
  44.         item.style.color = "black";
  45.         item.style.padding = "12px 16px";
  46.         item.style.textDecoration = "none";
  47.         item.style.display = "block";
  48.         item.onmouseover = function() { this.style.backgroundColor = "#f1f1f1"; };
  49.         item.onmouseout = function() { this.style.backgroundColor = "#f9f9f9"; };
  50.         return item;
  51.     }
  52.  
  53.     // Append items to dropdown content
  54.     dropdownContent.appendChild(createMenuItem("Go to r/all", "https://www.reddit.com/r/all/"));
  55.     dropdownContent.appendChild(createMenuItem("Go to r/popular", "https://www.reddit.com/r/popular/"));
  56.  
  57.     // Show dropdown content on hover and reset the timeout
  58.     dropdown.onmouseover = function() {
  59.         clearTimeout(hoverTimeout);
  60.         dropdownContent.style.display = "block";
  61.     };
  62.  
  63.     // Hide dropdown content after a delay
  64.     dropdown.onmouseout = function() {
  65.         hoverTimeout = setTimeout(function() {
  66.             dropdownContent.style.display = "none";
  67.         }, 500); // 500 milliseconds delay
  68.     };
  69.  
  70.     // Append dropdown content to dropdown
  71.     dropdown.appendChild(dropdownContent);
  72.  
  73.     // Append dropdown to the body
  74.     document.body.appendChild(dropdown);
  75.  
  76.     // Move the profile button to avoid overlap
  77.     let profileButton = document.querySelector("#USER_DROPDOWN_ID"); // Replace with the actual ID or class of the Reddit profile button
  78.     if (profileButton) {
  79.         profileButton.style.right = "1px"; // Adjust as needed to move the profile button
  80.     }
  81. })();