Using lists to make menus

Lists are the basis for navigation and menus and come in three styles: unordered, ordered and definition. It is the unordered form that we manipulate with CSS to create menus.We will use an unordered list to create the main menu in our website, which will run  horizontally across the header.

 

<!-- Begin Navigation -->
<nav>
<ul id="menu-items">
<li><a class="active" href="index-4.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="porfolio.html">Portfolio</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<!-- End Navigation -->

Link states

There are four basic states that we can create when thinking our link styles. In the CSS, they must appear in this order. You do not need to specify all four, but you should specify one and two.

  1. a:link: is the state of the default link
  2. a:visited: is the state when you have previously viewed that link’s page
  3. a:hover: is the state of the rollover effect for that link
  4. a:active: is the state of the link when it is being clicked
 

nav a:link { color: #85898A; text-decoration: none; }
nav a:visited { color: #85898A; text-decoration: none; }
nav a:hover { color: #F20017; text-decoration: underline; }
nav a:active { color: #F20017; text-decoration: underline; }

Changing a block item so it appears inline

We want our menu links to appear in a single-file horizontal row. And we want to remove the bullets. To do that, we have to use CSS.

There are two ways that we can create a horizontal navigation bar: we can force the list items to display inline or we can make them float.

Two videos from Lynda.com are key: a review of the box model and introduction of float and display

We’re going to use the W3C tutorial on creating a horizontal navigation bar using CSS. It is composed of two parts: the CSS and the unordered list from above. The result will look something like this.

  1. Open your HTML template. Save it as menu-demo.html
  2. Copy & paste the stylesheet inside the HEAD tags (see below)
  3. Create a new external style sheet (class-5.css) and reference it in the HEAD.
  4. Paste the new body copy.
  5. Upload the CSS file into the scripts directory.
  6. Upload the HTML file in working! The URLS should look something like this: http://faculty.washington.edu/kegill/working/menu-demo.html

This is the CSS we are placing in the HEAD of our new HTML document, demo-index-5.html

 

<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;}

li {
    float: left;
}

li a {
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #ddd;
}

li a.active {
    color: white;
    background-color: #4CAF50;
}
    
li {
    border-right: 1px solid #bbb;
}

li:last-child {
    border-right: none;
}

</style>

We need a new external style sheet, class-5.css.

Remember, we upload it to the scripts folder and reference it in the HTML document head thusly:

 

<link rel="stylesheet" href="/kegill/hcde532/scripts/class-5.css">

 

body {
    font-family: sans serif;
    font-size: 1em;
    background-color:darkblue;
    }

#content {
    width: 940px;
    margin: 0 auto;
    padding: 0 20px;
}
    
#main {
    background-color: #fff;
    padding: 0 20px;
}

footer {
    width: 940px;
    margin: 0;
    padding: 0px;
    background-color: #000;
}

.footerText {
    color: #fff;
    padding: 20px;
    margin: 20px;
}

Here is revised copy for the body of our document.

 

<!-- begin content container -->
<div id="content"> 
    
<header>
<div id="logo"><strong style="color:aliceblue;">LOGO here</strong></div>
<!-- Begin Navigation -->
<nav>
<ul id="menu-items">
<li><a class="active" href="index-4.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="porfolio.html">Portfolio</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<!-- End Navigation -->
</header>

<div id="main">
<section>
<h1>Header 1</h1>

<h2>Header Level 2</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h3>Header Level 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>

      
</section> 
</div>    


<!-- Begin Footer -->
<footer>
<p class="footerText">©2018 Your Name Here. All rights reserved.</p>
</footer>
<!-- */End Footer -->
    
</div>
<!-- */End Content Container -->