The Final Lab... or Just the Beginning??

Lab 10

Make sure you are checked off for all previous labs!!!

TA Evaluations

Go to http://ieval.ucr.edu to evaluate your TA... and remember, TAs are people too!!

Final Project

For those of you that want to skip ahead to the final project specs, click here.

The last lab is here to give you extra time to work on your final project and get some help from the TAs either uploading your files, validating your code, or adding additional things. For those of you using the CSS navigation bar for your final project, here are a few things to make it even more snazzy!!

Local Links

Ok, I partially lied... this part is for pretty much everybody. You may have seen those links that magically jump you to different parts of the page. Like this one, which will bring you to the bottom of the page. In order to do that, there are two things you need:

The link (duh!!)

<a href="#bottom">Go to the bottom</a>

*Which goes where ever you want your link at (double duh!!)

And the destination

*Which goes where on the page you want to jump to

Notice how the link has a '#' in front of the name (which you can name anything your heart desires). This is to tell the web browser that it is jumping around in the same page, rather than jumping to another page. Just make sure they have the same names

Page Icons

If you noticed next to your address bar you might be wondering, "how did he get that icon in there?" Well, here it is:

Let's assume you want to make this image your icon:
licking kitty

images/lick.gif

You would just include this link tag:

*Obviously, you would change what is in the href field depending on your image, and I leave it to you to figure out where in the html code you put it.

And that's it!! Just make sure to use a small picture that you can actually see, since the icon is really really small.

Drop down menus

In your navigation bar, lets say you have more than just one thing per page that you want to go to... lets take for example lab 10: I have the regular list of links and in addition I have a list for lab 10 that includes the intro, local links, and drop down menus

   <ul>
   <li><a href="lab1.htm">lab 1</a></li>
       <li><a href="lab2.htm">lab 2</a></li>
       <li><a href="lab3.htm">lab 3</a></li>
       <li><a href="lab4.htm">lab 4</a></li>
       <li><a href="lab5.htm">lab 5</a></li>
       <li><a href="lab6.htm">lab 6</a></li>
       <li><a href="lab7.htm">lab 7</a></li>
       <li><a href="lab8.htm">lab 8</a></li>
       <li><a href="lab9.htm">lab 9</a></li>
       <li><a href="lab10.htm">lab 10</a>
         <ul>
            <li><a href="#top">Intro</a></li>
            <li><a href="#local">Local Links</a></li>
            <li><a href="#drop">Drop Down Menus</a></li>
         </ul>
      </li>
    </ul>

*If you don't know what the '#' does for the links, click here.

Simple reality: a dropdown menu is really just a list that is not displayed most of the time. We will only display that list when the mouse is over it.

Going off of lab 7, I am adding one thing to this list:

   <ul id="nav">
   <li><a href="lab1.htm">lab 1</a></li>
       <li><a href="lab2.htm">lab 2</a></li>
       <li><a href="lab3.htm">lab 3</a></li>
       <li><a href="lab4.htm">lab 4</a></li>
       <li><a href="lab5.htm">lab 5</a></li>
       <li><a href="lab6.htm">lab 6</a></li>
       <li><a href="lab7.htm">lab 7</a></li>
       <li><a href="lab8.htm">lab 8</a></li>
       <li><a href="lab9.htm">lab 9</a></li>
       <li><a href="lab10.htm">lab 10</a>
         <ul>
            <li><a href="#top">Intro</a></li>
            <li><a href="#local">Local Links</a></li>
            <li><a href="#drop">Drop Down Menus</a></li>
         </ul>
      </li>
    </ul>

*the other ID stuff from lab 7 was fluff... you can remove it if you want

That's all you need in the html!!! Now to the style.css...

New additions to old stuff:

#nav li {
    display:inline block;
    float:left;
    padding:0;
    margin:0;
    list-style:none;
}

And the completely new stuff:

#nav li ul {
   display: none;
   position: absolute;
   margin: 0px;
   padding: 0;
   border: 5px solid #222;
   background: #222;
}

#nav li:hover ul,
#nav li.sfhover ul {
   display: block;
}

#nav li ul li {
   float: none;
   padding: 0;
}

*Stuff in blue you can mess around with for spacing, colors, etc.

The first tag effects the list inside the list: making sure it doesn't display.
The second tags effect the list so they display in a block when you put your mouse over them.
The third tag is there to control where each of the list elements displays

And there you have it!! A page with drop down menus!! Here is what this page should look like

Top