Проблема навигации по списку HTML с неравномерным дизайном - PullRequest
Новая
       10

Проблема навигации по списку HTML с неравномерным дизайном

3 голосов
/ 02 августа 2010

Наш дизайнер создал навигацию, которая визуально выглядит так:

Панель навигации

Структура HTML которой: 

<ul>
    <li class="first">Home</li>
    <li>Schools</li>
    <li>Scores</li>
    <li>Sports</li>
    <li>Blogs</li>
    <li>Podcasts</li>
    <li class="last">Forums</li>
</ul>

Я не могу понять, есть ли способ сделать это так, чтобы при наведении мышки, скажем, «Спорт», изображение стрелки влево и вправо меняло цвет на темно-красный. Есть ли способ сделать это?

Пока это мой CSS, но он меняет только стрелку справа от ссылки: 

#mainNav ul li{
    float: left;
    background-color: #ed1c24;
    padding: 7px;
    padding-right: 21px;
    background-image: url('/images/red_arrow.png');
    background-repeat: no-repeat;
    background-position: right;
}
    #mainNav ul li.first{
        padding-left: 14px;
    }
    #mainNav ul li a{
        text-decoration: none;
        color: #FFF;
    }
#mainNav ul li:hover{
    background-color: #d5171f;
    background-image: url('/images/red_arrow2.gif');
}

Ответы [ 5 ]

3 голосов
/ 27 августа 2010

Вам понадобится что-то вроде этого: http://jsfiddle.net/2xXQC/

Обратите особое внимание на отрицательный margin-left на каждом элементе списка, который вызывает их перекрытие. Изображение, которое вам понадобится, выглядит примерно так: 

_____
\    \
/____/

Note to self: Seriously brush up on ASCII art skillz

За исключением первого. Однако запомните, какая привязка выбирается при наведении курсора. Элементы HTML всегда прямоугольные, поэтому вы не сможете получить область попадания, чтобы сформировать форму стрелки.

1 голос
/ 14 сентября 2010

Просто сделайте так, чтобы на изображении при наведении курсора были обе стрелки на одном изображении, затем расположите его так, чтобы оно охватывало обе стрелки.

0 голосов
/ 03 сентября 2010

Вам не нужно использовать JavaScript. CSS Sprites справляются с работой мыши. Вот хорошая статья:

http://www.dave -woods.co.uk / index.php / наведения мыши-изображения, используя-CSS-спрайты /

Вот эта техника в действии: http://www.rackspace.com/apps

РЕДАКТИРОВАТЬ: я вижу проблему. Вы должны сделать ОБА стрелки. Но вы все равно можете сделать это с помощью CSS, просто увеличив z-индекс для состояний наведения (вам нужно, чтобы ваш спрайт включал стрелки влево и вправо):

a: hover { background-position: 0 40px; z-индекс: 10; }

0 голосов
/ 27 августа 2010

Если в ваших red_arrow.png и red_arrow2.gif есть обе стрелки, вы, возможно, сможете возиться с z-index, но потребуется много настроек, чтобы все выстроилось правильно.

Вероятно, вам лучше использовать спрайт css и точную настройку позиции наведения в css.

Проверьте текст ссылки для некоторых хороших уроков и идей.

0 голосов
/ 11 августа 2010

Готов поспорить, что фоновое изображение для каждого элемента списка имеет только стрелку вправо.

Используя Css, вы воздействуете только на фоновое изображение, над которым вы фактически наводите курсор.

Если вы используете для этого javascript (или jquery) (onHover), у вас будет доступ к «событию» onHover, в рамках которого вы сможете воздействовать на что-либо еще на странице, а не только на изображение, которое вы снова завис. В этом случае вам нужно поменять местами изображение, над которым вы наводите курсор, а также изображение слева от него.

...