<li><a href="/business">Business</a></li>
<li><a href="/travel">Travel</a></li>
</ul>
</nav>
</header>Clickingthebuttonelementcausestheelementtoslideintoview.Nowforour
(edited)CSS:
header {
background: #222629;
color: whitesmoke;
position: fixed;
top: 0;
width: 100%;
}
nav {
background: #222629;
position: absolute;
width: 100%;
left: 0;
top: -33vw;
transition: top 500ms;
}
.open {
top: 9vw;
}ThisCSSabovecreatesamenuthatslidesdownfromthetopwhentriggered.But
asitslidesin,itpassesovertheAwesomeNewslogoasyoucanseeinFigure4.11.
Complex Layouts 143