Quick Start Checklist

 

Video Tutorials

CSS & HTML Tutorials

 Training DVDs & Products

 

 

 

 


Drop Down Menu Part 2

Continued

 

By now you should have downloaded the folder that contains the files we will work with.  Those files should also be inside your EW 3 web site in the folder list.  Okay, moving on.

1.  Open the index-copy.html page in Expression Web

files

2.  Click on Code view

You need to see the code in order to follow along, so click on code view and then look for the <head></head> section.

You will see the following lines of code in the head section.  Here we are linking to the style sheets and javascript files. 

Note:  Jquey is a JavaScript Library.

Copy and Paste the following into the <head> section of you web pages...best if you paste into your DWT rather than each individual page.


<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection"/>


<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
<![endif]-->


<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>


<script type="text/javascript" language="javascript" src="js/jquery.dropdownPlain.js"></script>

 

3. Next, Change the Anchors

What is an "Anchor"?  An anchor is the text that we make into a clickable hyperlink.  You will have to stay in Code View to do this.

Look for the anchor in the following way:

<li><a href="#">Home</a></li>

Home is the anchor in the code snippet above. 

Each anchor will be surrounded by the <a href="#"> </a> tags, which in turn is surround by list item <li></li> tags.

 

Watch the Videos Below to get a better idea of how to work with the dropdown menu.

Then all we have to do is make the actual hyperlinks.  This will be included in the video as well.

 

videos  Dropdown Menu Videos

Video 1:  Download & Extract Contents to Import into EW 3

Video 2:  DropDown Menu Part 2 - learn how to change the anchors...the text used to create a hyperlink.

Video 3:  DropDown Menu Part 3 - learn how to make hyperlinks in code view, and a quick overview of jquery and how we linked to jquery library.

Video 4: Copy N Paste Menu  Part 4  - copy the code for the entire dropdown menu and paste it into a div in your site.  Begin Styling the menu to match your site by changing the existing Styles (styles.css).

In video 4, you will be shown how to delete the body style from the style.css style sheet.  This style may interfere with the body style you already made for your existing web site.

Hint:  Use the Quick Tag Selector to figure out which Style needs to be modified.

Video 5:  Finish Styling the Menu with CSS Part 5 - finish up modifying CSS.