Как настроить навигацию с затухающим (спрайтовым) фоновым изображением - PullRequest
Новая
       46

Как настроить навигацию с затухающим (спрайтовым) фоновым изображением

2 голосов
/ 07 августа 2011

Я разработал спрайт, который выглядит следующим образом:

enter image description here

Идея состоит в том, чтобы верхняя часть изображения появлялась при наведении (в навигационной системе). У меня все работает, кроме текста для элементов навигации. Как вы можете видеть на этой странице , текст для навигации постепенно исчезает вместе с фоновым изображением, поскольку он содержится в затененном диапазоне. Интересно, может ли кто-нибудь помочь мне разобраться, как я могу постоянно показывать текст.

Вот HTML: 

<ul class="navigation">
    <li><a href=""><span>home</span></a></li>
    <li><a href=""><span>contact</span></a></li>
</ul>

И CSS: 

body, ul,li { 
    margin:0;
    padding:0;
}

ul {
    list-style:none;
    text-align: center;
    color: white;
    line-height: 30px;
}

ul a {
    text-decoration: none;
    color: white;
    font-size: 18px;
}

.navigation li { 
    background: url(nav.png) no-repeat 0 -30px;
    width: 223px;
    height: 30px;
}

.navigation li span {
    background: url(nav.png) no-repeat 0 0px;
    width: 223px;
    height: 30px;
    display: block;
    opacity: 0;
    filter: alpha(opacity=0);
}

и сценарий: 

$(document).ready(function() {
    $(".navigation li a").hover(function () {
        $(this).children("span").stop().animate({
            opacity: 1
        }, 300);
    }, function () {
        $(this).children("span").animate({
            opacity: 0
        }, 400);
    });
});

Спасибо

Ник

Ответы [ 2 ]

3 голосов
/ 07 августа 2011

Это должно сработать.Пример из жизни: http://jsfiddle.net/zDwP9/2/

HTML: (перемещено span вне тега a) 

<ul class="navigation">
    <li><a href="">home</a><span></span></li>
    <li><a href="">contact</a><span></span></li>
</ul>

Изменения CSS: (Расширен li, плавающий a влево и span вправо, отрегулированная ширина и положение фона span) 

ul a {
    text-decoration: none;
    color: white;
    font-size: 18px;
    float:left;
    width: 204px;
}

.navigation li span {
    background: url(nav.png) no-repeat -204px 0;
    width: 30px;
    height: 30px;
    display: block;
    opacity: 0;
    filter: alpha(opacity=0);
    float:right;
}

jQuery / JavaScript: (изменен селектор изli a до li) 

$(document).ready(function() {
    $(".navigation li").hover(function () {
        $(this).children("span").stop().animate({
            opacity: 1
        }, 300);
    }, function () {
        $(this).children("span").animate({
            opacity: 0
        }, 400);
    });
});
1 голос
/ 07 августа 2011

Не помещайте фоновое изображение на промежуток.

HTML 

<ul class="navigation">
    <li><a href=""><div class="background"></div><span>home</span></a></li>
    <li><a href=""><div class="background"></div><span>contact</span></a></li>
</ul>

CSS 

.navigation li { 
    position: relative;
    background: url(nav.png) no-repeat 0 -30px;
    width: 223px;
    height: 30px;
}

.navigation li span {
    width: 223px;
    height: 30px;
    display: block;
    opacity: 0;
    filter: alpha(opacity=0);
}

.navigation li .background {
    position: absolute;
    top: 0px;
    left: 0px;
    background: url(nav.png) no-repeat 0 0px;
    width: 223px;
    height: 30px;
}

JS 

$(document).ready(function() {
    $(".navigation li a").hover(function () {
        $(this).children(".background").stop().animate({
            opacity: 1
        }, 300);
    }, function () {
        $(this).children(".background").animate({
            opacity: 0
        }, 400);
    });
});
...