Create a Slick Menu using CSS3 ~ Online Education

Today we are going to add a navigation menu named Slick Menu using css3 as it is going towards success day by day. It is quite simple to add this it is clear from any thing no ~~Javascript~~ no ~~images~~ and as well as ~~Jquery~~ simple just Css.

Live Demo

Follow the steps:
The entire process involves simple steps. Follow these instructions:

Go To Blogger > Settings > Template
Backup your template
Click Edit HTML > Proceed
Search for ]]></b:skin>
Just above it paste the following code:

.wrapper {

    width: 100%;

    height: 80px;

    background : #464646;

    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));

    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));

    border-top: 2px solid #939393;

    position: relative;

    margin-bottom: 30px;

}

ul {

    margin: 0;

    padding: 0;

}

ul.menu {

    height: 80px;

    border-left: 1px solid rgba(0,0,0,0.3);

    border-right: 1px solid rgba(255,255,255,0.3);

    float:left;

}

ul.menu li {

    list-style: none;

    float:left;

    height: 79px;

    text-align: center;

    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );

    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);

    }

ul li a {

    display: block;

    padding: 0 20px;

    border-left: 1px solid rgba(255,255,255,0.1);

    border-right: 1px solid rgba(0,0,0,0.1);

    text-align: center;

    line-height: 79px;

    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));

    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));

    -webkit-transition-property: background;

    -webkit-transition-duration: 700ms;

    -moz-transition-property: background;

    -moz-transition-duration: 700ms;

    }

ul li a:hover {

    background: transparent none;

}

ul li.active a{

    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );

    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);

}

6. Now search for <body> and just below it paste it paste the following code:

<div class="wrapper">

<div class="container"><ul class="menu" rel="sam1">

<li class="active"><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li ><a href="#">Blog</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">Portfolio</a></li>

<li><a href="#">Contacts</a></li>

<li><a href="#">Twitter @insic</a></li>

</ul>

</div>

</div>

Tips:

Replace'#' with your desired link

7. Save your template and all done!
Visit the new page and see if things are as you planned. :)

NEED HELP:
if you so please kindly ask your questions we will share a lot of other things with you in up coming tutorials take care peace buddies =)

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you Subscribe to our regular Email Updates !

Complicated ?

If you have any question about any Post, Don't hesitate to ask question.You can simply drop a comment below post or contact via contact Us form by Clicking Here Your Feedback always appreciated.

Online Education

UNDERMENTANACE

Friday, 15 February 2013