showing results for - "dynamic navigation toggle button"
Clara
04 Nov 2019
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