Hi,
I'm trying to make "hover" effect which will change height of li (list) element but upward. Using jquery, I've managed to change height of element but downwards.
Is it possible to change direction upwards?
http://www.izrada-weba.com/vedranmarketic/
css file:
body{
background-color: #252524;
text-align: center;
}
#centriranje{
width: 1017px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#header{
height: 90px;
background: url(img/bg-head.gif) repeat-x;
margin-top: 20px;
}
#logo{
height: 90px;
width: 237px;
float: left;
}
#izbornik{
width: 780px;
height: 90px;
float: left;
}
#izbornik ul{
margin: 39px 10px 0px 0px;
padding: 0px;
list-style-type: none;
overflow: hidden;
position: absolute;
}
#izbornik ul li{
float: left;
width: 36px;
height: 41px;
margin-right: 2px;
background-position: top;
background-repeat: no-repeat;
border: 1px solid white;
}
#izbornik ul li#home{background-image: url(img/izbornik-home.gif);}
#izbornik ul li#news{background-image: url(img/izbornik-news.gif);}
#izbornik ul li#shop{background-image: url(img/izbornik-shop.gif);}
#izbornik ul li#info{background-image: url(img/izbornik-info.gif);}
jquery file:
$(document).ready(function(){
$(".tab").fadeTo("fast", 0.7); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".tab").animate({height:'36px'},{queue:false,duration:500});
$(".tab").hover(function(){
$(this).fadeTo("fast", 1.0);
$(this).animate({height:'41px'},{queue:false,duration:500});
},function(){
$(this).fadeTo("fast", 0.7);
$(this).animate({height:'36px'},{queue:false,duration:500});
});
});
html:
<body>
<div id="centriranje">
<div id="header">
<div id="logo"><a href="http://localhost/vedranmarketic"><img src="img/logo.jpg" width="237" height="64" border="0" /></a></div>
<div id="izbornik">
<ul>
<li id="home" class="tab"></li>
<li id="news" class="tab"></li>
<li id="shop" class="tab"></li>
<li id="info" class="tab"></li>
</ul>
</div>
</div>
</div>
</body>
Thanks in advance! Ile