Проблема в вертикальном меню навигации с использованием CSS спрайтов - PullRequest
Новая
       12

Проблема в вертикальном меню навигации с использованием CSS спрайтов

2 голосов
/ 06 июня 2010

Я пытаюсь создать вертикальное меню навигации с использованием CSS-спрайтов. Я хочу добавить эффект парения, когда пункт меню немного выдвигается. 

a:link {
  background: url(images/nav.png);
  background-position: -100px 0px;
  width: 150px;
}

a:hover {
  background: url(images/nav.png);
  background-position: -100px 0px;
  width: 160px;
}

Таким образом, я использую одно и то же изображение спрайта для ссылок a: link и a: hover. Я просто увеличиваю ширину в случае: hover, чтобы создать эффект всплывающего окна.

Рассмотрим эту аналогию. Если все мои вкладки выровнены при x = 0, вот мой сценарий в настоящее время. 

a:link   tab start: x=-100   tab end: x=0  // this is how all links are arranged
a:hover  tab start: x=-110   tab end: x=0  // this is how I want them on hover
a:hover  tab start: x=-100   tab end: x=10 // this is how its panning out

Вот мой полный код CSS: 

#navmenu {
    left: 100px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 150px;
    width: 150px;
    z-index: 99;
}

#navmenu ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

#navmenu ul li {
    line-height: 1.5em;
    padding: 0px;
}

#navimenu ul li a {
    color: black;
    display: block;
    font-weight: bold;
    height: 26px;
    padding: 0px 15px 0px 0px;
    text-align: right;
    width: 150px;
}

#navmenu a:link, #navmenu a:visited {
    background: url(images/nav.png) no-repeat;
    background-position: -150px 0px;
    width: 150px;
}

#navmenu a:hover {
    background: url(images/nav.png) no-repeat;
    background-position: -150px 0px;
    width: 160px;
}

Может ли кто-нибудь помочь мне здесь?

Спасибо

1 Ответ

1 голос
/ 06 июня 2010

Ну, если вы хотите переместить его вверх или вниз, то вы должны изменить позицию y (то есть вторую), и если вы хотите, чтобы она скользила влево или вправо, вы должны изменить позицию x: 1001 * 

background-position: x y;

Итак, если я правильно понимаю, вы хотите, чтобы фоновое изображение было выровнено по левому краю, даже когда вы наводите ссылку: 

#navmenu a:hover {
    background: url(images/nav.png) no-repeat -160px 0;
    width: 160px;
}

Это то, что вы хотите?

Кстати, ваш вопрос немного двусмысленный. Вы говорите, что размер изображения «увеличивается вправо» (я не знаю, что вы подразумеваете под этим, но это относится к оси X), а затем вы начинаете говорить о «основании» и «голове» (ось у)

...