<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>FatBasturd &#187; Navigation Menu</title>
	<atom:link href="http://www.fatbasturd.co.uk/tag/navigation-menu/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.fatbasturd.co.uk</link>
	<description>Just another WordPress weblog</description>
	<lastBuildDate>Thu, 20 Aug 2009 10:58:22 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>CSS Rollover Tabs &#8211; How i do them</title>
		<link>http://www.fatbasturd.co.uk/css-rollover-tabs-how-i-do-them/</link>
		<comments>http://www.fatbasturd.co.uk/css-rollover-tabs-how-i-do-them/#comments</comments>
		<pubDate>Sun, 20 May 2007 18:43:13 +0000</pubDate>
		<dc:creator>FatBasturd</dc:creator>
				<category><![CDATA[Design, CSS & Xhtml]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[CSS & Xhtml]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[Float]]></category>
		<category><![CDATA[List]]></category>
		<category><![CDATA[Menu]]></category>
		<category><![CDATA[Navigation Menu]]></category>

		<guid isPermaLink="false">http://fatbasturd.co.uk/wordpress/?p=5</guid>
		<description><![CDATA[This is my first tutorial and the subject is rollover image tabs using only CSS. This is the method i use for my sites navigation here.
There will be a few steps covered but i will try to explain it as simple as i can
Step 1 &#8211; The Image
First we need to open Photoshop or the [...]]]></description>
			<content:encoded><![CDATA[<p>This is my first tutorial and the subject is rollover image tabs using only CSS. <del datetime="2008-05-06T06:51:09+00:00">This is the method i use for my sites navigation <a title="Website Design Services" href="http://www.imagelimited.co.uk">here</a>.</del></p>
<p>There will be a few steps covered but i will try to explain it as simple as i can</p>
<h4>Step 1 &#8211; The Image</h4>
<p>First we need to open Photoshop or the graphics program of your choice and create an image 110px x 80px. This is to be the only image we will use for our navigation. Notice how I have both of the buttons (normal state &amp; hover state) in the one image.</p>
<p><img src="http://www.fatbasturd.co.uk/blog_images/tutorials/nav.gif" alt="Tabbed Navigation" /></p>
<h4>Step 2 &#8211; The XHTML</h4>
<p>Now its time to fire up your coding program, In my case it is Dreamweaver. Create a new html document and name it navbar.html then save the file.</p>
<p><span id="more-5"></span></p>
<p>Now add right after the body tag the following code:</p>
<pre>&lt;div id="navigation"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Link 4&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;</pre>
<h4>Step 3 &#8211; The CSS</h4>
<p>Create a new css file and add the following</p>
<pre>#navigation li {
	display: block;
	list-style-type: none;
	float: left;
}
li a:link, li a:active, li a:visited {
	background-image: url(YOURIMAGE);
	background-repeat: no-repeat;
	height: 40px;
	width: 110px;
	line-height: 40px;
	background-position: left top;
	margin-right: 2px;
	display: block;
	text-align: center;
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-decoration: none;
}
li a:hover {
	background-image: url(YOURIMAGE);
	background-repeat: no-repeat;
	height: 40px;
	width: 110px;
	line-height: 40px;
	background-position: left -40px;
	margin-right: 2px;
	display: block;
	text-align: center;
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-decoration: none;
}</pre>
<p>And that is it you are done <img src='http://www.fatbasturd.co.uk/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  You should have ended up with this <a title="Tabbed Navigation Using Only CSS" href="http://www.fatbasturd.co.uk/tabbednav.html">Click me</a></p>
<h4>Explanation</h4>
<p>This takes away all of the strain and bloaty code of javascript and also preloads the image so you do not get that nasty flicker effect.</p>
<p>Because the image loaded initially is the double button image the rollover is instant in its rolled on state. The hover state called upon in the <strong>li</strong> tag basically tells the bg to rise 40px on rollover.</p>
<p>I hope that I have helped you with your CSS Tabbed Navigation woes. If you feel something would be better another way then please do let me know <img src='http://www.fatbasturd.co.uk/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.fatbasturd.co.uk/css-rollover-tabs-how-i-do-them/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
	</channel>
</rss>
