This piece of css will show you that it is perfectly possibly to create a good looking navigation bar without any images or javascript and just a couple of lines of css.
All you need to do is create a html file that contains a unordered list in it with your navigation links in it as <li>. You will then need to simply attach the css file to your html.
I hope this will help you to realise that it isn't all about huge flash navigation and rollover images.
You can find my example here.
/* CSS Document */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999999;
margin: 0px;
}
ul {
float: left;
/*this part will stop it moving when the page scrolls so you may not want to include it*/
position: fixed;
margin-left: 20px;
}
li {
width: 150px;
height: 15px;
margin-top: 3px;
border-style: solid;
border-width: 1px;
border-color: #64acd8;
font-weight: bold;
font-size: 120%;
background-color: #ffffff;
list-style: none;
padding: 3px;
}
li:hover {
background-color: #faffd8;
border-color: #004f7b;
}
a:link {
text-decoration: none;
color: #999999;
}
a:hover {
text-decoration: none;
color: #333333;
}
a:visited {
text-decoration: none;
color: #999999;
}
a:active {
text-decoration: none;
color: #FF0000;
}
Very nice. The only thing is that the a:hover colour doesn't work in combination with the colour of the list.
awesome buddy
nice dude.....really gud...
nice .. menu.. a:hover color should be work; you need to change 'a' element to block type. Here ..
a { display: block }so, it give anchor link to full width of 'li' and the color will work when hover.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.