Posted by on Wednesday, December 16th, 2009 at 6:42 pm.
When looking for a navigation for your website design, it can be very tempting to use a ready made script from a tutorial or blog post.
I will be working through an easy way to create one of these, where you write the code. I’ll include all of the code at the end, for those of you out there who don’t want to write it themselves
Start with your website design photoshop file.
Open the navigation that you have created in Photoshop. Firstly, I will be selecting a 1 pixel wide background repeating image to display along the x-axis of by containing div.
Get the color values for the border
I have used a technique to add depth to the separating bars in the navigation. In order for our menu to look exactly like it does in the image, I’ll use the dropper tool to get the exact colors. The effect uses two 1 px lines, one of which is darker than the background, the other is lighter. This helps to give the item separator an indented 3d effect.
The colours are as Follows #90a500 for the left hand side and #dbe694 for the right hand side.
Create your website html code
As with any text-based navigation, you should really be using an unordered list, which will also help to define the structure of website design navigation in major search engines.
Styling the Design with CSS
This is really the important part of this mini-tutorial, as it is here where so many designers seem to use unneeded code to format their navigation. I will be using the following to
Here are the steps that I follow when creating a horizontal navigation for your website design.
- Ensure the li’s sit horizontally.
Float:left; display:inline - Add the borders to the left and to the right of each li
- Remove any space between the li’s by setting the value of the margins to 0;
- The clever bit is, getting the hover state to completely fill the li. In order for this to display correctly you must have no padding on the li, so that the link can be displayed to the complete li region. To make the link fill the the li use display block
- Change the rollover state using the a:hover tag and style
Here is the CSS…
#toplinks { height:30px; margin-bottom:7px;}
#toplinks ul { line-height:30px; border-left:1px solid #90a500; padding:0px;}
#toplinks li { display:inline; float:left; line-height:30px; padding:0 0px; width:120px; text-align:center; border-left:1px solid #90a500; border-right:1px solid #dbe694;}
#toplinks a { display:block; line-height:51px; font-size:1.2em; text-transform:uppercase; color:#FFF;}
#toplinks a:hover { background:#FFF; color:#000;}
Channel