API tools faq
paste
Advertisement
TheiPhoneFan

Sub Dropdowns In Sidebar/Nav Bar

TheiPhoneFan
Apr 7th, 2024
787
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.14 KB | None | 0 0
raw download clone embed print report
  1. <!-- Created by TheiPhoneFan on 2024-02-17 -->
  2. <!-- TheiPhoneFan 6.0.4, 2021-2024 -->
  3. <!DOCTYPE html>
  4. <html>
  5.  
  6. <head>
  7.     <style>
  8.     /* Additional styles for the hover button and menu */
  9.     .dropdown-hover {
  10.         position: relative;
  11.         display: inline-block;
  12.     }
  13.  
  14.     .dropdown-hover .dropbtn {
  15.         font-size: 15px;
  16.         border: none;
  17.         outline: none;
  18.         color: black;
  19.         padding: 14px 16px;
  20.         background-color: transparent;
  21.         font-family: inherit;
  22.         margin: 0;
  23.     }
  24.  
  25.     .dropdown-hover .dropdown-content-right {
  26.         display: none;
  27.         position: absolute;
  28.         background-image: url('./theme/pinstripes-1x.png');
  29.         min-width: 160px;
  30.         box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  31.         z-index: 1;
  32.         right: 0;
  33.     }
  34.  
  35.     .dropdown-hover:hover .dropdown-content-right {
  36.         display: block;
  37.         border-radius: 13px;
  38.     }
  39.  
  40.     .dropdown-hover .dropdown-content-right a {
  41.         color: black;
  42.         padding: 12px 16px;
  43.         text-decoration: none;
  44.         display: block;
  45.     }
  46.  
  47.     .dropdown-hover .dropdown-content-right a:hover {
  48.         background-color: #eeeeee;
  49.     }
  50.     </style>
  51.     <!-- External Font -->
  52.     <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,700,900" rel="stylesheet" type="text/css">
  53.     <!-- Stylesheet Link -->
  54.     <link rel="stylesheet" href="./theme/style.css">
  55.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  56.     <!-- Favicon Image Link -->
  57.     <link rel="icon" type="image/x-png" href="./logos/tif-logo.png">
  58.     <!-- Enables Unicode Characters To Be Displayed -->
  59.     <meta charset="UTF-8">
  60.     <!-- Scales Website Content -->
  61.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  62. </head>
  63.  
  64. <body class="full-bg-body">
  65.     <!-- Top Bar -->
  66.     <div class="navbar" style="border-radius: 13px 13px 13px 13px;">
  67.         <!-- Site Title -->
  68.         <a href="./index.html" style="background-color:transparent;cursor:pointer;color:black;"><b>TheiPhoneFan.com</b></a>
  69.  
  70.         <!-- Home -->
  71.         <a href="./index.html">Home <img src="./theme/glyphs/home.png" height="15" alt="home"></a>
  72.  
  73.         <!-- Channel Related Dropdown -->
  74.         <div class="dropdown">
  75.             <button class="dropbtn" title="dropdown">Channel Related <i class="fa fa-caret-down"></i></button>
  76.             <div class="dropdown-content">
  77.                 <a href="./channel-related.html" style="border-radius: 16px 16px 0px 0px;"><b>Channel Related</b> <img src="./theme/glyphs/triangle.png" height="15" alt="channel related"></a>
  78.                 <a href="https://www.youtube.com/@theiphonefan761/about">Channel Info <img src="./theme/glyphs/channel-info.png" height="15" alt="channel info"></a>
  79.                 <a href="./music-i-use.html">Music I Use <img src="./theme/glyphs/music-i-use.png" height="15" alt="music i use"></a>
  80.                 <a href="./my-playlists.html">My Playlists <img src="./theme/glyphs/triangle.png" height="15" alt="my playlists"></a>
  81.                 <a href="./my-top-5-vids.html">My Top 5 Vids <img src="./theme/glyphs/triangle.png" height="15" alt="top 5 vids"></a>
  82.                 <a href="./my-videos.html">My Videos <img src="./theme/glyphs/triangle.png" height="15" alt="my videos"></a>
  83.                 <a href="./thumbnail-design.html" style="border-radius: 0px 0px 16px 16px;">Thumbnail Design <img src="./theme/glyphs/thumbnail-design.png" height="15" alt="thumbnail design"></a>
  84.             </div>
  85.         </div>
  86.  
  87.         <!-- Content Dropdown -->
  88.         <div class="dropdown" title="dropdown">
  89.             <button class="dropbtn">Content <i class="fa fa-caret-down"></i></button>
  90.             <div class="dropdown-content">
  91.                 <a href="./content.html" style="border-radius: 16px 16px 0px 0px;"><b>Content</b></a>
  92.                 <a href="./apple-archive.html">Apple Archive <img src="./theme/glyphs/apple.png" height="15" alt="apple archive"></a>
  93.                 <a href="./apple-concepts.html">Apple Concepts <img src="./theme/glyphs/apple.png" height="15" alt="apple concepts"></a>
  94.                
  95.                 <div class="dropdown-hover" id="articlesHoverBtn">
  96.                     <button class="dropbtn">Articles <i class="fa fa-caret-down"></i></button>
  97.                     <div class="dropdown-content-right">
  98.                         <a href="./article1.html" style="border-radius: 13px 13px 0px 0px;">Article 1</a>
  99.                         <a href="./article2.html">Article 2</a>
  100.                         <a href="./article2.html" style="border-radius: 0px 0px 13px 13px;">Article 3</a>
  101.                     </div>
  102.                 </div>
  103.  
  104.                 <a href="./blog.html">Blog <img src="./theme/glyphs/blog.png" height="15" alt="blog"></a>
  105.                 <a href="./clipart.html">Clipart <img src="./theme/glyphs/clipart.png" height="15" alt="clipart"></a>
  106.                 <a href="./my-photography.html">My Photography <img src="./theme/glyphs/my-photography.png" height="15" alt="my photography"></a>
  107.                 <a href="./wallpapers.html" style="border-radius: 0px 0px 16px 16px;">Wallpapers <img src="./theme/glyphs/wallpapers.png" height="20" alt="wallpapers"></a>
  108.             </div>
  109.         </div>
  110.  
  111.         <!-- Scam Avoidance Dropdown -->
  112.         <div class="dropdown" title="dropdown">
  113.             <button class="dropbtn">Scam Avoidance <i class="fa fa-caret-down"></i></button>
  114.             <div class="dropdown-content">
  115.                 <a href="./scam-avoidance.html" style="border-radius: 16px 16px 0px 0px;"><b>Scam Avoidance</b></a>
  116.                 <a href="./report-a-scam.html">Report a Scam <img src="./theme/glyphs/report.png" height="15" alt="report a scam"></a>
  117.                 <a href="./scam-avoidance-blog.html">Scam Avoidance Blog <img src="./theme/glyphs/blog.png" height="15" alt="scam avoidance blog"></a>
  118.                 <a href="./scam-info-updates.html" style="border-radius: 0px 0px 16px 16px;">Scam Info Updates <img src="./theme/glyphs/updates.png" height="15" alt="scam info updates"></a>
  119.             </div>
  120.         </div>
  121.  
  122.         <!-- Site Related Dropdown -->
  123.         <div class="dropdown" title="dropdown">
  124.             <button class="dropbtn">Site Related <i class="fa fa-caret-down"></i></button>
  125.             <div class="dropdown-content">
  126.                 <a href="./site-related.html" style="border-radius: 16px 16px 0px 0px;"><b>Site Related</b></a>
  127.                 <a href="./all-pages.html">All Pages <img src="./theme/glyphs/all-pages.png" height="12" style="vertical-align:baseline;" alt="all pages"></a>
  128.                 <a href="./changelog.html">Changelog</a>
  129.                 <a href="./downloads.html">Downloads <img src="./theme/glyphs/downloads.png" height="15" alt="downloads"></a>
  130.                 <a href="./get-help.html">Get Help <img src="./theme/glyphs/get-help.png" height="15" alt="get help"></a>
  131.                 <a href="./previews.html">Previews</a>
  132.                 <a href="./report-an-issue.html">Report an Issue <img src="./theme/glyphs/report.png" height="15" alt="report an issue"></a>
  133.                 <a href="./saved-site-revisions.html" style="border-radius: 0px 0px 16px 16px;">Saved Site Revisions <img src="./theme/glyphs/floppy.png" height="15"></a>            </div>
  134.         </div>
  135.  
  136.         <!-- Help & Contact Dropdown -->
  137.         <div class="dropdown" title="dropdown">
  138.             <button class="dropbtn">Help & Contact <i class="fa fa-caret-down"></i></button>
  139.            <div class="dropdown-content">
  140.                <a href="./help-contact.html" style="border-radius: 16px 16px 0px 0px;"><b>Help & Contact</b></a>
  141.                <a href="./contact-me.html">Contact Me <img src="./theme/glyphs/contact-me.png" height="15" alt="contact me"></a>
  142.                <a href="./website-survey.html">Site Survey <img src="./theme/glyphs/survey.png" height="15" alt="site survey"></a>
  143.                &nbsp;
  144.                 <a href="https://m.youtube.com/channel/UC_xMgHdzp5AWR7rVZ89-sYg">YouTube <img src="./theme/glyphs/triangle.png" height="15" alt="youtube"></a>
  145.                 <a href="https://twitter.com/theiphonefan"> 𝕏</a>
  146.                 <a href="https://www.instagram.com/theiphonefan_/">Instagram 📷</a>
  147.                 <a href="mailto:jordan.theiphonefan@gmail.com" style="border-radius: 0px 0px 16px 16px;">Mail ✉️</a>
  148.             </div>
  149.         </div>
  150.     </div>
  151.     </div>
  152.  
  153.     <!-- Sidebar Button -->
  154.     <button class="openbtn" onclick="toggleSidebar()" title="sidebar button">☰</button>
  155.  
  156.     <div class="sidebar" id="mySidebar">
  157.         <h3 style="color:black;margin-top:40px;">TheiPhoneFan.com</h3>
  158.         <a href="./index.html">Home <img src="./theme/glyphs/home.png" height="15" alt="home"></a>
  159.         <details>
  160.             <summary>Channel Related</summary>
  161.             <a href="./channel-related.html"><b>Channel Related</b></a>
  162.             <a href="https://www.youtube.com/@theiphonefan761/about">Channel Info <img src="./theme/glyphs/channel-info.png" height="15" alt="channel info"></a>
  163.             <a href="./music-i-use.html">Music I Use <img src="./theme/glyphs/music-i-use.png" height="15" alt="music i use"></a>
  164.             <a href="./my-playlists.html">My Playlists <img src="./theme/glyphs/triangle.png" height="15" alt="my playlists"></a>
  165.             <a href="./my-top-5-vids.html">My Top 5 Vids <img src="./theme/glyphs/triangle.png" height="15" alt="top 5 vids"></a>
  166.             <a href="./my-videos.html">My Videos <img src="./theme/glyphs/triangle.png" height="15" alt="my videos"></a>
  167.             <a href="./thumbnail-design.html">Thumbnail Design <img src="./theme/glyphs/thumbnail-design.png" height="15" alt="thumbnail design"></a>
  168.             <hr>
  169.         </details>
  170.         <details>
  171.             <summary>Content</summary>
  172.             <a href="./content.html"><b>Content</b></a>
  173.             <a href="./apple-archive.html">Apple Archive <img src="./theme/glyphs/apple.png" height="15" alt="apple archive"></a>
  174.             <a href="./apple-concepts.html">Apple Concepts <img src="./theme/glyphs/apple.png" height="15" alt="apple concepts"></a>
  175.             <details>
  176.                 <summary>Articles</summary>
  177.                 <!-- Article links -->
  178.                 <a href="./article1.html" style="border-radius: 13px 13px 0px 0px;">Article 1</a>
  179.                 <a href="./article2.html">Article 2</a>
  180.                 <a href="./article2.html" style="border-radius: 0px 0px 13px 13px;">Article 3</a>
  181.             </details>
  182.             <a href="./blog.html">Blog <img src="./theme/glyphs/blog.png" height="15" alt="blog"></a>
  183.             <a href="./clipart.html">Clipart <img src="./theme/glyphs/clipart.png" height="15" alt="clipart"></a>
  184.             <a href="./my-photography.html">My Photography <img src="./theme/glyphs/my-photography.png" height="15" alt="my photography"></a>
  185.             <a href="./wallpapers.html">Wallpapers <img src="./theme/glyphs/wallpapers.png" height="20" alt="wallpapers"></a>
  186.             <hr>
  187.         </details>
  188.         <details>
  189.             <summary>Scam Avoidance</summary>
  190.             <a href="./scam-avoidance.html"><b>Scam Avoidance</b></a>
  191.             <a href="./report-a-scam.html">Report a Scam <img src="./theme/glyphs/report.png" height="15" alt="report a scam"></a>
  192.             <a href="./scam-avoidance-blog.html">Scam Avoidance Blog <img src="./theme/glyphs/blog.png" height="15" alt="scam avoidance blog"></a>
  193.             <a href="./scam-info-updates.html">Scam Info Updates <img src="./theme/glyphs/updates.png" height="15" alt="scam info updates"></a>
  194.             <hr>
  195.         </details>
  196.         <details>
  197.             <summary>Site Related</summary>
  198.             <a href="./site-related.html"><b>Site Related</b></a>
  199.             <a href="./all-pages.html">All Pages <img src="./theme/glyphs/all-pages.png" height="12" style="vertical-align:baseline;" alt="all pages"></a>
  200.             <a href="./changelog.html">Changelog</a>
  201.             <a href="./downloads.html">Downloads <img src="./theme/glyphs/downloads.png" height="15" alt="downloads"></a>
  202.             <a href="./get-help.html">Get Help <img src="./theme/glyphs/get-help.png" height="15" alt="get help"></a>
  203.             <a href="./previews.html">Previews</a>
  204.             <a href="./report-an-issue.html">Report an Issue <img src="./theme/glyphs/report.png" height="15" alt="report an issue"></a>
  205.             <a href="./saved-site-revisions.html">Saved Site Revisions <img src="./theme/glyphs/floppy.png" height="15" alt="saved site revisions"></a>
  206.             <hr>
  207.         </details>
  208.         <details>
  209.             <summary>Help & Contact</summary>
  210.            <a href="./help-contact.html"><b>Help & Contact</b></a>
  211.            <a href="./contact-me.html">Contact Me <img src="./theme/glyphs/contact-me.png" height="15" alt="contact me"></a>
  212.            <a href="./website-survey.html">Site Survey <img src="./theme/glyphs/survey.png" height="15" alt="site survey"></a>
  213.            <hr>
  214.        </details>
  215.  
  216.        <div class="mydiv" style="margin-bottom:20px;">
  217.             <a href="https://www.youtube.com/channel/UC_xMgHdzp5AWR7rVZ89-sYg" style="padding:0px;background-color:transparent;display:inline;">
  218.                 <img src="./theme/social-icons/youtube-social.png" alt="My YouTube Channel" width="40">
  219.             </a>
  220.             <a href="https://twitter.com/theiphonefan" style="padding:0px;background-color:transparent;display:inline;">
  221.                 <img src="./theme/social-icons/x-social.png" alt="My X Account" width="40">
  222.             </a>
  223.             <a href="https://instagram.com/theiphonefan_/" style="padding:0px;background-color:transparent;display:inline;">
  224.                 <img src="./theme/social-icons/instagram-social.png" alt="My Instagram Account" width="40">
  225.             </a>
  226.             <a href="mailto:jordan.theiphonefan@gmail.com" style="padding:0px;background-color:transparent;display:inline;">
  227.                 <img src="./theme/social-icons/mail-social.png" alt="Email Me" width="40">
  228.             </a>
  229.         </div>
  230.     </div>
  231.  
  232.     <!-- JavaScript -->
  233.     <script>
  234.         // JavaScript function to toggle the sidebar //
  235.         function toggleSidebar() {
  236.             var sidebar = document.getElementById('mySidebar');
  237.             if (sidebar.style.left === '0px') {
  238.                 sidebar.style.left = '-310px';
  239.                 document.getElementsByClassName('openbtn')[0].innerHTML = '☰';
  240.             } else {
  241.                 sidebar.style.left = '0px';
  242.                 document.getElementsByClassName('openbtn')[0].innerHTML = '×';
  243.             }
  244.         }
  245.  
  246.         function toggleHoverMenu() {
  247.             var hoverBtn = document.getElementById('articlesHoverBtn');
  248.             var menu = hoverBtn.querySelector('.dropdown-content-right');
  249.             hoverBtn.addEventListener('mouseenter', function () {
  250.                 menu.style.display = 'block';
  251.             });
  252.             hoverBtn.addEventListener('mouseleave', function () {
  253.                 menu.style.display = 'none';
  254.             });
  255.         }
  256.  
  257.         // Call the function when the page loads
  258.         window.onload = function () {
  259.             toggleHoverMenu();
  260.         };
  261.     </script>
  262. </body>
  263.  
  264. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!