Smooth horizontal CSS Menu with Blog Search engine

Share

Hey friend today i have brought you a  smooth CSS menu which includes a cool Search engine.Click here for demo.

CSS code:

<style type="text/css">

#nav {    width:900px;    height:34px;    background: url(http://img524.imageshack.us/img524/8224/menutn6.png) repeat-x;    margin:0 auto; padding:0; font-family: Arial, Georgia, Sans-serif;    overflow:hidden;}

#menu { float:left; width: 580px; height:34px;}

#menu ul { list-style-type: none; margin: 0; padding: 0;}

#menu ul li { float: left;}

#menu ul li a { display: block; text-align: center; font-weight: bold; font-size: 14px; padding: 10px 10px 10px 10px; color: #333;}

#menu ul li a:hover, #menu ul li a.active { text-align: center; font-weight: bold; font-size: 14px; background: #ccc;text-decoration:none}

#search_box { float: right; width:200px; height:34px;

}

#search_box #searchform { margin: 0 0; padding: 0 0; height:34px;}

#search_box #searchform .search_button { margin: 0 0 0 5px; padding: 0 0; border:0; width:28px; height:34px; background: url(http://img368.imageshack.us/img368/2286/searchwz8.png) no-repeat; cursor:pointer;}

#search_box #searchform #s {margin-top: 6px;padding: 0;vertical-align:top;} </style>

HTML Code:

<div id='nav'> <div id='menu'>

  <ul>   <li><a href='http://bloganol.blogspot.com/' title='Link 1 Title'>Link 1</a></li>   <li><a href='http://bloganol.blogspot.com' title='Link 2 Title'>Link 2</a></li>   <li><a href='http://bloganol.blogspot.com' title='Link 3 Title'>Link 3</a></li>   <li><a href='http://bloganol.blogspot.com' title='Link 4 Title'>Link 4</a></li>   <li><a href='http://bloganol.blogspot.com' title='Link 5 Title'>Link 5</a></li>  </ul> </div>

 <div id='search_box'>  <form action='/search/' id='searchform' method='get'>  <input id='s' name='s' type='text'/><input class='search_button' id='searchsubmit' type='submit' value=''/></form> </div>

</div>

Consider to Subscribe to our RSS feed or Follow us at Twitter or Join our Facebook Fan Page.Enter your Email below to subscribe to our updates via Email.

Similar Posts

• Code for placing stylish 125x125px banner ads on your blogs
• Horizontal CSS Indent Menu
• CSS Menu Widget with RSS Feed list
• 10 better ways to Customize your Thesis WP Theme
• A blogger hack to show related Posts below Each blogger Posts

Article by Dinesh Dhakal

Dinesh has written 310 awesome articles for us. Dinesh Dhakal(Deineshd) is the Admin of this blog.He is from Kathmandu, Nepal who is blogging since complete 4 years.You can catch him on twitter at Twitter.com/deineshd and in Facebook at Facebook.com/deineshd.