<blockquote class="quote"><div class="op">Quote:</div><!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="width=device-width, initial-scale=1" name="viewport" /> <title>324SQN - City of Randwick</title> <link rel="stylesheet" href="StyleSheet1.css" /> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"> </head> <body> <section class="Header"> <nav> <a href="index.html"><img src="Images/Logo.png" /></a> <a href="index.html" class="banner"><img src="Images/Sologan.png" /></a> <div class="nav-Links" id="navLinks"> <ul> <li> <a href="Home.html">Home</a> </li> <li> <a href="About.html">About Us</a> </li> <li class="click2"> Recruiting <div class="Sub-menu-2"> <ul> <li><a href="#">Number 1</a></li> <li><a href="#">Number 2</a></li> </ul> </div> </li> <li> <a href="Contact.html">Contact Us</a> </li> <li> <a href="">Leave Request</a> </li> <li class="click"> CadetLinks <div id="navLinks1" class="Sub-menu-1"> <ul> <li><a href="#">Number 1</a></li> <li><a href="#">Number 2</a></li> <li><a href="#">Number 3</a></li> </ul> </div> </li> </ul> </div> ^__i class="fas fa-bars" onclick="showMenu()"> </nav> <div class="Header-Text"> <h1>Number 324 (City of Randwick) Squadron</h1> <p>Educate, Challenge, Excites</p> <a href="" class="Button">Click Here To Know More</a> </div> </section> <script src="Script1.js"></script> </body> </html></blockquote> <pre lang="text"> <pre lang="CSS" linecount="on"> nav{ display:flex; padding: 2% 2% 0 2%; justify-content:space-between; align-items:center; } .nav-Links { flex: 1; text-align: right; } .nav-Links ul li { list-style: none; display: inline-block; padding: 8px 12px; position: relative; color: white; text-decoration: none; font-size: 115%; } .nav-Links ul li a { color: white; text-decoration: none; font-size: 105%; } .nav-Links ul li::after { content: ''; width: 0%; height: 3px; background: royalblue; display: block; margin: auto; transition: 0.5s; } .nav-Links ul li:hover::after{ width:100%; } nav .fas{ display:none; } .Sub-menu-1, .Sub-menu-2 { display: none; } .NewSub-menu-1, .NewSub-menu-2 { display: block; position: absolute; } .NewSub-menu-1 ul, .NewSub-menu-2 ul { display: block; position: absolute; transition: 2s; } .nav-Links ul li .Sub-menu-1 ul li, .nav-Links ul li .Sub-menu-2 ul li { width: 110px; padding: 5px; background: transparent; border-radius: 0; text-align: left; } .fas.fa-chevron-left { display: inline-block; padding-left: 5px; } .nav-Links.active .fas.fa-chevron-left { transform: rotate(-90deg); transition:1s; } .nav-Links2.active .fas.fa-chevron-left { transform: rotate(-90deg); transition:1s; }
1 let click = document.querySelector('.click'); 2 3 let list = document.querySelector('.Sub-menu-2'); 4 5 6 7 8 document.getElementById('navLinks1').onclick = function () { 9 10 var className = ' ' + navLinks1.className + ' '; 11 12 this.className = ~className.indexOf(' active ') ? 13 className.replace(' active ', ' ') : 14 this.className + ' active'; 15 }; 16 click.addEventListener("click", () => { 17 18 list.classList.toggle('NewSub-menu-2'); 19 20 21 }); 22 23 let click2 = document.querySelector('.click2'); 24 25 let list2 = document.querySelector('.Sub-menu-1'); 26 27 28 29 30 document.getElementById('navLinks').onclick = function () { 31 32 var className = ' ' + navLinks.className + ' '; 33 34 this.className = ~className.indexOf(' active ') ? 35 className.replace(' active ', ' ') : 36 this.className + ' active'; 37 }; 38 click2.addEventListener("click", () => { 39 40 list2.classList.toggle('NewSub-menu-1'); 41 42 43 });
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)