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.

css menus

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:

CSS menu1

<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:

CSS menu2

<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: 

css menu3

<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: 

css menu4

 #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: 

CSS menu5

#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:

menu-in-header

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:

menu-css

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.

About Abdul Wali

Abdul Wali is a Web Developer, SEO Consultant and Online Instructor working online for last 6 years on the internet and managing several successful websites. You can contact him via Email or follow him on Facebook. Also add him on .

Check Also

FileZilla FTP in Urdu

How to Upload HTML website to Online Server in Urdu

Few days back, we learnt creating a complete website layout by using HTML and CSS. …

  • usman

    How i can split my Header int two parts one for my blog title and one for advertisement my blog have only 1 header i confused .please help wali bahi. Thanks in advanced

    • You can go to your template setting and can make another banner for your blog to make two separate sections inside header, but this is not easy job.

  • How i can split my Header int two parts one for my blog title and one for advertisement my blog have only 1 header i confused .please help..

  • how i can align gadgets horizantal

  • Cool tutorial i have found a website with good menu bars and other css designs you may like the designs.

    http://freebietemplate.com/css-designs/css-designs.html

    have a nice day

  • I follow ur code, but it is not working on my blog, check this…… apnakhazana.blogspot.com

    I mean it is now show at page, only dorpdown menu,

    check it, ur code is below the title of blog,