Hello buddies, today I've come up with a super simple navigation menubar using CSS and CSS3 transition. Focusing on the basics of navigation menu, it is made using unordered list. The list-style-type is set to none, so that all the bullets before the lists are removed. Before going through the tutorial, I hope you're familiar to CSS basics and CSS3 Transitions. If you're not then please hop over to the resource section to make those topics clear in your mind.
You should look the live demo of the Menubar before going through the tutorial.
CSS is all about creativity. Be creative and just make something different of what you learnt here. Just imagine something that add in this navbar. You can edit directly into live demo, as it's coded on Codepen.
The Basic HTML:
The basic HTML contains the ul and a class "nav" attached to it to give better functionality. As you've seem in the demo our lists get colored when the cursor is hovered. So, we apply each list a class, namely red, blue, green and purple.
<ul class="nav"> <li class="red"><a href="#">Home</a></li> <li class="blue"><a href="#">About</a></li> <li class="green"><a href="#">Contact</a></li> <li class="purple"><a href="#">Creation</a></li> </ul>
Styling up the Menubar
Well, for the CSS part, the background is kept black for the class nav. Every list element is of different color as mentioned above. But, to make it bit simple and sexy, CSS3 Transitions are added to it. So, to convert unordered list into horizontal bar we need to set the all "li" means the list items to float towards left. That'll make the ul element to transform into horizontal bar. The li elements are given a padding of .3em at top- bottom and 1em for left-right. I've imported fonts using @import(to more about check resource).
@import url(http://fonts.googleapis.com/css?family=Lily+Script+One);
.nav {
width: 100%;
margin:0 0 2em 0;
padding:0;
float:left;
list-style-type: none;
background:#4c4c4c;
}
.nav li {
float: left;
padding:.3em 1em .3em;
border-right:1px solid #fff;
}
.nav li a
{
color:#fff;
text-decoration:none;
font-family: 'Lily Script One', cursive;
font-weight:500;
font-size:1.5em;
}
.red:hover
{
-webkit-transition:background-color 1s linear;
background:#ff1919;
}
.blue:hover
{
-webkit-transition:background-color 1s linear;
background: #2EB8E6;
}
.green:hover
{
-webkit-transition:background-color 1s linear;
background: #66FF33;
}
.purple:hover
{
-webkit-transition:background-color 1s linear;
background:#993399;
}
CSS is all about creativity. Be creative and just make something different of what you learnt here. Just imagine something that add in this navbar. You can edit directly into live demo, as it's coded on Codepen.
0 comments:
Post a Comment