CSS horizontal menu with search form tutorial part 2 – coding

Yesterday we have started designing our new menu bar in Photoshop. Today we will focus on coding our menu to HTML and CSS. With the ready PSD template provided before we can all begin by opening it in Photoshop and hide all text layers.

Using rectangular marquee tool select the inner part of the menu (without borders) and transform selection to achieve width around 2px and the full height of the menu (mine is set to be around 35px). Copy the merged selection (you don’t need to merge the layers, just use Ctrl+Shift+C to hard-copy the selection) and create a new file with clipboard image dimensions and paste the content into the new canvas. Save the file in the format that suits you best (I use PNG cause for small files is unbeatable if it comes to quality and size) as “mnu-base”. Now select the hover-state part of the menu and copy the selection to the clipboard, then repeat the steps as for the “menu-base” and save the file as “mnu-hover”.

Find the “Search” button, select the content (including the icon), copy it and save as “search-btn-normal”. Then enable hover-state on the button and repeat the copy and save but name it “search-btn-hover”. Now we have all the files we need to basically start coding, so open any text editor and let’s go!

The first thing we need to do is set-up a framework for our CSS code, purely in HTML. Create a new file in Dreamweaver and save it as “index.html”. Edit the contents now and put the code beneath between body tags:

HOME
CONTACT US
BLOG
ABOUT US
TIPS & ADVICE
TESTIMONIALS
FAQ


	
	Search
	

Some of you might be wondering why the heck I have used button tag instead of the old good input. The answer is simple: cross-browser compatibility. Different browsers have different positioning rules for the form elements, this applies especially to horizontal positioning of input buttons that are styled with images.

The most annoying of all if it comes to rendering styled forms is WebKit rendering engine (which is being used by Chrome and Safari); for some unknown reasons it renders the whole input button 10px below default positioning and no margins or padding are able to fix this. That’s why we are going to use button element.

Now it’s time to create our long-awaited stylesheet and fill in the blanks in our design. Create a new file and save it as “style.css” in the same folder as “index.html”. Then add this line to the heading of our HTML file:

This will allow for the CSS file to be used in our template.

First we have to define what kind of menu will it be in terms of positioning it on the screen. If you’d like to have edge to edge menu, then I recommend not to apply any preformatting to margins and paddings. Otherwise our first section in CSS file should look like that:

/* this will allow to center our layout on the screen */
* { margin: 0; padding: 0; }

/* defines general style for all elements */
body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #000;
/* our background pattern file (optional) */
	background-image: url(images/body.png);
/* repeat the image horizontally */
	background-repeat:repeat-x;
/* sets up background color for the whole page */
	background-color: #4caee6;
}

/* this will make our layout to be centered on the screen */
#header-wrap { margin: 0  auto; width: 1010px; }

Now lets style our menu. As we all know CSS menu has a variety of states, using lists displayed in-line and assigning properties to different menu states we can create a powerful and stunning combination. So here we go:

.menu {
/* take whole available space */
	width: auto;
	height: 41px;
	text-align: right;
/* here we can setup our menu background image... */
	background-image:url(images/mnu-base.png);
/* ... and repeat it horizontally */
	background-repeat:repeat-x;
/* these are our missing pixels which were used in design for shadow or glow effect */
	padding-left: 8px;
	padding-right: 8px;
}
.menu ul {
/* lets disable that fancy list punctuation */
	list-style: none;
}
.menu ul li {
/*the element will be displayed as an inline element, with no line break before or after the element*/
	display: inline;
}
.menu ul li a {
/* this parameter lets us display each link like a block */
	display: block;
/* this floats our links to the left */
	float: left;
/* spaces between the edge of the block and the content inside it */
	padding-left: 15px;
	padding-right: 15px;
/*Font color*/
	color: #000;
	text-decoration: none;
	font-weight: bold;
/* centers our block content horizontally */
	text-align: center;
/* centers our block content vertically (set it up to the menu height value minus what you have used for the background image styling */
	line-height: 34px;
}
.menu ul li a:hover {
	display: block;
	float: left;
	padding-left: 15px;
	padding-right: 15px;
	color: #000;
	text-decoration: none;
	font-weight: bold;
/* this will allow for our hover image to be shown when user places the cursor over the menu block */
	background-image: url(images/mnu-hover.png);
	text-align: center;
	line-height: 34px;
}

This is basically it if it comes to menu styling. Now let’s focus on the search bar, as this is also important. There are only two elements that we need to style: text box and search button, and the rest (different states etc.) is up to you.

First we need to define the looks of our search box. For that we are going to use special CSS ID to float the whole search section to the right. Then we’ll add padding inside the search box to make the text inside it to stand out and be nicely positioned. With white background and dark-blue border this will be looking really neat.

#float-r {
	float:right;
}
.searchbox {
	padding: 3px;
	margin-left: 2px;
	margin-right: 2px;
	border: 1px solid #093580;
	font-size: 11px;
	font-family: Verdana, Geneva, sans-serif;
}

Search button also will be styled, just like the link, with two states: normal and hovered. What’s important I suggest to define width & height of the button to be the same as for image as otherwise our button might become shrunk. Also it’s worth to put some padding on, just in case, because some browsers like to skip width and height for certain elements.

.searchbtn {
	padding-left: 8px;
	margin-left: 2px;
	margin-right: 4px;
	height: 32px;
	width: 82px;
	background: url(images/search-btn.png);
	border: none;
	font-weight: bold;
}
.searchbtn:hover {
	padding-left: 8px;
	margin-left: 2px;
	margin-right: 4px;
	height: 32px;
	width: 82px;
	background: url(images/search-btn-hover.png);
	border: none;
	font-weight: bold;
}

This is it! Now you should have your personal search bar within the top horizontal menu! If you have any suggestions, or anything related to the subject please use the comment box to express yourself! I promise there will be more CSS tutorial in the future, as this is a very important matter in every designers life.

Below you can download the sample source files, but everything should be pretty self explanatory :).

Bookmark it!