The Menu

To describe the functions of this menu would take a couple of pages. I've spent hours, more like days, trying to fix the little bugs that have crept into the menu HTML and CSS. I am no smarter today than I was when I first started playing with the code. Oh, yeah, I borrowed the original code from Stu Nicholl's www.cssplay.co.uk site. His demonstration version worked perfectly on both browsers. My version, with no difference in code, displays only slightly differently between browsers and between versions of browsers. Frustrating to say the least. Internet Explorer 6 shows a space between the header and menu while Internet Explorer and both Firefox versions don't. Internet Explorer 6 also fails to show the bottom line in the drop down menu consistently. I've tweaked until the cows come home and all I do is muss it up. I tried centering the page until the Firefox decided to start shifting the page to the left when you used the menu. Not very professional looking at that point, so I ditched that plan. Anyhow, I've compromised on a number of things to have a solid interface, such as the space and missing bottom line in the Internet Explorer 6 version. Time is the main consideration. I will continue to tweak after I finish the site.

Back to our fancy menu. The HTML for this menu uses unordered lists to create the effects and CSS to make items visible and styled. If the CSS wasn't used, the menu would look like a long laundry list of links. The hover property is used liberally throughout the menu code. This drives the displaying of the dropdown and slide out menus. The HTML contains code that distinguishes between versions of Internet Explorer to display and execute the code properly. The dropdown menu item properties are defined under a class called drop.

<div class="menu1">
  <ul>
    <li>
      <a class="menu1one" href="index.htm">Home</a>
    </li>
  </ul>

Because the first tab, Home, doesn't have any subordinate links, it contains a page reference to link to while the second tab, Projects, which has subordinate links, simply goes nowhere. Hovering the mouse over Projects will trigger the CSS that displays the submenu. The commented line below the line works around the buggy Internet Explorer 6 and earlier CSS rendering engine by placing the closing anchor tag below the subordinate links for versions before 7. The class in the Projects anchor simply gives the menu item a specific color.

  <ul>			
    <li>
      <a class="menu1two" href="#nogo">Projects
      <!--[if IE 7]><!--></a><!--<![endif]-->
        <table>
          <tr>
            <td>
              <ul>
                <li>
                  <a href="one.htm">One</a>
                </li>
                <li>

The drop simply tells the CSS that this is a menu item with a submenu. The CSS then adds the shading and little box and then creates a slideout menu when hovered over.

                  <a class="drop" href="two.htm">Two
                    <!--[if IE 7]><!--></a><!--<![endif]-->
                    <table><tr><td>
                      <ul>
                        <li><a href="two.htm#menu">CSS: Link Effects</a></li>
                        <li><a href="two.htm#browser">Java: Browser ID</a></li>
                        <li><a href="two.htm#bckgnd">Java: 
                                                                Background Color</a></li>
                      </ul>
                    </td></tr></table>
                  <!--[if lte IE 6]></a><![endif]-->
                </li>
              </ul>
            </td>
          </tr>
        </table>
      <!--[if lte IE 6]></a><![endif]-->
    </li>
  </ul>
</div> <!-- end of menu1 -->

In the CSS below, you can see where the display has been set to none to supress the submenu being displayed. The second snippet supresses the third level menu.

.menu1 ul li ul {
     display: none;
}
.menu1 ul li:hover ul li ul {
    display: none;
}

These tidbits of CSS show that when you hover your mouse over the menu, the display is activated with the block attribute. The last two tidbits show how color is used on the menu when the mouse is hovering over the main menu item. Notice that this item is menu1one which would be the Home tab.

.menu1 ul li:hover ul {
    display:block;
    position:absolute;
    top:32px;
    margin-top:1px; 
    left:0;
    width:154px;
    border-bottom:1px solid #000;
}
.menu1 ul li a.menu1one:hover {
    border-color:#c00; 
    color:#f88;
}
.menu1 ul li:hover a.menu1one {
    border-color:#c00; 
    color:#f88;
}

To best use and learn this code, grab a copy of the CSS and HTML from Stu's website, kludge it into your webpage and have fun. Be careful making changes to the CSS as it may have very unexpected results.

Code Snippets

How did he make those cool looking code snippets show on the page in color and without the code being rendered? Good question, would you believe smoke and mirrors? Slight of hand? I paid two monkeys to do it? No? Okay, well then let's look at how we got this to work. For this site to be of any value, you need to be able to display the code so that the viewer can relate the text to the code. Simply copying the code has very odd results as the browser will render the code rather than display it. To fix this, change the "<" and the ">" to text. In this case, the "<" becomes &lt; and the ">" becomes &gt;. This prevents the browser from seeing the text as HTML code.

How did you get it formatted so nicely? Gee, thanks. You can spend time creating all the invisible gifs of certain lengths that you can insert to create the indentation and then code those puppies into your page (which I did first), or, (pregnant pause) you can use the <pre> tag. The <pre> tag lets you put preformatted text into your page without fearing the results of the browser. But how did you get it in color and set up with a standard indent? That's where the CSS comes into play. Simply create a class or classes that have the properties you want the preformatted code to use. Biggest tip I can add here is use spaces in front of your code or text. Tabs display at different sizes depending on the browser and can have funky results.

pre.greenp {
    color: #3c0;
    border: gray solid 1px;
    padding: 0px 5px;
    margin-left: 20px;
}

Here you can see we set the color to #3c0 instead of green because we wanted a brighter color and set the left margin to 30px. This creates the section indent. And the border is just for looks.

<pre class="greenp">
pre.greenp {
    color: #3c0;
    border: gray solid 1px;
    padding: 0px 5px;
    margin-left: 20px;
}
</pre>

This HTML code is what is takes to make the previous box. Pretty nifty, huh? Or as my brother would say, "Spiffy!"

Links, Again

How do you like all those colored links on the links panel? Too much? Just right? Give me more!! Wait a minute, last time you told me I could change the anchor tag properties for the links using a class with different properties. I looked at your HTML and you didn't use class tag anywhere. What gives? You are right! After getting all those links on the page, they looked, um, boring. So I decided to create different link colors for the different sections. And on the sitemap and links pages, for the different types based on whether it was HTML, CSS or Javascript related. Lots of work? Nope, I created custom id's for them. You'll notice in the HTML that I have <div id= before each section and the obligatory </div> following. Then I set the colors based upon what type of links they are.

<div id="file2">
    <h3>The Sections</h3>
    <p><a href="#menu">The menu</a></p>
    <p><a href="#code">Code snippets</a></p>
    <p><a href="#links">Links, again</a></p>
</div>

#file2 a {
    color: #009900;
    text-decoration: none;
}

This looked pretty neat to me and it livened up the boring link panel.

Now what?

You have reached the end of this project. I hope you found something of use within these pages. Have fun and thanks for visiting.

The Assignment

Eight items for the final project

• Use an external CSS file for overall control of style, although pages can also include imbedded or line styles as well
• Use CSS to alter link color or style
• Specify in your CSS at least one custom ID and and least one custom class
• Make a rollover (mouseover) on an image where the image then changes. Thus, you see image1 when you first open the page, but if you put your mouse over the image it changes to image2
• Include a Javascript navigation element of your choosing
• Create a custom JavaScript function with an associated event handler (which calls the function) that is particular to your web site (you need to create it, it has to be specific to your site)
• Include a minimum of two images or multimedia files
• Include a minimum of one table with custom styles applied to it (color, margin, that type of thing)