Home/ Questions/Q 557963
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T12:04:55+00:00

I’m trying to make hover effect which will change height of li (list) element

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Normally you have to change the ‘top’ position as well as the height so that the resulting position is +/- the same amount as the change in size. Alternately could could have an element absolutely positioned within another from the bottom. (for example: position:absolute; bottom: 40px)

    • 0