Navigation is what takes you to the other pages of your site with a single click. There are so many Navigation styles that people are adopting now a days.
Your navigation styling can impress users. The user should feel comfortable by using the navigation.
Here I am telling you how a Graphic Designer can also make Navigation in Css.
Step1:
You have to first define a simple unordered list in HTML.
<html>
<body>
<ul>
<li><a href=”http://www.webdesigndepot.com.net>Home</a></li>
<li><a href=”">About us </a></li>
<li><a href=”"> Contact Us</a></li>
<li><a href=”"> FAQ</a></li>
<ul>
</body>
</html>
This would look like this:
Step2:
Attach Css aheet now:
Step3:
And here is the styling part start.
For styling apply following CSS:
<style type=”text/css”>
body{
background: #CCCCCC;
font-family: Helvetica, arial, sans-serif;
}
#nav {
width: 500px;
margin: 50px auto;
}
#nav ul {
float: left;
list-style-type: none;
width: 450px;
height: 44px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: #e3e3e3;
background: -moz-linear-gradient(top, #ccc, #999);
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));
-moz-box-shadow: 1px 1px 3px #333;
-webkit-box-shadow: 1px 1px 3px #333;
box-shadow: 1px 1px 3px #333;
text-shadow: 0 1px 0 white;
}
#nav ul a{
display: block;
padding: 10px 20px 10px 20px;
list-style-type: none;
float: left;
color: #454545;
font-size: 20px;
text-decoration: none;
}
</style>
This is up to you now that how you edit all above Css and make this Navigation more stylish and cool.