Posted by Neil Taylor in Website Build | 0 comments
Website Development Tips: Horizontal Sliding Door Menus
Website design and creation can at times be an difficult task, so I am going to publish regular tips that can help you get the best out of your website. This week’s topic is building a menu using the best practice method.
The correct way to produce a menu is by using list item mark-up. One of the main reasons behind this is accessibility compliance. By using lists instead of tables if someone is viewing the site with a old browser or a different technological platform, (e.g. a mobile phone or with CSS turned off) then menu is still a easy recognisable navigation tool.
E.g. on a browser with CSS enabled:
Homepage | Products | Contact
E.g. viewed on a platform without CSS
- Homepage
- Products
- Contact
As you can see in a limited browser it is still recognisable as a menu, It is also an advantage from a SEO point of view and design wise gives a lot more flexibility with less code.
Setting up the Menu
<html>
<body>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Product</a></li>
<li><a href=”#”>FAQ</a></li>
<li><a href=”#”>Support</a></li>
<li><a href=”#”>Contact</a></li>
<ul>
</body>
</html>
This produces:
Not much of a navigation, is it!
The next stage is to make it looking something like a proper menu, this is done by adding some CSS styling to the menu.
The first step is to add a id to the UL so that we can distinguish the menu from other list items.
<ul id=”nav”>
Now that is sorted we add some css styling to display it. For this example we will place our styling in the head of the document rather then link to it through a url
<html>
<head>
<style>
ul#nav li, ul#nav {margin:0;padding:0;}
ul#nav li {list-style-type:none;display:inline;}
</style>
</head>
<body>
The first line: ul#nav li, ul#nav is there as a default reset, list items have different margins and paddings in different browsers, this resets it back to a universal zero.
The next style ul#nav li, takes off style type which is by default a bullet point and also brings all the list times onto the same line.
It’s not looking very nice yet, and it does need to look nice! For this we will style the links themselves.
ul#nav li a:link, ul#nav li a:visited {text-decoration:none;color: #333;font-family: arial;font-size: 14px;border-right:1px solid #666;padding: 0px 9px 0px 9px;}
ul#nav li a:hover {color:#ccc;}
On the link we text of the underline, set the colour and make it a set size. For now we have
The next set is to create the the menu graphic, we do this by create a sprite. A sprite is a web graphic that holds several different images and is placed around the page and displayed differently by using background positioning. For this menu, we are going to create a graphic that has 3 states. Normal, Hover and Active.
If the menu at a normal state is going to be 25px high, we require a complete graphic that is 75px high
The compete image showing all states.
Into the ul#nav li a:link, ul#nav li a:visited
We are going to add this css.
background:url(pic5.jpg) repeat-x center; height: 25px;
This sets the background image to the jpeg pic5, it repeats its across along the horizonta and places it center and sets the height at 25px.
The next step is the hover.
This is similar to the above but all we need to change is background position to bottom:
ul#nav li a:hover {color:#fff;background-position:bottom;}
The last stage is to add active class to one of the menu links
We shall add this to the about menu options, eg:
<li><a href=”#” class=”active”>About</a></li>
To make this visibly different we aslo need to add a css class to style this link.
ul#nav li a.active:link, ul#nav li a.active:visited {color:#fff;background-position:top;}
The advantages of using css siding door rollovers compared to javascript rollovers is many. CSS by itself is a much more valid markup to use then javascript to produce effects, it will produce the same effect but faster and with ess issues and by combining all 3 states into one background image there is no need to preload any images into the document giving fast rollovers with the image lag that you get with javascript rollovers as a image needs to be loading onto a page.
Of course if this proves to be too much contact us and let us get your website up to scratch for you, contact us via email or call us on 0845 862 0416 and we will be happy to help.
Tweet