menu
The slide-out menu is a fixed panel with internal scrolling. We used button elements to keep the DOM similar and have added a couple new custom properties to optimize this structure.
| Property | |
|---|---|
| --bc | button text color |
| --bbc | button background color |
A large portion of the menu is a simple stack of expander elements and will require Javascript to toggle the “open” class. The menu will slide out on a similar class toggle of “open”. For this demo we created a simple navigation.js file to hold the functions. Originally made for modals, the “freeze” class can be added to the body element to stop scrolling on most devices when the menu is open.
EXAMPLE
The menu is included in the story deck and is better represented there.
Click the hamburger menu in the flag to open it.
HTML
<div id="main-nav" class="main-nav sans summary impact">
<button class="summary flex" onclick="closeNavigation()">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z" fill="white"/></svg>
<span class="h5 icon-label">SECTIONS</span>
</button>
<a href="#">
<img src="https://www.kansascity.com/wps/build/images/widgets/navigation/eedition-logo-white.svg">
</a>
<div class="search flex" onclick="this.classList.add('open')">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>
<span class="h5 icon-label soft">Search</span>
<form action="#" class="flex">
<input type="text" name="q" placeholder="Search" aria-label="">
<button type="submit" aria-label="Search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"/></svg>
</button>
</form>
</div>
<a href="#">Home</a>
<div class="subsection">
<button class="summary expander" onclick="this.classList.toggle('open')">News</button>
<div>
<a href="#">Subsection 1</a>
<a href="#">Subsection 2</a>
<a href="#">Subsection 3</a>
<a href="#">Subsection 4</a>
<a href="#">Subsection 5</a>
<span class="option-label">Blogs & columns</span>
<a href="#">Subsection 1</a>
<a href="#">Subsection 2</a>
<a href="#">Subsection 3</a>
<a href="#">Subsection 4</a>
<a href="#">Subsection 5</a>
</div>
</div>
<div class="subsection">
<button class="summary expander" onclick="this.classList.toggle('open')">Sports</button>
<div>
<a href="#">Subsection 1</a>
<a href="#">Subsection 2</a>
<a href="#">Subsection 3</a>
<a href="#">Subsection 4</a>
<a href="#">Subsection 5</a>
</div>
</div>
<div class="subsection">
<button class="summary expander" onclick="this.classList.toggle('open')">Politics</button>
<div>
<a href="#">Subsection 1</a>
<a href="#">Subsection 2</a>
<a href="#">Subsection 3</a>
<a href="#">Subsection 4</a>
<a href="#">Subsection 5</a>
</div>
</div>
<div class="subsection">
<button class="summary expander" onclick="this.classList.toggle('open')">Business</button>
<div>
<a href="#">Subsection 1</a>
<a href="#">Subsection 2</a>
<a href="#">Subsection 3</a>
<a href="#">Subsection 4</a>
<a href="#">Subsection 5</a>
</div>
</div>
<div class="subsection">
<button class="summary expander" onclick="this.classList.toggle('open')">Living</button>
<div>
<a href="#">Subsection 1</a>
<a href="#">Subsection 2</a>
<a href="#">Subsection 3</a>
<a href="#">Subsection 4</a>
<a href="#">Subsection 5</a>
</div>
</div>
<div class="subsection">
<button class="summary expander" onclick="this.classList.toggle('open')">Entertainment</button>
<div>
<a href="#">Subsection 1</a>
<a href="#">Subsection 2</a>
<a href="#">Subsection 3</a>
<a href="#">Subsection 4</a>
<a href="#">Subsection 5</a>
</div>
</div>
<div class="subsection">
<button class="summary expander" onclick="this.classList.toggle('open')">Opinion</button>
<div>
<a href="#">Subsection 1</a>
<a href="#">Subsection 2</a>
<a href="#">Subsection 3</a>
<a href="#">Subsection 4</a>
<a href="#">Subsection 5</a>
</div>
</div>
<hr>
<a href="#">Mobile & Apps</a>
<a href="#">Niche pub</a>
<a href="#">Niche pub</a>
</div>