Chapter 9 Sprucing up Your sites Navigation

Class Site Designs:

• Global JavaScript file for header and footer
• localLink.js for local links, links within a class folder
• css.js that selects the design,
• individual design use CSS to create buttons (positioning, borders, backgrounds, text-decoration)

Tutorial: Styling Links Page 302

Basic Link Formatting

1. Copy data/09/links/ to "localsiteroot"/09/links Folder open links.html
2. Code view find internal <style> block
3. add...
   a {
   color: #207EBF;
   }
4. to a add text-decoration: none;
5. to a add font-weight: bold;
6. add boder..
   a {
   color: #207EBF;
   text-decoration: none;
   font-weight: bold;
   border-bottom: 2px solid #F60;
   }
7. Add a :visited pseudo-class style for visited links:
   a:visited {
   color: #6E97BF;
   }
8. Add a :hover pseudo-class style to the style sheet:
   a:hover {
   color: #FFF;
   background-color: #6E97BF;
   border-bottom-color: #6E97BF;
   }

Add a Background Image to a Link page 305

1. Add a descendant selector to the internal style sheet of the links.html file:
   a[href^="mailto:"] {
   color: #666666;
   border: none;
   background: url(images/email.gif) no-repeat left center;
   } /*select link with href="mailto" */
2. Add 20 pixels of left padding to the attribute style you just created:
   padding-left: 20px;
3. Add 10 pixels of left margin to the style, so it finally ends up like this:
   a[href^="mailto:"] {
   color: #666666;
   border: none;
   background: url(images/email.gif) no-repeat left center;
   padding-left: 20px;
   margin-left: 10px;
   }
   

Highlighting Different Links page 307

1. .resources a {
   border-bottom: none;
   }/* class=resources */
2. local links don't have :// they are just folder/filename
   .resources a[href*='://'] {
   background: url(images/globe.png) no-repeat right top;
   }
3. Edit the .resources a style so that it looks like this:
   .resources a {
   border-bottom: none;
   padding-right: 22px;
   }
4. Add three more styles to the internal style sheet:
   .resources a[href$='.pdf'] {
   background: url(images/acrobat.png) no-repeat right top;
   }
   .resources a[href$='.zip'] {
   background: url(images/zip.png) no-repeat right top;
   }
   .resources a[href$='.doc'] {
   background: url(images/word.png) no-repeat right top;
   }
5. Finally, add a hover state for the resources links:
   .resources a:hover {
   color: #000;
   background-color: rgba(255,255,255,.8);
   }
   

Tutorial: Creating a Navigation Bar, Page 308

1. open 09/nav_ba/nav_bar.html.
2. Locate the opening <ul> tag and add class=”mainNav” to it, so it looks like
   this:
   <ul class=”mainNav”>
   
   For jQuery menu and other systems ul/li are typical Menu lists (see certificate)
3. Below the body style in the internal style sheet, add a new style:
   .mainNav {
   margin: 0;
   padding: 0;
   list-style: none;
   }
4. Add a descendant selector to format the links in the list:
   .mainNav a {
   color: #000;
   font-size: 11px;
   text-transform: uppercase;
   text-decoration: none;
   }
5. To the .mainNav a style, add the following border and padding properties:
   border: 1px dashed #999;
   padding: 7px 5px;
6. Add display: block; to the .mainNav a style.
7. In the internal style sheet, locate the .mainNav style and add width: 175px;
   to it:
   .mainNav {
   margin: 0;
   padding: 0;
   list-style: none;
   width: 175px;
   }
8. Add background properties to the .mainNav a style, like so:
   .mainNav a {
   color: #000;
   font-size: 11px;
   text-transform: uppercase;
   text-decoration: none;
   border: 1px dashed #999;
   padding: 7px 5px;
   display: block;
   background-color: #E7E7E7;
   background-image: url(images/nav.png);
   background-repeat: no-repeat;
   background-position: 0 2px;
   }
9. Remove the bottom border and adjust the padding for the .mainNav a style,
   so it looks like this:
   .mainNav a {
   color: #000;
   font-size: 11px;
   text-transform: uppercase;
   text-decoration: none;
   border: 1px dashed #999;
   border-bottom: none;
   padding: 7px 5px 7px 30px;
   display: block;
   background-color: #E7E7E7;
   background-image: url(images/nav.png);
   background-repeat: no-repeat;
   background-position: 0 2px;
   }
10. Add the following style between .mainNav and the .mainNav a styles:
    .mainNav li:last-of-type a {
    border-bottom: 1px dashed #999;
    }

Adding Rollovers And Creating "You are here" Links (breadcrumbs)

1. In the nav_bar.html file, add the following style to the end of the style sheet:
   .mainNav a:hover {
   font-weight: bold;
   background-color: #B2F511;
   background-position: 3px 50%;
   } /* by changing background position we have the next image in the file nav.png */
2. Locate the <body> tag, and then add class="home", like so:
   <body class="home">
3. In the nav bar’s HTML code, locate the Home link, and then add
   class="homeLink" so the tag looks like this:
   <a href="/index.html" class="homeLink">Home</a>
4. Repeat step 3 for each of the other links using the following classes: featureLink,
   expertLink, quizLink, projectLink, and horoscopeLink.
5. Add another style to the page’s style sheet:
   .home .homeLink {
   background-color: #FFFFFF;
   background-position: 97% 100%;
   padding-right: 15px;
   padding-left: 30px;
   font-weight: bold;
   }
   
6. Edit the selector for the style you just added, like so:
   .home .homeLink,
   .feature .featureLink,
   .expert .expertLink,
   .quiz .quizLink,
   .project .projectLink,
   .horoscope .horoscopeLink{
   background-color: #FFFFFF;
   background-position: 97% 100%;
   padding-right: 15px;
   padding-left: 30px;
   font-weight: bold;
   }
7. Change the class attribute of the <body> tag to feature like this:
   <body class="feature">

From Vertical to Horizontal

1. open nav_bar.html
2. Find the .mainNav style, and then remove the width: 175px; declaration.
3. Add a new style to your style sheet (directly below the .mainNav style is a
   good spot):
   .mainNav li {
   float: left;
   width: 12em;
   }
4. In the .mainNav a style, change border-bottom: none; to border-right:
   none;.
5. Change the border-bottom property of the .mainNav li:last-of-type a style
   to border-right like this:
   .mainNav li:last-of-type a {
   border-right: 1px dashed #999;
   }
6. Locate the “You are here” style you created in step 6 on page 314. (It’s the
   one with the crazy, long-winded selector.) Change its background position
   from 97% 100% to 3px 100%. The style should now look like this:
   .home .homeLink,
   .feature .featureLink,
   .expert .expertLink,
   .quiz .quizLink,
   .project .projectLink,
   .horoscope .horoscopeLink
   {background-color: #FFFFFF;
   background-position: 3px 100%;
   padding-right: 15px;
   padding-left: 30px;
   font-weight: bold;
   }