☰

element-navbar2078

Navigation Bar

当前为 2024-04-01 提交的版本，查看 最新版本。

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/491413/1352521/element-navbar2078.js 

  1. document.addEventListener('DOMContentLoaded', function () {
  2.     function createElementWithContent() {
  3.         var homeElement = document.createElement('section');
  4.  
  5.         homeElement.classList.add('bodyHome');
  6.  
  7.         homeElement.setAttribute('id', 'bodyHome');
  8.  
  9.         homeElement.innerHTML = `
  10. <nav class="navbar NAV" id="navbar">
  11.     <div class="header NAV" id="header">
  12.         <middle id="middle" class="middle NAV">
  13.             <h1><a id="donationTransfer" class="donationTransfer"> Donation Transfer </a></h1>
  14.         </middle>
  15.         <left id="left" class="left NAV">
  16.             <i><img class="logo" id="logo" alt="logo" src="https://i.ibb.co/sgq9xJd/Screenshot-114.png" style="width:50px;height:50px;position:relative;display:inline;top:0;left:0;" onclick="toggleMenu()" /></i>
  17.             <content class="menu hidden" id="menu">
  18.                 <a id="FaHome" href="./home.html">
  19.                     <i class="fas fa-home" data-type="menu" id="index">
  20.                         <b>Home</b>
  21.                     </i>
  22.                 </a>
  23.                 <a id="FaUser" onclick="toggleSubmenu()">
  24.                     <i class="fas fa-user" data-type="menu" id="user">
  25.                         <b>Account</b>
  26.                     </i>
  27.                 </a>
  28.                 <content class="submenu hidden" id="submenu">
  29.                     <a id="FaAccount" href="./hidden/account.html">
  30.                         <i class="fas fa-user" data-type="submenu" id=account>
  31.                             <b class="authenticated">My Account</b>
  32.                         </i>
  33.                     </a>
  34.                     <a id="FaBank" href="./hidden/bank.html">
  35.                         <i class="fas fa-circle-dollar-to-slot" data-type="submenu" id=bank>
  36.                             <b class="authenticated">bank</b>
  37.                         </i>
  38.                     </a>
  39.                     <a id="FaFoundations" href="./hidden/foundations.html">
  40.                         <i class="fas fa-ribbon" data-type="submenu" id="foundations">
  41.                             <b class="authenticated">Foundations</b>
  42.                         </i>
  43.                     </a>
  44.                     <a id="FaDonate" href="./hidden/donate.html">
  45.                         <i class="fas fa-heart" data-type="submenu" id="donate">
  46.                             <b class="authenticated">Donate</b>
  47.                         </i>
  48.                     </a>
  49.                     <a id="FaLogout" onclick="logout()">
  50.                         <i class="fas fa-right-from-bracket" data-type="submenu" id="logout">
  51.                             <b class="authenticated">Logout</b>
  52.                         </i>
  53.                     </a>
  54.                 </content>
  55.                 <a id="FaAbout" href="./about.html">
  56.                     <i class="fas fa-phone" data-type="menu" id="about">
  57.                         <b>About</b>
  58.                     </i>
  59.                 </a>
  60.             </content>
  61.         </left>
  62.         <right id="right" class="right NAV">
  63.             <h1 class="login visible NAV" id="login" onclick="toggleLogin()">Login</h1>
  64.             <form id="login-form" class="login-form hidden NAV" data-type="login">
  65.                 <h2 class="tooltip-header">LOGIN</h2>
  66.                 <a class="close-btn" onclick="closeForm()">X</a>
  67.                 <label for="email">Email:</label><br>
  68.                 <input type="email" id="email" name="loginEmail" required><br>
  69.                 <label for="password">Password:</label><br>
  70.                 <input type="password" id="password" name="loginPassword" required><br>
  71.                 <a id="submitL" value="SUBMIT" class="submit-btn" onclick="signin()">submit</a>
  72.             </form>
  73.             <h1 class="register hidden NAV" id="register" data-type="register" onclick="switchForm()">Register</h1>
  74.             <form id="register-form" class="register-form hidden NAV" data-type="register">
  75.                 <h2 class="tooltip-header">REGISTER</h2>
  76.                 <a class="close-btn" onclick="closeForm()">X</a>
  77.                 <label for="new email">Email:</label><br>
  78.                 <input type="email" id="new email" name="regEmail" required><br>
  79.                 <label for="new password">Password:</label><br>
  80.                 <input type="password" id="new password" name="regPassword" required><br>
  81.                 <label for="regConfirmPassword">Confirm Password:</label><br>
  82.                 <input type="password" id="regConfirmPassword" name="regConfirmPassword" required><br>
  83.                 <a id="submitR" value="SUBMIT" class="submit-btn" onclick="signup()">submit</a>
  84.             </form>
  85.         </right>
  86.     </div>
  87. </nav>
  88.         `;
  89.  
  90.         document.body.appendChild(homeElement);
  91.     }
  92.  
  93.     createElementWithContent();
  94. });