Trick and Tips: Beautiful CSS Horizontal Menus for Blogger Websites

Sunday, January 25, 2015

Beautiful CSS Horizontal Menus for Blogger Websites

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 youre 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 Im going to share, the codes are in boxes 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 Menu # 2 Code:

CSS Menu # 3 Code:

CSS Menu # 4 Code:

#menu123{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF11UmDgbapYJmxxVDljmYBeLc9EpvyPKfTg5eVYAYopIIOJYECw6C6UunL189RtZVrt-es1Y-ejOb9elDmWjhHcQImVrENiKlD2kh1aufZZ0eJlaWR7ScCEq2jwa26dVz_GcHwjErMYeb/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpnZceWvI_uQiZfzqPX5yRpPjqPtbaflGCNlDXD9oxSVlrDJ5MESF2hJ3XBPH_tIVEuMkBmd5K6tBNnPPCA_nDuwMdAUobrPgSGlHy9_YcwypzVRO1vLdrS8M9B3_tNoiyXgXvzUts_UtV/s1600/tableft9.gif) no-repeat top center;} <div id="menu123"> <ul><li>Home</li><li>About Us</li><li>Services</li><li>Our Work</li><li>Contact Us</li></ul></div>

CSS Menu # 5 Code:

#menu555{position:relative;display:block;height:39px;font-size:11px;font-weight:bold;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigxDTyg-_ghsnAEBiLL7fPOgrlvpa83iPvX3eaBleHMasPqL4ryZEoJ5qRLBxFlCzTLYi2U1jW34vNbqF87sHv2nf902wL-Na_ocgwC7HQhsgOf3CaZtTi7z9JCTHXsEYvbrfiEzzey2LE/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFmNxOOVa9SGLW0joqNzeNYkgCaDhJUnsYbkuoHU33IPXMdN9xZ1FWnNWIhowuTBEPnh4iDZlH3f_XCyk2Gm0rUtvhd1yLAJT9TwDr7DIi8FZheUL3YJnBxtKCy8YZ-A9V04hjbWuGOPA2/s1600/bgDIVIDER1.gif) no-repeat top right;} #menu555 ul li a:hover,#menu555 ul li a.current{color:#B30000;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjblIywVNnErFa4eUdDmWH2VlwttIlJ4v4AN7oyAl_yJN1O3y9nIJQjKJwiqIOEpAa83udO3Nj7-sJWxokhnKEbYYW8onzlX7vGKbFbH82GcWCFujXUO6hOiH-s8KYb1jH83jBEpkCP6jdI/s1600/bgON1.gif) no-repeat top right;} <div id="menu555"> <ul><li><span>Home</span></li><li><span>About Us</span></li><li><span>Services</span></li><li><span>Our Work</span></li><li><span>Contact Us</span></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 youve 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.

Trick and Tips