Stylish Colorful & Animated CSS3 Navigation Bar for Blogger

Designing a beautiful and light weight website template is not a problem today. CSS3 and HTML5 have changed the dimensions of the web designing. The web pages that were once driven with heavy flash files and jQuery are now works seamlessly with the power of CSS3 and HTML5.

CSS3 and HTML5 no doubt are supported by new browsers only but they have a strength and ability that makes them usable. In the following post we will try to create a stylish CSS3 navigation bar that, at any cost, is not less than a heavy transitive eye catching jQuery navigation bar.

Live Demo

Features:

Completely CSS3 based.
No JavaScript or jQuery.
Completely customizable.
Easy installation.
Images and text based navigation.

Installation:

Open website or blogger template.
search for the </head> tag.
Copy the CSS code and paste it just before the </head> tag.
Copy the HTML code and paste it in the <body> tag where you want to show it.

CSS Code

<style>#exe_nav{margin: 0px auto;list-style: none;width: 902px;height: 67px;overflow-y: hidden;}#exe_nav li{float: left;}#exe_nav li a{display: block;color: #fff;width: 150px;height: 32px;margin-top: 25px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}#exe_nav li a .name{font: bold 22px/30px "Arial";color: #fff;cursor: pointer;position: relative;top: -30px;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}#exe_nav li a img{position: relative;top: 87px;transition: top .5s ease;}#exe_nav li a:hover{cursor: pointer;}#exe_nav li a:hover img{top: 4px;}#exe_nav li a:hover .name{top: 87px;}#exe_nav li:nth-child(1) a{background-color: #490A3D;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}#exe_nav li:nth-child(2) a{background-color: #E97F02;}#exe_nav li:nth-child(3) a{background-color: #8A9B0F;}#exe_nav li:nth-child(4) a{background-color: #0DC3FF;}#exe_nav li:nth-child(5) a{background-color: #BD1550;}#exe_nav li:nth-child(6) a{background-color: #6E3CAB;border-radius: 0 5px 5px 0;border-right: 1px solid #555;}</style>

HTML Code

<div id="exe_nav"><li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRwpoeUSQYqYSnsjYubMFhks62qK1x03270kuBlgo12KvOdH2v1xW74ooQW8krutRC15nbTLj4YsZsK1H725EHychKieRDTGsLHRC_WPCHMytWyjN6JL92AWn5S723inPkNSq4EgTNsQg/s24/bloglogo.png"><br/><span class="name">Blog</span></a></li><li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGfqauFYb3r0IDyYqJKPPSmeLqqp1W1zwuPdtkdt8tz6arNNdMy99eQAzr4kq_LZ3Dhdr_Cfga1pICry2d2_R9QPUHA7sAzXvbyPkUldHVpE90aLAYCRVfvpNnmzwmjeheR-JMAcGQOfI/s24/csslogo.png"><br/><span class="name">CSS</span></a></li><li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvWPzbSrSvzrfcCCrrDY7aVmbhtFstzepogwW1SWo1VQmDk0kmp5uQ14WPIJdU7DH5gJPYg8LaQ05Buz_r353QLDDr_TkZW0HgR1SJGZTCScLi808-bG2HLjtbH-nyuCNkSo9NH_Hw9lc/s24/htmllogo.png"><br/><span class="name">HTML</span></a></li><li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxUK1zbr1UTnmo6ietTwfbTiLBRvQjXAyN5jBFgQK7rqGnsHbU1MNy2cJmBxiV7mEldC5T0fAfYJiLEGnKKFT5moOlYoDPvE0WQAaTjWd0TQoQXY-8cOdW-XuIxvUJBj185UndONjM0ig/s24/jscriptlogo.png"><br/><span class="name">JScript</span></a></li><li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDltAGBOneYfqs1YX6_7OXf7kcvzhJAAjm0UV8soH8BbxDEbDC8c1PBx9fj8gT3-gZ3d3piX3c3ndkfOfN7wA6QYMie2gyvBtVSw7CfJBI_c-FYpkw7KDYlIvjN06Txf7gj1zzANB1MAc/s24/jquerylogo.png"><br/><span class="name">jQuery</span></a></li><li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0p7TDvZabGMNaDSPQQ2b4eWahxUTjI1_F9LHP1n0_3KX3-7UoSzWtdlBiE7ElZZ-7ayCh4jEgR1Y0E7efpCrpv97Sr9srvsdsYG4TZ8wWWe6zIXVB2cmUk9g70dz8dLQbRuZlRqdE3O8/s24/websitelogo.png"><br/><span class="name">Website</span></a></li></div>