COMP 126: Practical Web Design & Development for Everyone
navigation with lists & links
lists
unordered lists: <ul> and <li>
ordered lists: <ol> and <li>
description list: <dl>, <dt>, <dd>
1. create an unordered list
<nav>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>2. place an <a> element within each LI
<nav>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</nav>3. Add the text for each nav item to the <a>
<nav>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">products</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>4. style! REmember:
most styling goes on the a, but you have to style the ul and li to position the a
5. style interactions! REmember:
you need both a:hover and a: focus for accessibility
simple nav with hover
navigation with dropdown & Classes
make a nav like this!
on hover & focus:
at top of viewport:
126-Links, Lists, & Navigation
By tkjn
