This second part will cover building a modal window and coding its behavior. If you don’t know what I already explained, please go back to the first article here and come back once you finish that one. However, if XHTML, CSS and jQuery are your friends, you may pick things up as we go, so just go ahead and read this part of the tutorial.

Let me remind you the concept we described in the previous article. We have a horizontal menu with a few categories. Each category has multiple subcategories and each such subcategory may contain a random number of products. For easier and faster movement of users thorough the site, we won’t reload the page once a subcategory is clicked. Instead, we will display all products in a modal window.

Here’s a screenshot of the menu and one simple modal window.

How does the modal work?

Once someone clicks a subcategory link, the modal window will be displayed and the products will show up. The modal will close when products are clicked, and the browser is targeted to a new page, when the user clicks the close button or when the overlay is clicked. It isn’t that hard is it?

The main issue is that we need different content in the modal window. Each subcategory will have its own products and we need to find out which products to display. We will do this with the help of jQuery as you’ll find out in just a few minutes.

But first, lets get to coding the structure and design of the modal window. First of all, we have the overlay mask, which will be an empty div. We need to make sure the overlay mask will be on top of all site content but beneath the modal window, so we will use z-index:1100 for modal content and z-index:1000 for the overlay. The overlay won’t be displayed unless a subcategory is clicked, so display:none is also mandatory. You should also choose your favorite color for the overlay, and set it absolutely to top left 0 pixels.

<div></div>

#overlay-mask {
	display:none;
	z-index:1000;
	background-color:#333;
	position:absolute;
	top:0;
	left:0;
	}

The modal window will be something like this. An outer div to hold everything in place, another inner div to hold the products, and a link that will server as a close modal window button. Because we want the button to span all the way, we had to use an outer div for the content of the modal, so that’s why there’s 2 divs and not just one.

<div class="all-rounded">
<div>
		<a class="thumb" href="http://www.ultimatewasher.com" target="_new"><img src="images/wash1.jpg" alt="Wash1" width="102" height="102" /><span>First thumb</span></a>
 
		<a class="thumb" href="http://www.city-rentals.ca" target="_new"><img src="images/wash2.jpg" alt="Wash2" width="102" height="102" /><span>Second</span></a>
 
		<a class="thumb" href="http://www.tonsoftools.com" target="_new"><img src="images/wash3.jpg" alt="Wash3" width="102" height="102" /><span>Third</span></a>
 
		<a class="thumb last" href="http://www.carriergenerators.com" target="_new"><img src="images/wash4.jpg" alt="Wash4" width="102" height="102" /><span>Fourth</span></a></div>
<a class="close bottom-rounded">Click to close</a></div>

As you see, each product is in fact a link containing a product thumbnail and some text. Lets see how we style them. the purpose of the tutorial is creating the modal window, not styling it, so the style is really basic, especially if you take out the rounded corners.

#overlay-content {
	width:500px;
	}
 
#overlay-content div {
	width:450px;
	padding:25px;
	padding-bottom:10px;
	}
 
#overlay-content a.close {
	display:block;
	padding:0px;
	border-top:1px solid #333;
	font-size:15px;
	line-height:25px;
	height:25px;
	text-align:center;
	}
 
#overlay-content a.thumb {
	display:block;
	width:102px;
	height:122px;
	padding:0px;
	margin:0px 14px 0px 0px;
	float:left;
	text-decoration:none;
	}
 
#overlay-content a.thumb img {
	display:block;
	width:102px;
	height:102px;
	padding:0px;
	border:0px;
	}
 
#overlay-content a.thumb span {
	display:block;
	width:102px;
	height:20px;
	padding:0px;
	text-align:center;
	color:#999;
	}
 
#overlay-content a.last {
	margin-right:0px;
	}
 
#overlay-content div {
	overflow:auto;
	}

The first two lines are just setting the dimensions of the modal window, for the purpose of a modal window that contains four products, all on the same line. The anchor tag with the “close” class is in fact the button that will be displayed in the bottom of the modal that will be used to close to modal window if needed.

The thumb classed anchor will contain the image and the text description contained in a span tag. As all thumbnails have a small right margin, we need the additional last class to remove the right margin from the last product in the modal. The overflow is used to cancel the collapsing of the inner div that contains only floating elements.

We finished with structure and styling, so lets move on to jQuery coding. Take a look at the code in its entirety and try to understand it. The explanations will follow it just below.

var opacity = '0.8'; // can be up to 1
 
$('a[name=modal]').removeAttr('href'); 	//javascript on, no need to redirect to a link here
$('a[name=modal]').click(function ()
	{
	var maskHeight = $(document).height();
	var maskWidth = $(document).width();
	var windowHeight = $(window).height();
	var windowWidth = $(window).width();
	var contentWidth = $('#overlay-content').width(); // width
	var contentHeight = $('#overlay-content').height(); // and height of content area
 
	//Set height and width to mask to fill up the whole screen
	$('#overlay-mask').css({'width':maskWidth,'height':maskHeight});
	$('#overlay-mask').css('opacity',opacity);
	$('#overlay-mask').css('display','block');
 
        // put the overlay content area in the center of the window
	$('#overlay-content').css('display','block');
	$('#overlay-content').css('left',(windowWidth-contentWidth)/2);
	$('#overlay-content').css('top',(windowHeight-contentHeight)/2);
	});
 
	// move overlay content to center of the window
$(window).resize(function ()
	{
	var maskHeight = $(document).height();
	var maskWidth = $(window).width();
	var windowHeight = $(window).height();
	var windowWidth = $(window).width();
	var contentWidth = $('#overlay-content').width(); // width
	var contentHeight = $('#overlay-content').height(); // and height of content area
 
	//Set height and width to mask to fill up the whole screen
	$('#overlay-mask').css({'width':maskWidth,'height':maskHeight});
	$('#overlay-content').css({'left':(windowWidth-contentWidth)/2});
	$('#overlay-content').css({'top':(windowHeight-contentHeight)/2});
	});
 
var $scrollingDiv = $("#overlay-content");
$(window).scroll(function()
	{
	$scrollingDiv.stop().animate({"marginTop": ($(window).scrollTop()) + "px"}, "fast" );
	});
 
$('#overlay-mask').click(function ()
	{
	$('#overlay-mask').css('display','none');
	$('#overlay-content').css('display','none');
	});
 
$('.close').click(function ()
	{
	$('#overlay-mask').css('display','none');
	$('#overlay-content').css('display','none');
	});

The opacity variable will set the overlays opacity. It would look really odd with a non transparent overlay, so perhaps anything below .8 will do just fine. Except if you have it completely transparent when there isn’t going to be any overlay.

We find all anchor tags that has “modal” as name, and remove their href attribute, as we don’t want to move to another page before seeing the overlay, don’t we?

Then we have the on click behavior. As soon as an anchor link that has an attached modal window is clicked, we get the sizes of the document as well as those of the window. We also check out the width and height of the content inside the modal window.

Next, we set the width and height of the overlay mask using css attributes. We want the overlay to span across the entire page, right? We then set its opacity and make it appear in the page by changing its display property from none (set in the css) to block. We do the same with the content div, and also put it in the center of the browser window.

We also have a resize behavior, which will be triggered if you resize the browser after the page has loaded. If that happens, we check out the dimensions of the document and browser as well, and reset the content window in the center of the page. In the same time, we modify the width and height of the overlay so that it matches the changes triggered by resizing the browser.

If the page has a scrollbar and we scroll either up or down, we use the scroll jQuery trigger to animate the modal back to the center of the page. The stop function there before the animation will make sure that older animations will be stopped if the scroll is used continuously or with small pauses.

Finally, once the overlay mask or close button is clicked, we need to close the modal window, and the last two lines of code do just that.

One small, but real problem!

We haven’t taken in consideration the most important aspect. Each time we load the modal window the content needs to be different. The above code only works for the same content in the modal window such as a contact form, and we need to fix this issue.

First of all, we remove content from the overlay-content inner div and leave it empty. This div will auto-populate with proper content when a subcategory is clicked. Next, we add rel attributes to modal anchor links (those that were named “modal”). We will use unique rel attributes to identify the content we need to load.

We will also add divs that have classes corresponding to each rel attribute, which will contain the content we will load on click. We have to make this divs hidden so they don’t pop up god know where inside your site’s layout. Simple right? But how do we do this via jQuery? Even simpler, using only three lines of code.

Once a modal anchor is clicked we identify its rel attribute, get the html contents of the div that has the same class name as the rel attribute, then populate the inner div in the overlay content with the html content we found. Cool! Here’s the code for that, which we add just below the .click function.

var rel = $(this).attr('rel');
var modal_content = $('.'+rel).html();
$('#overlay-content div').html(modal_content);

And we’re done. You can check out the demo over here, or perhaps you’d like the source code? If so, you can download the source codes for the first part, which is just the sliding menu from here, or if you want the real deal you can get full source codes for modal window too from here.

1. select categories, wait for a page to load
2. select a subcategory, wait for another page to load
3. check out products
4. click to go to desired product

The typical web user only wants to click once or twice to get to the product they want. And if clicks are unavoidable, make sure page loads are minimized! The more clicks and the more page loading they have to go through, the higher the risk they will get lost and never come back to your site. The good news is that you can achieve a good navigation menu that reduces page reloads.

This article is an in-depth tutorial on how you can achieve an expandable navigation menu using valid xhtml coding, valid css and a bit of javascript.

The concept

In order to achieve a fully functional menu for our huge website, we need one that will enable users to choose a category or subcategory in a timely manner, then browse hassle-free for the product they like. In Part 1 of the tutorial, we will create a horizontal bar that contains all the main categories of the products our customer is selling. This menu bar will expand so users will see all sub-categories. In Part 2 of the article, we’ll create the functionality where clicking on a sub-category will trigger an overlay that displays a list of the individual products.

In the image above there’s a sketch of what the site layout should be. We have the menu bar, right under the menu comes a header that can contain images, paragraphs of text, news. You get the picture. Then comes the content area. The menu will expand and push the header together with all elements that come after it down the page, as you can see in the following image.

Sneak peak at what we’re building here

Just in case you cannot wait for the end of the article, just check out the demo over here.

Coding the HTML and CSS

The navigation bar will consist of an unordered list. I have chosen this tag because menus contain lists, therefore an unordered list is the best way to go for this. The part of the menu that will slide will be contained by a div, each item in the navigation menu having a separate div for its information. We will have the header and the content section also contained in a div. Here’s a view on the XHTML structure.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 	
<head>
	<!– head meta tags, css , javascript links will be here–> 	
</head> 	
<body> 	
	<div id="wrapper"> <!– used only for cosmetic purposes. IE: The site background image in the top –> 		
		<ul id="menu" class="all-rounded"> <!– the menu ul I talked about. all-rounded class will round the corners –> 				
			<li><a href="" target="_self">home</a></li>
			<li><a target="_self" >cleaning</a></li>
			<li><a target="_self" >cooking</a></li>
			<li><a target="_self" >gardening</a></li>
			<li><a href="" target="_self">about us</a></li> 			
		</ul> 			
	<div class="menu-extend cleaning"> <!– extended menu div –>
		<ul> 					
			<li><a href="" target="_self">Pressure Washers</a></li>
			<li><a href="" target="_self">Pressure Washers Accessories</a></li>
			<li><a href="" target="_self">Hoses and Water Fittings</a></li>
			<li><a href="" target="_self">Water Pumps</a></li>
			<li><a href="" target="_self">Dry Vacuums</a></li>
			<li><a href="" target="_self">Wet Vacuums</a></li>
			<li><a href="" target="_self">Industrial Vacuums</a></li>
			<li><a href="" target="_self">Specialist Vacuums</a></li>
			<li><a href="" target="_self">Vacuum Cleaner Bags</a></li>
		</ul>
 		<ul>
			<li><a href="" target="_self">Steamers</a></li>
			<li><a href="" target="_self">Scrubber Dryers</a></li>
			<li><a href="" target="_self">Buffers</a></li>
			<li><a href="" target="_self">Floor Care Chemicals</a></li>
			<li><a href="" target="_self">Carpet Care Chemicals</a></li>
			<li><a href="" target="_self">Carpet Cleaning Machines</a></li>
		</ul>
		<ul>
 			<li><a href="" target="_self">Trolleys</a></li>
			<li><a href="" target="_self">Household Cleaning Chemicals</a></li>
			<li><a href="" target="_self">Vehicle Cleaning Chemicals</a></li>
			<li><a href="" target="_self">Cleaning Equipment</a></li>
			<li><a href="" target="_self">Brooms and Brushes</a></li>
			<li><a href="" target="_self">Interchange System</a></li>
		</ul>
		<span class="clear">&nbsp;</span> 
	</div>
 
	<div class="menu-extend cooking"> <!– same as above div –>
		expanded menu goes in here for cooking
		<span class="clear">&nbsp;</span>
	</div>
 
	<div class="menu-extend gardening">
 		expanded menu goes in here for gardening
		<span class="clear">&nbsp;</span>
	</div>
 
	<div id="header"> <!– header div with an image –>
		<img src="images/header.jpg" width=900 height=200 alt="Header" /> 		</div>
 
	<div id="content"> <!– finally the content area –>
		<h1>Fancy menu</h1>
		<p>Fancy menu info goes here </p>				 		</div>
	</div> 	
</body> 
</html>

I chose to round up the corners of the menu. To create this effect we will use some CSS level 3 and browser specific markup. The navigation bar will also have vertical separators between the items. The separator is consisted of two different lines, each with a custom color. We won’t use images for the separators. Instead we will use the css border property. Each list item in the navigation bar will have a 1px solid left border, and a 1px solid right border. The first element in the list and the last one won’t have the left border, and right border respectively. Here’s the html markup of the modified list, to reflect that there won’t be the above mentioned borders, and the css code:

8
9
10
11
12
13
14

<ul id="menu" class="all-rounded">
	<li class="no-left-border"><a href="" target="_self">home</a></li>
	<li><a target="_self" >cleaning</a></li>
	<li><a target="_self" >cooking</a></li>
	<li><a target="_self" >gardening</a></li>
	<li class="no-right-border"><a href="" target="_self">about us</a></li>
</ul>

.all-rounded	{
	border-radius:9px;
	-moz-border-radius:9px;
	-webkit-border-radius: 9px;
	}
 
/* these are the rounded corners */
#menu  {
	display:block;
	margin:0px auto;
	width:898px;
	border:1px solid #DD4CAB;
	height:48px;
	background:url('../images/menu_bg.jpg') repeat-x; color:#DD4CAB;
	 } 
 
/* ul style */
#menu li {
	display:block;
	width:178px;
	height:48px;
	line-height:48px;
	float:left;
	text-align:center;
	border-right:1px solid #DD4CAB;
	border-left:1px solid #AD3B87;
	}
 
/* li items style */
#menu li.no-left-border {
	border-left-style:none;
	}
 
/* no border as we said */
#menu li.no-right-border {
	border-right-style:none;
	}

Because I chose to round the corners of the menu, there are some issues while hovering the menu items, so the links that are held by the li items will have to have rounded corners as well. The first link in the menu will have rounded corners on the left side, while the last one will have rounded corners on the right side. Here’s the code for that:

#menu li a	{
	display:block;
	height:48px;
	color:#DD4CAB;
	text-decoration:none;
	}
 
#menu li a:hover	{
	display:block;
	height:48px;
	color:#DD4CAB;
	text-decoration:none;
	background:url('../images/menu_bg_hover.jpg');
	}
 
#menu li.no-left-border a:hover  {
	border-top-left-radius:9px;
	border-bottom-left-radius:9px;
	-moz-border-radius-topleft:9px;
	-moz-border-radius-bottomleft:9px;
	-webkit-border-top-left-radius:9px;
	-webkit-border-bottom-left-radius:9px;
	}
 
#menu li.no-right-border a:hover  {
	border-top-right-radius:9px;
	border-bottom-right-radius:9px;
	-moz-border-radius-topright:9px;
	-moz-border-radius-bottomright:9px;
	-webkit-border-top-right-radius:9px;
	-webkit-border-bottom-right-radius:9px;
	}

Coding the behavior of the menu using jQuery

I am not going to reinvent the wheel here, but jQuery seems to be the best javascript framework out there. If you’re not familiar to jQuery you can find some great tutorials and examples over here.

Javascript for menus? Are you insane!

Some people out there say you must not use javascript for navigation under any circumstances. I am sorry guys, but if you write your code professionally, using javascript for menus can seriously enhance your site’s functionality. The trick they’re talking about is what do you do when javascript is unavailable in the visitors browsers? Well, you have to code your menu in such a way it has progressive enhancement and works just fine if javascript is off. And yes, this menu achieves progressive enhancement. If javascript is turned off, the menu will be directly visible, including the part that should slide when needed. Nothing is inaccessible. Moreover, search engine’s bots will see the site just as if they were a visitor without javascript, so search engine optimization is preserved if using this menu.

Let’s get down to the jQuery

jQuery uses html IDs and classes to identify elements in the html page that it needs to work with. Our menu currently has unique ID, but the “cleaning”, “cooking” and “gardening” links don’t, so we add a class for each of them. The classes are unique too.

8
9
10
11
12
13
14

<ul id="menu" class="all-rounded">
	<li class="no-left-border"><a href="" target="_self">home</a></li>
	<li><a target="_self" class="cleaning-but">cleaning</a></li>
	<li><a target="_self" class="cooking-but">cooking</a></li>
	<li><a target="_self" class="gardening-but">gardening</a></li>
	<li class="no-right-border"><a href="" target="_self">about us</a></li>
</ul>

In order to achieve progressive enhancement, we must first disable javascript and load the menu page. So far, due to our code the menu displays in its entirety, including the part that in a few minutes will slide beautifully if javascript is on. But if it has to slide, it has to be hidden first, and this is the trick we pick out from our sleeves. The first thing we’re to do with jQuery is to hide the sliding part of the menu. By doing this, people having javascript turned on will not see the menu until they click to expand it. They will only see the menu bar. Here’s the jQuery code needed to achieve this:

$('.menu-extend').hide();

The rest is simple. When you click one item in the navigation bar, you are taken to a page. This happens for the Home and About us links. When you click one of the links in the middle of the menu, the menu will slide and reveal the contents. If there’s another menu visible, clicking to expand one other item will make the expanded section slide back under the navigation bar, then the required content will slide back out. How cool is that?

jQuery code step by step
There’s a bit of jQuery to be written here, so you can take a peak below to the full source code, then continue to the part I dice the code in pieces and explain what I’ve done.

jQuery(document).ready(function($)
 	{
 	// start the magic
 	// if javascript is on, the menu will work ok
 	// Therefore we hide the expanded menu 	$('.menu-extend').hide();
 	$('.clear').height(0);
 	// if the "Detailed menu" button is clicked, fade it out and fade in the "Close menu button"
	// also slide the expanded menu into place
 	$('.cleaning-but').click(function ()
 		{
 		var isVisible = $('.menu-extend').is(':visible');
 		var isVisiblecleaning = $('.cleaning').is(':visible');
 		var isVisiblecooking = $('.cooking').is(':visible');
 		var isVisiblegardening = $('.gardening').is(':visible');
 		if(isVisible)
 			{
 			if(!isVisiblecleaning)
 				{
 				if(isVisiblecooking)
 					{
 					$('.cooking').slideUp("1000", function() { $('.cleaning').slideDown("1000") });
 					}
 				else if(isVisiblegardening)
 					{
 					$('.gardening').slideUp("1000", function() { $('.cleaning').slideDown("1000") });
 					}
 				}
 				else
 				{
 				$('.cleaning').slideUp("1000");
 				}
 			}
 		else
 			{
 			$('.cleaning').slideDown();
 			}
 	    });
 	$('.cooking-but').click(function ()
 		{
 		var isVisible = $('.menu-extend').is(':visible');
 		var isVisiblecleaning = $('.cleaning').is(':visible');
 		var isVisiblecooking = $('.cooking').is(':visible');
 		var isVisiblegardening = $('.gardening').is(':visible');
 		if(isVisible)
 			{
 			if(!isVisiblecooking)
 				{
 				if(isVisiblecleaning)
 					{
 					$('.cleaning').slideUp("1000", function() { $('.cooking').slideDown("1000") });
 					}
 				else if(isVisiblegardening)
 					{
 					$('.gardening').slideUp("1000", function() { $('.cooking').slideDown("1000") });
 					}
 				}
 				else
 				{
 				$('.cooking').slideUp("1000");
 				}
 			}
 		else
 			{
 			$('.cooking').slideDown();
 			}
 	    });
 	$('.gardening-but').click(function ()
 		{
 		var isVisible = $('.menu-extend').is(':visible');
 		var isVisiblecleaning = $('.cleaning').is(':visible');
 		var isVisiblecooking = $('.cooking').is(':visible');
 		var isVisiblegardening = $('.gardening').is(':visible');
 		if(isVisible)
 			{
 			if(!isVisiblegardening)
 				{
 				if(isVisiblecooking)
 					{
 					$('.cooking').slideUp("1000", function() { $('.gardening').slideDown("1000") });
 					}
 				else if(isVisiblecleaning)
 					{
 					$('.cleaning').slideUp("1000", function() { $('.gardening').slideDown("1000") });
 					}
 				}
 				else
 				{
 				$('.gardening').slideUp("1000");
 				}
 			}
 		else
 			{
 			$('.gardening').slideDown();
 			}
 	    });
 	});

The first jQuery code is $(‘.clear’).height(0);. This is used to set the height of the clearing div to 0. We added a clearing div to each of the expanded menu’s divs because all content inside them floats to the left, and would therefor cause the expanded menu div to collapse. By adding the clearing div we avoid that, but we also add 20 unnecessary pixels to the expanded menu’s height. We fix this problem with the code mentioned above.

Then, we have three different onclick functions. Each one does the same thing, but is triggered by a different element in the menu. I will explain the first one. $(‘.cleaning-but’).click(function () is used to trigger clicking on the href tag that contains the link to cleaning menu. That link is identified by the cleaning-but class we added previously. When that link is clicked we don’t have just one behavior, so everything has to go inside a function.

var isVisible = $(‘.menu-extend’).is(‘:visible’); is used to check if there’s any menu currently expanded. The variable will hold either true or false values. Here, the expanded menu is identified by the general class used for it menu-extend. We will use the same process to check what expanded menu is in fact expanded, be it the one for cleaning category, or another one. We will identify those by their unique classes cleaning, cooking and gardening.

We first check if the menu is visible. if(isVisible) will return true if there’s an expanded menu, or false otherwise. If false, we will simply slide down the menu using $(‘.cleaning’).slideDown(); located on the else side of the if. If there’s an expanded menu, we check to see if it is exactly the one we clicked. If it is the same one, we will slide it back up using $(‘.cleaning’).slideUp(“1000″);. If it is another one, we slide up that div using a similar piece of code, then slide down the one needed. $(‘.cooking’).slideUp(“1000″, function() { $(‘.cleaning’).slideDown(“1000″) }); slides up the cooking expanded menu, and after that process is completed, it slides down the cleaning menu. The syntax for such a process is $(‘identifier’).slideUp(duration, callback event – the one triggered after first one is completed);

Here’s a live demo version of the menu. Zip archive download will be available once we publish the second part of this article!

In the concept part we said that the contents of the expanded menu are in fact subcategories, and clicking on a subcategory will reveal the products located in that category. But that is another story and we will discuss it in the second part of the article.

Coming up next
Part 2: Displaying menu items using overlay

Why I Chose Seo-semantic-xhtml.com:
I was quite impressed by their client list, which includes Sony Pictures, Columbia, and Mobile Illumination. Equally as impressive was their portfolio and coding style. SEO-Semantic-XHTML.com’s customer service was online so I showed them my design, discussed their process and Money back guarantee. After about a 20 minute discussion, I awarded my job to them.

Other perks:
They are in a similar time zone to mine (they are in PST, I’m in MST), which was a huge advantage over other providers. Also, their quality guidelines include w3c validation, and compatible with safari, IE, firefox, opera and chrome. Above all they have 100% Money back guarantee.

The Process:
I filled out their online order form, selected my package, and uploaded the design. Once it was done, I received a message from them confirming my order and delivery schedule.

Pricing:
Their packages start from $75. They offer three options based on the different markup selection i.e. HTML strict, XHTML transitional, and XHTML strict.

Support:
seo-semantic-xhtml.com has excellent customer support. They have ticket management system to handle all queries where I could login to see the status. They were available over IM,email,etc and reply was pretty quick too. I dont remember a single time when it took them more than a few hours to reply back.

Portfolio:
To see samples of their work, please visit: http://www.seo-semantic-xhtml.com/portfolio.html

What I got:
I received my files before the due date! And I was dually impressed with the quality of work – the code kept my design the same, it was w3c validated and working fine on all the browsers I checked. I must say they have done a quite good job.

Conclusion:
I would definitely recommend them for their XHTML coding. Their quality of code is good, delivery is fast, and charges are very reasonable vs. the competition.