CSS Horizontal Menus

As I earlier published a number of CSS tutorials for blogs, websites and separate web pages. But the world of web designing is still to be discovered We will further work with CSS in details in coming days. I have another Advance CSS course in Urdu that contains all new enhancements of CSS3. CSS3 is a powerful version of CSS. We will discuss the rounded border properties, newly added shadow effect, mouse effects, transitions and so many more. But Today, I will share some beautiful CSS horizontal menus that are entirely built within CSS and HTML. These menus are awesome and can be included in both websites and blogs. You can add them into your blogger blogs too. Below is the list of menus along with CSS and HTML codes. Just love them.

How to Add CSS menus to blog?

These menus can be included into any kind of website or blog. If you’re using blogger platform for blogging then simply copy the codes from below boxes and paste it inside an HTML/JavaScript widget and save that widget. You can drag the widget anywhere you want to show the menu on your blog; mostly people keep it below the header.

Now here is the list of menus I’m going to share, the codes are in block quote for each menu, so you can use them for websites and blogs. The customization will be taught below the codes.

CSS Menu # 1 Code:

<style> #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvA5SCr4aI/AAAAAAAACvs/z9n_NmrOa5s/s1600/tableftE.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvA5lGRr2I/AAAAAAAACvw/691UrUgNOOA/s1600/tabrightE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; } </style> <div id=”tabsE”> <ul><li><a href=”#”><span>Link 1</span></a></li><li><a href=”#”><span>Link 2</span></a></li><li><a href=”#”><span>Link 3</span></a></li><li><a href=”#”><span>Link 4</span></a></li><li><a href=”#”><span>Link 5</span></a></li><li><a href=”#”><span>Link 6</span></a></li><li><a href=”#”><span>Link 7</span></a></li></ul></div>

CSS Menu # 2 Code:

<style> #tabs9 img { border: none; } #tabs9 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #F45551; line-height:normal; } #tabs9 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs9 li { display:inline; margin:0; padding:0; } #tabs9 a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu_kvE0faI/AAAAAAAACus/SzckKvt6x20/s1600/tableft9.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs9 a span { float:left; display:block; background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/Szu_kr6m1hI/AAAAAAAACuw/YTWQEYce98E/s1600/tabright9.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs9 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs9 a:hover { background-position:0% -42px; } #tabs9 a:hover span { background-position:100% -42px; } #tabs9 #current a { background-position:0% -42px; } #tabs9 #current a span { background-position:100% -42px; } </style> <div id=”tabs9″> <ul><li><a href=”#”><span>Link 1</span></a></li><li><a href=”#”><span>Link 2</span></a></li><li><a href=”#”><span>Link 3</span></a></li><li><a href=”#”><span>Link 4</span></a></li><li><a href=”#”><span>Link 5</span></a></li><li><a href=”#”><span>Link 6</span></a></li><li><a href=”#”><span>Link 7</span></a></li></ul></div>

CSS Menu # 3 Code: 

<style> #tabs5 img { border: none; } #tabs5 { float:left; width:100%; background:#E3ECF3; font: bold 7.5pt Verdana; line-height:normal; } #tabs5 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs5 li { display:inline; margin:0; padding:0; } #tabs5 a { float:left; background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/Szu-pihZsRI/AAAAAAAACuM/M_WqlslWGI0/s1600/tableft5.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs5 a span { float:left; display:block; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu-ppvYxHI/AAAAAAAACuQ/aL8WsHpvlSo/s1600/tabright5.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs5 a span {float:none;} /* End IE5-Mac hack */ #tabs5 a:hover span { color:#FFF; } #tabs5 a:hover { background-position:0% -42px; } #tabs5 a:hover span { background-position:100% -42px; } #tabs5 #current a { background-position:0% -42px; } #tabs5 #current a span { background-position:100% -42px; } </style> <div id=”tabs5″> <ul><li><a href=”#”><span>Link 1</span></a></li><li><a href=”#”><span>Link 2</span></a></li><li><a href=”#”><span>Link 3</span></a></li><li><a href=”#”><span>Link 4</span></a></li><li><a href=”#”><span>Link 5</span></a></li><li><a href=”#”><span>Link 6</span></a></li><li><a href=”#”><span>Link 7</span></a></li></ul></div>

CSS Menu # 4 Code: 

 #menu123{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(‘http://4.bp.blogspot.com/-XbXPrOFFvIU/UIhe9RCprAI/AAAAAAAAfBQ/kIWnxzH_3eo/s1600/tabright9.gif’) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;} #menu123 ul{margin:0px;padding:0;list-style-type:none;width:auto;} #menu123 ul li{display:block;float:left;margin:0 1px 0 0;} #menu123 ul li a{display:block;float:left;color:#FECCC3;text-decoration:none;padding:14px 22px 0 22px;height:28px;} #menu123 ul li a:hover,#menu123 ul li a.current{color:#fff;background:transparent url(‘http://3.bp.blogspot.com/-C2MK69BqpVY/UIhe8n7RVqI/AAAAAAAAfBI/HAmuRlm-bZg/s1600/tableft9.gif’) no-repeat top center;} <div id=”menu123″> <ul><li><a href=”#” title=”css menus”>Home</a></li><li><a href=”#” title=”css menus”>About Us</a></li><li><a href=”#” title=”css menus”>Services</a></li><li><a href=”#” title=”css menus”>Our Work</a></li><li><a href=”#” title=”css menus”>Contact Us</a></li></ul></div>

CSS Menu # 4 Code: 

#menu555{position:relative;display:block;height:39px;font-size:11px;font-weight:bold;background:transparent url(‘http://3.bp.blogspot.com/-dU9X1FKfRsU/UIhh8AN_YuI/AAAAAAAAfBs/A8TmSnuq2Mo/s1600/bgOFF1.gif’) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;border-top:4px solid #B30000;} #menu555 ul{margin:0;padding:0;list-style-type:none;width:auto;} #menu555 ul li{display:block;float:left;margin:0;} #menu555 ul li a{display:block;float:left;color:#666;text-decoration:none;padding:11px 20px 0 20px;height:23px;background:transparent url(‘http://3.bp.blogspot.com/-fxbQMlgtnGc/UIhh7Hg3WVI/AAAAAAAAfBo/0O6ZM7279xM/s1600/bgDIVIDER1.gif’) no-repeat top right;} #menu555 ul li a:hover,#menu555 ul li a.current{color:#B30000;background:#fff url(‘http://4.bp.blogspot.com/-451FSWiDSbA/UIb91ENcDnI/AAAAAAAAe-Y/FS3vS_3_QRw/s1600/bgON1.gif’) no-repeat top right;} <div id=”menu555″> <ul><li><a href=”#” title=””><span>Home</span></a></li><li><a href=”#” title=””><span>About Us</span></a></li><li><a href=”#” title=””><span>Services</span></a></li><li><a href=”#” title=””><span>Our Work</span></a></li><li><a href=”#” title=””><span>Contact Us</span></a></li></ul></div>

Customization

Now when you liked any menu from the above list, copy the code from the box and paste it inside an HTML/JavaScript widget in Blogger and then drag that widget right below the header; see the example image below:

I added one of the above menus into an HTML/JavaScript widget and dragged that below the header as showing in above image and that menu is looking like below image on my blog:

Now if you want to replace your links and anchor texts with the default ones then simply find lines like below one in the above code:

<ul><li><a href=”#”><span>About Us</span></a></li></ul>

All the li tags are within ul tag, and the <a href=”#”> is the link; so you can replace the (#) sign with your link and the default text (About Us, Services, Our Work etc) with your anchor text.

Your Turn:
These were some horizontal CSS menus for blogger and other websites, if you’ve questions or facing difficulties while adding them to your blog then do ask me in comment section. We will also share more collection of Vertical CSS menus and CSS drop down menus very soon. Stay connected with us.