изменение атрибутов на часть слайда вверх меню Div - PullRequest
Новая
       22

изменение атрибутов на часть слайда вверх меню Div

0 голосов
/ 06 апреля 2011

Я работаю над этим меню, http://www.kerrydean.ca/MATHESON/home2.html

оно работает довольно хорошо, но ... по третьему пункту меню должно скользить намного дальше, чем другие.Все они находятся в пределах ul 

<div class="container">
    <ul id="menu">
        <li>
            <a>

                <span class="title">&bull; control valves</span>
                <span class="description">
                    vee ball<br />
                    butterfly control<br />
                    rotary eccentric plug<br />
                    globe<br />
                    severe service and special
                </span>
            </a>
        </li>
         <li>
            <a>

                <span class="title">&bull; saftey relief &amp; rupture discs</span>
                <span class="description">
                    compact<br />
                    high performance<br />
                    API<br />
                    clean service<br />
                    fully lined<br />
                    rupture discs<br />
                </span>
            </a>
        </li>
        <li>
            <a>

                <span class="title">&bull; automated shut off valves</span>
                <span class="description">
                    soft seated ball valves<br />
                    high performance butterfly valves<br />
                    resilient seated butterfly valves<br />
                    metal seated ball valves<br />
                    triple offset vales<br />
                    multi-port ball valves<br />
                    knife gate valves<br />
                    gate and globe valves<br />
                    pneumatic actuators<br />
                    electric actuators<br />
                    hydraulic actuators<br />
                    accessories
                </span>
            </a>
        </li>
         <li>
            <a>

                <span class="title">&bull; manual valves</span>
                <span class="description">
                    Search our website
                </span>
            </a>
        </li>
    </ul>
</div>

вот css и jquery 

.container{
    width:799px;
    height:300px;
    margin:0 auto;
    position:relative;
    overflow:hidden;
    z-index: 100;
}
ul#menu{
    list-style:none;
    position:absolute;
    bottom:-25px;
    left:20px;
    font-size:13px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: normal;
    color:#999;
    letter-spacing:-1px;

}
ul#menu li{
    float:left;
    margin:0px 10px 0px 0px;
}
ul#menu a{
    cursor:pointer;
    position:relative;
    float:left;
    bottom:-95px;
    line-height:20px;
    width:150px;
}
ul#menu span.title{
    display:block;
    height:26px;
    color:#B7B7B6;
}
ul#menu span.description{
    width:138px;
    height:120px;
    background-color:#B7B7B6;
    border:1px solid #fff;
    color:#fff;
    display:block;
    font-size:12px;
    padding:10px;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: .5px;
}

$(function() {
    $('#menu > li').hover(
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-15px'
                }, 300);
           },
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-100px'
                }, 300);
        }
    );
});

спасибо заранее!

1 Ответ

0 голосов
/ 06 апреля 2011

Не указывайте явную высоту .description в вашем CSS или используйте min-height. Вместо этого позвольте ему обернуться как обычно к той высоте, которой он хочет быть. Затем, вместо ссылки на явное смещение анимации пикселя, получите высоту LI и используйте ее.

Как то так (не проверено): 

$(function() {
    $('#menu > li').hover(
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-15px'
                }, 300);
           },
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom': $(this).height() + 'px'
                }, 300);
        }
    );
});
...