1// Dynamically size mobile drop down navigation bar
2// HTML BELOW
3const navToggle = document.querySelector(".nav-toggle");
4const linksContainer = document.querySelector(".links-container");
5const links = document.querySelector(".links");
6
7navToggle.addEventListener("click", function () {
8 const containerHeight = linksContainer.getBoundingClientRect().height;
9 const linksHeight = links.getBoundingClientRect().height;
10 if (containerHeight === 0) {
11 linksContainer.style.height = `${linksHeight}px`;
12 }
13 else {
14 linksContainer.style.height = 0;
15 }
16});
17
18// HTML
19
20 <div class="links-container" style="height:0px;">
21 <ul class="links">
22 <li>
23 <a href="#home" class="scroll-link">home</a>
24 </li>
25 <li>
26 <a href="#about" class="scroll-link">about</a>
27 </li>
28 <li>
29 <a href="#services" class="scroll-link">services</a>
30 </li>
31 <li>
32 <a href="#tours" class="scroll-link">tours</a>
33 </li>
34 </ul>
35
36 </div>
37
38
39
40
41