Blog
CSS
HTML
JQuery
JScript
Website
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.
This CSS3 navigation bar uses CSS3 animation to swap between the text and image when a user hovers the navigation bar. No jQuery and JavaScript is add in this navigation bar and this bar can be used on both a website or a blog. Features and Installation method for this CSS3 slider are as follows:
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/AVvXsEgNPQApZRcxHaXAevG3LQ6v9oHHAvIi_0QdmnDllIR8jRGcShiHplFxnsnIQUR3pGZDVxB1owMCUGiR5VzYl_tNbjbLnFLhRWUsvMV1fmY-urd5WHBgXam3VXnJk8-f2vetmvteDXFo5e4/s24/bloglogo.png">
<br/><span class="name">Blog</span>
</a>
</li>
<li>
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxkTkSMoZuwaPv0MMdJoYnFSenWhWPTu7C2F108J-ywYpCYma_KGVhL9fh3o3ezHx7ZA-JSeMJ5Y2Bfg9WVtJ5wuGhAdAJet10odqIvDrT_E1XH25EiHwPTcn9NsIkwsPYyBLLVehQ9po/s24/csslogo.png">
<br/><span class="name">CSS</span>
</a>
</li>
<li>
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9OsP7EiI5O-nBqlJH4EHETNknlwQm2TgBtUKM18LNbJdLbT9hqw7StD9tTlykULLRB6pKDoWg81ioExo63I3-gxnP6yDk3L3Pfs1TGpU3rWIPCTS1uxg0HApIZPYVfnMe8XwwdfO6mcs/s24/htmllogo.png">
<br/><span class="name">HTML</span>
</a>
</li>
<li>
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3nz03T-WNwsB1LUblm9h1zKoCV_RhyphenhyphenTzdI1o5svm7TjtOSVdxJUq6OsNDT-AfsiCy7t2-MWfckAOkkfoddXb9yH1Riy4UosoJ6nmdedJ3nozyjpGcbSHi6Xpd29MWbhjhD27nY1vtk0I/s24/jscriptlogo.png">
<br/><span class="name">JScript</span>
</a>
</li>
<li>
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6xT2gAbDUjl5qYzOy_qpqFo6M2CWs_oyHETiJ5LPKhzRKVKBv-6WnWWcVtnrHMWFdjyT3zGm1i4l1naSuefGfpD2EvXjB-Y36IM9PAg6c8qoSQLQUdisoEGrQjBVIaB1F6y5CkYLKXac/s24/jquerylogo.png">
<br/><span class="name">jQuery</span>
</a>
</li>
<li>
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIuRyLj0val0wOMPXDuusPYuGlKUNtr76i0R0i4xZgAweEhEqXMJTuVsAbF7fJXR-IXW6cQrv3DWOvboTma6kIfx8zSv99fy2-n1RojAQ3WIe8IAEnCzgEddMg7_69efyA5jx9RbNkcI0/s24/websitelogo.png">
<br/><span class="name">Website</span>
</a>
</li>
</div>
Customization
You can change approximately all the CSS to your taste.
If you have any queries feel free to ask.
It contains truly information. I want to thank you for this informative read; I really appreciate for sharing this great post......
ReplyDeleteGreat Post..... Thanks For Share It
ReplyDeleteFree Submit Articles Without Registration PR 4
Thanks for the share..pmp training
ReplyDeleteHappy New Year in Advance. Write thoughts to friends & give wishes for New Year.
ReplyDeleteMaking user friendly navigation is very important for website.The information of this blog well really helpful to create the stylish and colourful navigation to the websites.
ReplyDeleteWeb Design Company | Web Design Companies
Thanks for sharing this nice blog with us. Web Development Company Bangalore | Web Design Companies BangaloreBangalore Web Services
ReplyDeleteA very well-written post. I read and liked the post and have also bookmarked you. All the best for future endeavors. Getting some solution regarding.
ReplyDeleteTechnolgy, online reputation management ,Business Information Blog
This is really nice because it well informative for me and hope for others also keep it continued so that we can get benefits
ReplyDeletesubtitling services india, subtitling company in bangalore
I read your post, this post is very useful for every needy person. Thank you so much for sharing this post. I was in search for something like this kind of a information. web hosting
ReplyDelete
ReplyDeleteThanks for this information. it is helpfull and worthy
Laptop Repair Center offers quality service for your laptop at a reasonable cost. We offer doorstep support, 24*7 onsite support, repair all brand laptops, have an expert team for onsite support, and much more. for more contact us on 7291903784
laptop repair center in Delhi
Excellent post, Thanks for sharing this.
ReplyDeleteLearn more about Product Management Certification and also many other courses to get the best knowledge.