23 June 2014

Create a Simple Navigation Menu Bar For Your Website/Blogger [Beginner]


Creating a basic menu using HTML and CSS is pretty straightforward even for starters. If you're in search for a simple navigation menu bar for your website/blog, here's all the code you need.

  1. The CSS:


Open the Template Option and edite
                                                                                Skin


#nav {   padding:0;   background: black;   border-bottom: 1px solid #999999;   height: 36px;}#nav li a {   font-family: Arial;   font-size:12px;   text-decoration: none;   float:left;   padding:10px;   color:white;   font-weight:bold;}#nav li a:hover {   background:white;   color:black;   border-radius: 2px;   border-bottom: 1px solid white;}#nav li {    display:inline;}



  • The HTML: 
<ul id="nav">
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">Products</a></li>
 <li><a href="#">Blog</a></li>
 <li><a href="#">Contact Us</a></li>
</ul>

 Simply change the URL to your desired location.

  • Important Note  

If you have any problem on this post Contact me and Comment below :D 
Thank you

0 comments:

Facebook Blogger Plugin by Superbs Solution

Post a Comment