Skip to content

Animeted Menu Bar

12/01/2012

Hi,

i am learning css, i created simple Animated menu bar, let see

first create the menu link like


<html>
<head>
<title>Testing menu</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="menu.css">
</head>
<body>
<div id='container'>
<div id='navbar'>
<ul>
<li><a id='image1' href='#'>Image1</a></li>
<li><a id='image2' href='#'>Image2</a></li>
<li><a id='image3' href='#'>Image3</a></li>
<li><a id='image4' href='#'>Image4</a></li>
<li><a id='image5' href='#'>Image5</a></li>
<li><a id='image6' href='#'>Image6</a></li>
<li><a id='image7' href='#'>Image7</a></li>
<li><a id='image8' href='#'>Image8</a></li>
</ul>
</div>
</div>
</body>
</html>

i included here reset.css. This css used to reset all the default properties for the element. Then we write the our own css to over write the existing css setting.

in my reset.css


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

In my menu.css file


#container{
width:500px;
margin:auto;
}
ul{
overflow:hidden;
line-height: 83px;
}
li{
float:left;
}
li a{
background:url(streaky.gif);
height:83px;
width:60px;
display:block;
text-indent: -999em;
}
li #image1{
background-position: 0px 0px;
width:46px;
}
li #image2{
background-position: -46px 0px;
width:52px;
}
li #image3{
background-position: -98px 0px;
width:73px;
}
li #image4{
background-position: -171px 0px;
width:72px;
}
li #image5{
background-position: -241px 0px;
width:59px;
}
li #image6{
background-position: -300px 0px;
width:82px;
}
li #image7{
background-position: -382px 0px;
width:56px;
}
li #image8{
background-position: -438px 0px;
width:44px;
}

li #image1:hover{
background-position: 0px -83px;
width:46px;
}
li #image2:hover{
background-position: -46px -83px;
width:52px;
}
li #image3:hover{
background-position: -98px -83px;
width:73px;
}
li #image4:hover{
background-position: -171px -83px;
width:72px;
}
li #image5:hover{
background-position: -241px -83px;
width:59px;
}
li #image6:hover{
background-position: -300px -83px;
width:82px;
}
li #image7:hover{
background-position: -382px -83px;
width:56px;
}
li #image8:hover{
background-position: -438px -83px;
width:44px;
}

This image i used to show animate

It is not hard. First i set this image to link background, then i only change the image position for every link.

that’s it..:)


Do it while move mouse on the image it show as animation. like above images..

thanks–

Advertisements

From → Uncategorized

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: