API tools faq
paste
Advertisement
hungvb

MENU NANG CAO

hungvb
Jan 19th, 2022
122
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.41 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!-- Created By CodingNepal -->
  3. <html lang="en" dir="ltr">
  4.    <head>
  5.       <meta charset="utf-8">
  6.       <title>Advanced Drop-down Menu | CodingNepal</title>
  7.       <link rel="stylesheet" href="style.css">
  8.       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
  9.    </head>
  10.    <body>
  11.       <nav>
  12.          <div class="drop-btn">
  13.             Drop down <span class="fas fa-caret-down"></span>
  14.          </div>
  15.          <div class="tooltip"></div>
  16.          <div class="wrapper">
  17.             <ul class="menu-bar">
  18.                <li>
  19.                   <a href="#">
  20.                      <div class="icon">
  21.                         <span class="fas fa-home"></span>
  22.                      </div>
  23.                      Home
  24.                   </a>
  25.                </li>
  26.                <li class="setting-item">
  27.                   <a href="#">
  28.                      <div class="icon">
  29.                         <span class="fas fa-cog"></span>
  30.                      </div>
  31.                      Settings & privacy <i class="fas fa-angle-right"></i>
  32.                  </a>
  33.               </li>
  34.               <li class="help-item">
  35.                  <a href="#">
  36.                     <div class="icon">
  37.                        <span class="fas fa-question-circle"></span>
  38.                     </div>
  39.                     Help & support <i class="fas fa-angle-right"></i>
  40.                  </a>
  41.               </li>
  42.               <li>
  43.                  <a href="#">
  44.                     <div class="icon">
  45.                        <span class="fas fa-user"></span>
  46.                     </div>
  47.                     About us
  48.                  </a>
  49.               </li>
  50.               <li>
  51.                  <a href="#">
  52.                     <div class="icon">
  53.                        <span class="fas fa-comment-alt"></span>
  54.                     </div>
  55.                     Feedback
  56.                  </a>
  57.               </li>
  58.            </ul>
  59.            <!-- Settings & privacy Menu-items -->
  60.            <ul class="setting-drop">
  61.               <li class="arrow back-setting-btn"><span class="fas fa-arrow-left"></span>Settings & privacy</li>
  62.               <li>
  63.                  <a href="#">
  64.                     <div class="icon">
  65.                        <span class="fas fa-user"></span>
  66.                     </div>
  67.                     Personal info
  68.                  </a>
  69.               </li>
  70.               <li>
  71.                  <a href="#">
  72.                     <div class="icon">
  73.                        <span class="fas fa-lock"></span>
  74.                     </div>
  75.                     Password
  76.                  </a>
  77.               </li>
  78.               <li>
  79.                  <a href="#">
  80.                     <div class="icon">
  81.                        <span class="fas fa-address-book"></span>
  82.                     </div>
  83.                     Activity log
  84.                  </a>
  85.               </li>
  86.               <li>
  87.                  <a href="#">
  88.                     <div class="icon">
  89.                        <span class="fas fa-globe-asia"></span>
  90.                     </div>
  91.                     Languages
  92.                  </a>
  93.               </li>
  94.               <li>
  95.                  <a href="#">
  96.                     <div class="icon">
  97.                        <span class="fas fa-sign-out-alt"></span>
  98.                     </div>
  99.                     Log out
  100.                  </a>
  101.               </li>
  102.            </ul>
  103.            <!-- Help & support Menu-items -->
  104.            <ul class="help-drop">
  105.               <li class="arrow back-help-btn"><span class="fas fa-arrow-left"></span>Help & support</li>
  106.               <li>
  107.                  <a href="#">
  108.                     <div class="icon">
  109.                        <span class="fas fa-question-circle"></span>
  110.                     </div>
  111.                     Help centre
  112.                  </a>
  113.               </li>
  114.               <li>
  115.                  <a href="#">
  116.                     <div class="icon">
  117.                        <span class="fas fa-envelope"></span>
  118.                     </div>
  119.                     Support Inbox
  120.                  </a>
  121.               </li>
  122.               <li>
  123.                  <a href="#">
  124.                     <div class="icon">
  125.                        <span class="fas fa-comment-alt"></span>
  126.                     </div>
  127.                     Send feedback
  128.                  </a>
  129.               </li>
  130.               <li>
  131.                  <a href="#">
  132.                     <div class="icon">
  133.                        <span class="fas fa-exclamation-circle"></span>
  134.                     </div>
  135.                     Report problem
  136.                  </a>
  137.               </li>
  138.            </ul>
  139.         </div>
  140.      </nav>
  141.      <script>
  142.         const drop_btn = document.querySelector(".drop-btn span");
  143.          const tooltip = document.querySelector(".tooltip");
  144.          const menu_wrapper = document.querySelector(".wrapper");
  145.          const menu_bar = document.querySelector(".menu-bar");
  146.          const setting_drop = document.querySelector(".setting-drop");
  147.          const help_drop = document.querySelector(".help-drop");
  148.          const setting_item = document.querySelector(".setting-item");
  149.          const help_item = document.querySelector(".help-item");
  150.          const setting_btn = document.querySelector(".back-setting-btn");
  151.          const help_btn = document.querySelector(".back-help-btn");
  152.            drop_btn.onclick = (()=>{
  153.              menu_wrapper.classList.toggle("show");
  154.              tooltip.classList.toggle("show");
  155.            });
  156.            setting_item.onclick = (()=>{
  157.              menu_bar.style.marginLeft = "-400px";
  158.              setTimeout(()=>{
  159.                setting_drop.style.display = "block";
  160.              }, 100);
  161.            });
  162.            help_item.onclick = (()=>{
  163.              menu_bar.style.marginLeft = "-400px";
  164.              setTimeout(()=>{
  165.                help_drop.style.display = "block";
  166.              }, 100);
  167.            });
  168.            setting_btn.onclick = (()=>{
  169.              menu_bar.style.marginLeft = "0px";
  170.              setting_drop.style.display = "none";
  171.            });
  172.            help_btn.onclick = (()=>{
  173.              help_drop.style.display = "none";
  174.              menu_bar.style.marginLeft = "0px";
  175.            });
  176.       </script>
  177.    </body>
  178. </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!