CSS Dropdown Menu

Using Project Seven CSS Express Menus in Expression Web

Note, this is an old tutorial using a script no longer available from Project Seven because it is not responsive. but it is still useful fr some. However, our friend Ian Haynes has created a bit of code that will turn this menu into a jQuery accordion for mobile sites. See http://www.ew-resource.co.uk/p7exp-resp2/default.html for more info on his experimental version.

Project Seven  makes some of the best extensions for Dreamweaver available today but in addition they also offer tutorials and code that can be used in any web editor for free. In this tutorial I will show you (with the gracious permission of Al Sparber from Project Seven) how to use and modify their CSS Express Drop-Down menu in Expression Web.

While the supported browser list over on the Project Seven site says IE 5 & IE 6 it also works in more modern browsers.

Step 1

Go to Project Seven CSS Express Drop-Down Tutorial and download the asset files. Extract them to some place on your hard drive. Then the extracted "p7exp" folder from where you extracted it to the folder list in your website.

Step 2

In this tutorial you should be working in split view, though in my opinion you should always work in split view so you can see what Expression Web is doing as you use it.

For the purposes of this tutorial I'm starting with a blank page which Expression Web opens with the basic code required for an HTML page: doctype, head, title & body elements. As soon as you have opened a new blank page, save it. Always save a page before you do anything else to it so that the links will resolve correctly. In this case I will be saving it with the name menu.html but you can use the name of your choice.

Then drag from Folder List to the design half of the page.

Step 3

Copy and paste the following code in the  head section of the page to attach the javascript file and conditional comments required for IE 6 to be able to use the dropdowns. (this text is part of this tutorial's zip file in the file named snippets.txt (download at bottom of page)  which has all the code used on your web page to create the menu):


<script type="text/javascript" src="p7exp/p7exp.js"></script>
<!--[if lte IE 7]>
<style>
#menuwrapper, #p7menubar ul a {height: 1%;}
a:active {width: auto;}
</style>
<![endif]-->

Your code should now look like the following image with the CSS showing in the background.

 

 

Note: you should use the javascript file even if you do not care about visitors using IE 6 just to be curious since it causes no problems in newer browsers who will ignore it.

In part one we created a web page, attached the external stylesheet provided by Project Seven and added the JavaScript file as well as the conditional comments for IE 6 and below. Now it is time to add the menu and call the script.

Important: Before we do that I want to you comment out the stylesheet link in the head section of the page otherwise Expression Web will render the menu as IE 6 does and you will not be able to edit the hyperlinks in design view.

<!-- <link href="tutorial.css" rel="stylesheet" type="text/css" /> -->

Step 4

In the Project Seven tutorial the next step is to add the onload event to the body element but I'm going to add the menu first so if you have IE 6 available you can see why it is needed.

<div id="menuwrapper">
<ul id="p7menubar">
	<li><a href="#">Home</a></li>
	<li><a class="trigger" href="#">Trigger One</a>
	<ul>
	<li><a href="#">Sub 1.1</a></li>
	<li><a href="#">Sub 1.2</a></li>
	<li><a href="#">Sub 1.3</a></li>
	<li><a href="#">Sub 1.4</a></li>
	</ul>
  </li>
  <li><a class="trigger" href="#">Trigger Two</a>
	<ul>
	<li><a href="#">Sub 2.1</a></li>
	<li><a href="#">Sub 2.2</a></li>
	<li><a href="#">Sub 2.3</a></li>
	<li><a href="#">Sub 2.4</a></li>
	<li><a href="#">Sub 2.5</a></li>
	</ul>
  </li>
  <li><a class="trigger" href="#">Trigger Three</a>
	<ul>
	<li><a href="#">Sub 3.1</a></li>
	<li><a href="#">Sub 3.2</a></li>
	<li><a href="#">Sub 3.3</a></li>
	<li><a href="#">Sub 3.4</a></li>
	<li><a href="#">Sub 3.5</a></li>
	<li><a href="#">Sub 3.6</a></li>
	<li><a href="#">Sub 3.7</a></li>
	<li><a href="#">Sub 3.8</a></li>
	</ul>
  </li>
</ul>
<br class="clearit" />
</div>

Simply replace the # for a null link in the href for each link and change the text as appropriate. In Expression Web you can select the <a> from the breadcrumb then right click on the hyperlink to access Hyperlink Properties which will allow you to update the link and link text using a dialog box instead of code view.

In the code shown above you will see that the menu is inside of a div. This is what gives us a background behind the menu that goes all the way across the page using the appropriately named menuwrapper ID. An ID was used since you should only have one drop-down menu on a page.

Each top level list item that has a nested list for the dropdown uses a class named trigger. This class (combined with the JavaScript for IE 6 and below) is what makes the drop down menu work. Because there can be and usually are more than one drop-down a class is used.

Step 5

Before we go on you need to test your menu in a browser. Temporarily remove the comment from the stylesheet link and preview in browser.

If you are viewing this page in IE 7+, Firefox, Opera or Safari you should see the menu below and if you mouse over Trigger One - Three you will see dropdowns.

If you are using Internet Explorer 6 or lower you will not see the submenu, nor will you be able to access those submenus. Since there will be JavaScript on the page in the next step I recommend that you use the testing server to preview your page even though it has no server side code. Go to Site > Site Settings > Preview tab and use the radio button to "preview all pages" so that you don't get the ActiveX warning when testing locally.

For Internet Explorer 6 and below you will need to add an onload event to your body element by replacing the <body> element added to the page by Expression Web when it was created with the following:

<body onLoad="P7_ExpMenu()">

Now the menus will work in IE 6 as well.

In part two we got out menu working but using the default graphics supplied by Project Seven. Now it is time to look at how to make it match your site.

Step 7

The folks at Project Seven thoughtfully provided a Fireworks PNG file complete with slicing guides that you can use to customize if you have Fireworks . Below is how the supplied image looks in Fireworks. The green areas are the slice guides that result in the images  in the p7exp/images folder. If you have Fireworks you can simply edit this page and export the slices with the same names.

Home

Using Fireworks to change the colors to create a black and silver menu above I ended up with the following images:

    

 

If you do not have Fireworks you can create gradients in whatever graphics program you happen to have. The dimensions for each graphic are as follows:

  • p7exp_pbg.jpg: width=50px, height=300px which is used for the page background
  • p7exp_mbar.jpg: width=40px, height=48px for the menu bar background
  • p7exp_mgrad.jpg: width=100px, height=199px for the submenu background
  • PM_dark_south.gif: width=14px, height=8px is the down arrow to give a visual indicator that there is a submenu available

The only other change you would need to make the black and silver men would be to change the background color in the following style definition:

#p7menubar li:hover a, 
#p7menubar a:focus,
#p7menubar a:active, #p7menubar li.p7hvr a {
color: #000000;
background-color: #9E9E9E;

  }

Here I replaced background-color: #C19674 with the hex code for light gray #9E9E9E. depending on the colors used you may need to change the color as well.

This is all you need to do to use the CSS Express Drop-Down Menu from Project Seven in your Expression Web site.

 

p7exp.zip (528.67 kb)

snippets.txt (1.20 kb)



Outstanding Hosting