The navigation bar consists of a <nav>
element with a "top-bar"
class applied to it. Nested within the <nav>
element is a <section>
element with a "top-bar-section"
class applied. Finally, within the <section>
element is an unordered list with a list of links.
Adding "data-topbar"
to the "nav"
element ensures that the top-bar functions correctly via JavaScript, as shown in the following code:
<nav class="top-bar" data-topbar> <section class="top-bar-section"> <ul> <li><a href="#">Nav 1</a></li> <li><a href="#">Nav 2</a></li> <li><a href="#">Nav 3</a></li> <li><a href="#">Nav 4</a></li> <li><a href="#">Nav 5</a></li> </ul> </section> </nav>
Next, we will give the first list item an active class; we do this...