Unfortunately, the limitations of what I'm able to do within the Blogger framework mean that I'm unable to make this nav bar work here as it should, so I'm posting up an image of the actual nav during use, so you have some idea what the heck I'm talking about. Here it is:
You'll notice that the bar itself rests within a section that has a Black background-color and features a thick Red border at the bottom. This is not accounted for in the CSS that follows - it's all about the Nav Bar. In it's 'rest' state it shows red buttons which turn a sort-of light blue when moused over (you'll have to forgive my descriptions of colours - I'm colourblind!). Also, I'm just going to go right ahead and assume that you've got Photoshop or a similar image-editing kit. Anyway, here's the recipe...
INGREDIENTS
Photoshop or similar (any version that will save as a .png and features Layer Transparency)A suitable UTF-8 compatible text editor* (I use Gedit or Kate - we spoke about this)
About thirty minutes spare time
Calories: none!
*Note: Don't use Notepad, it's an ASCII (ANSI) editor, not UTF-8.
METHOD
STAGE 1 - Create the graphic
Open Photoshop and create a new document with the following attributes:
- 2 pixels width
- 30 pixels height
- Transparent background
Grip the corner of the document window and drag it out so it's much larger than the document area. If you have a mouse wheel, you should be able to scroll toward you to magnify the document. You need to be zoomed in far enough so you can easily see what you're doing and have plenty of room to work.
Select the Gradient Tool and choose a either Black or Dark-Grey as the Foreground Colour. I've used Black.
In the Tool dialogue, click Transparency and then click the displayed Gradient to open the Gradient Dialogue. Select the Foreground-to-Transparent thumbnail (usually second place).
Hold down Shift as you stroke the Gradient from bottom to top of the document.
Now, Save the document as a .png. I called mine Grad.png but you can, of course, use whatever name you want.
Close Photoshop.
STAGE 2 - Create the HTML
Open your text editor and type in the following into the <body> section of your saved HTML5 page:
<nav>
<a href="#">NEW YORK</a><a href="#">LONDON</a><a href="#">PARIS</a><a href="#">MUNICH</a>
</nav>
By the way, if you can't be bothered typing out the code yourself, please, by all means, Copy and Paste - it should work fine!
Save your file.
Of course, you can put anything you wish between the <a></a> tags. I've used a quote from M's excellent Pop Music simply for demonstration purposes.
STAGE 3 - Create the CSS
Open main.css (your previously saved CSS file) in a new editor tab, and type the following:
a {
text-decoration: none;
background-color: #F00;
background-image: url(Grad.png);
background-position: bottom;
background-repeat: repeat-x;
color: #FFF;
padding: 5px 20px;
border-left: 1px solid #DDD;
border-right: 1px solid #333;
}
a:hover {
text-decoration: none;
background-color: #CCC;
background-image: url(Grad.png);
background-position: bottom;
background-repeat: repeat-x;
color: #FFF;
padding: 5px 20px;
border-left: 1px solid #DDD;
border-right: 1px solid #333;
}
nav {
text-align: center;
}
Save the file and test the nav bar. I've tested this with the browsers I have at home and it works fine in Firefox, Chrome, Opera, Epiphany and Seamonkey but doesn't work in Arora. I have no idea how it works in IE (but it should!) because I don't have it on my OS (linux).
Low Fat Version!
For a leaner, meaner nav element, try NOT including the .png image - and leave out these bits:
background-image: url(Grad.png);
background-position: bottom;
background-repeat: repeat-x;
There you go! Your page is getting slimmer by the minute. Not quite as exciting - but it still works!
</chat>
No comments:
Post a Comment
Please leave a Comment and remember that everyone can read them, so keep it clean - and be kind! Your Comments will be moderated before publication.