Spruce Up Your site’s navigation

Chapter 9 Spruce Up Your site’s navigation

Links • When styling a link, you must tell CSS both what you want to style, and when you want the style to happen • Web browsers keep track of how a visitor interacts with links, and then displays the link differently depending on the link’s status or state.

Understanding Link States • Most browsers recognize four basic link states: • Unvisited • Visited • Mouse over • Clicked • CSS provides four pseudo-class selectors for these states: • :link :visited :hover :active (:focus firefox & safari only)

TIP • Want to change the text color of an unvisited link from boring blue to glaring orange? • a:link {color: #f60; } • Once visited, the state changes to a purple, but you want to change it to a vivid red! • a:visited {color: #900; } • What if you wanted to style both? • a:link a:visited (use a group selector)

:hover offers the greatest possibilities! • When a mouse passes over a link, you can style that link any way you want. • You can use any of the CSS properties you wish: • no underline/underline/bold/italic • color changes (active/inactive) • style changes (uppercase/lowercase/spread) • background changes (color/graphic)

Think LoVe/HAte • For those designers who leave no stone unturned: • a:active {color: #b2f511;} • You can ALWAYS use a .class selector to pinpoint any link (or group of links) on a web page. • Link states must be in a particular order: • a:link • a:visited • a:hover • a:active

EXAMPLES: • With a class selector named external: • a.external:link {color: #f60;} • a.external:visited {color: #900;} • Leave off the a, and only specifying the class: • .external:link {color: #f60;} • .external:visited {color: #900;}

Use Descendent Selectors • Target a tag that appears within another tag: • Wrap the link in a <div> and apply a class or ID: • #mainNav a:link {color: #f60;} • #mainNav a:visited {color: #900;} • These properties give you the what and when to style. • They do not give you the how to style

Styling Links • Make a link look like a button • add a border • add a background color or graphic • add a highlight (color change on mouse over) • Lets start with UNDERLINING

Underlining Links • Remove the underline: • a:link {text-decoration: none;} • Underline on mouse over: • a:link, a:visited { text-decoration: none; background-color: #f00;} • a:hover { background-color: transparent; text-decoration: underline; }

Underlining Continued • Use a bottom border: • a { text-decoration: none; border-bottom: dashed 2px #9f3; } • Use a background image: • a { text-decoration: none; background: url(images/underline.gif) repeat-x left bottom padding-bottom: 5px; }

Create a Button • The main style elements are • border, background-color, and padding • Add a class and a border to create a basic box around your link: • a.button { border: solid 1px #000;} • Add a background color: • a.button { border: solid 1px #000; background-color: #333;}

Fancy Borders = Fancy Buttons • All four borders do not have to be the same width, type, or color • You don’t even have to have 4 borders • Add a beveled look using different border colors • a.button { • background: #b1b1b1; • color: #fff; • font-width: 4px;

Beveled Look Continued • a:button { • background: b1b1b1; • color: #fff; • font:weight: bold; • border-width: 4px; • border-style: solid; • border-top-color: #dfdfdf; • border-right-color: #666; • border-bottom-color: #333; • border-left-color: #858585;}

Use Graphics • Use the background image property: • don’t forget no-repeat • control placement with background-position • for the best placement, use a specific value such as pixels or ems • combine with percentages for vertical placement • background-position: 10px 50%; • (first value is horizontal, the second vertical) • padding gives you room • Remember, a link is an inline element, adding top/bottom padding has no effect. Change to a block

Building Navigation Bars • Use an unordered list • The XHTML for a navigation bar is simple • <ul class=“nav”> • <li><a href=“index.html”>Home </a></li> • <li><a href=“news.html”>News</a></li> • <li><a href=“reviews.html”>Reviews</a>,/li> • </ul>

Nav Bars Continued • The CSS varies depending on whether your want a horizontal or vertical navigation bar. • Remove the bullets: ul.nav {list-style-type: none;} • Eliminate padding and margins: ul.nav { list-style-type: none; padding-left: 0; margin-left: 0;} • This makes the list look like a plain block-level element

Vertical Navigation Bars • A bunch of links stacked one on top of the next. • Removing bullets, padding and margins get you almost there. • Now you want to actually style the link. • display as a block • this gives each button the same width • makes the entire area clickable • Constrain the width • if you don’t, the button will extend the width of the page

ul.nav a { • display: block; • width: 8em;} • You would not have to set a width if the buttons are set within a constraining element such as a side bar, or div. • However, when you don’t set a width, IE will have trouble with the link and displays large gaps. If you set a width, this won’t happen.

Horizontal Navigation Bars • Use display: inline; • Make sure you don’t have too many buttons, or they will wrap • Style them as you would vertical links • Add top and bottom padding to the <ul> tag as well as the <li> tag. This adds space to accommodate any borders or backgrounds you have added. • To make the horizontal bar appear in the center of the page, add text-align: center;

Pop-Up Menus • Son of Suckerfish • Multi-Level Drop Down • Vertical Drop Down with Pop Up • Free Java Script Menus • Ultimate Drop Down Menu

Using Floats for Horizontal Navigation Bars • Although using the display: inline; is simple • Has one flaw: There is no way to create equally sized buttons. setting a width on either the <li> or <a> tag has no effect • Nav bars made up of floated elements are difficult to center

Float the List Items • Add float: left to the <li> tags • ul.nav li {float: left;} • The floated list items slide right next to each other • Add display: block to the links • ul.nav a {display: block;} • Style the links • Add a width to the <a> tag using ems • To center the text in the middle of the button, add text-align: center to the link’s style.

See Page 226 for the Code: • If you place a border, background color, or an image , on the <li> float the <ul> tag also. • If you don’t, the list items float OUTSIDE the <ul> and you get an overflow • Because the <ul> is floated, the text or elements below may try to wrap around the nav bar. • To prevent: apply the clear property to the element following the <il>

Where Do I Get Help? • List Tutorial • Cool List Based Designs • List Tabs (Like Amazon) • List-o-Matic Wizard

Spruce Up Your site’s navigation