CPD CS-12 Advanced Web Design For Teachers

CPD CS-12 Adv. Web Design for Teachers << CSS Styled Navigation >>

Tobias Gelston, <Tobiasg@gmail.com>

Mode: Static :: Switch to Presentation

The Mighty List

Bow Before its Magnificence!

Code

<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>

Looks like:

lists for navigation

Using Lists for Navigation

Where to?

Code View: 

<div id="navcontainer">

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</div>

Not impressed? Hang on for 5. . . 4. . . 3. . . 2. . 1

styling lists

Styling the List

A Dash of Style 

#navcontainer ul{
		margin-left: 0;
		padding-left: 0;
		list-style-type: none;
}

Output

#navcontainer a{ 
		display:block;
			width: 160px;
		border: 1px solid #000;
}

Output

style lists p2

Styling the List (Part II)

A Splash of Color

Add a background color 

#navcontainer a{ 

		background-color: #036;	
}

Keep visited links looking the same 

#navcontainer a:link, #navcontainer a:visited{ 
	text-decoration: none;
	color: #fff;
	}

Add a simple color change on rollover (hover) 

		#navcontainer a:hover{
	background-color: #0066FF;
	}

Output

horizontal

Horizontal

Make that menu S T R E T C H!

A few quick tweaks and your navigation will become horizontal (across the page): 

#navcontainer ul{
padding-left: 0;
margin-left: 0;
float: left;
width: 100%;
}
#navcontainer ul li{
display: inline;
}
#navcontainer ul li a{
float: left;
padding: 5px;
}

Output

list matic

Don't Memorize

Just Memorize This

LIST _ MATIC!