Навигация по ролловерам с помощью CSS и применение jQuery - PullRequest
Новая
       21

Навигация по ролловерам с помощью CSS и применение jQuery

0 голосов
/ 07 октября 2010

Я хотел бы знать, как бы я создал ролловеры для моей панели навигации, а также применил JQuery, чтобы установить непрозрачность от 0 до 100, когда навигация была выполнена, если это возможно.

Моя навигация при зависании. Свечение в письмах.

alt text

HTML: (игнорировать пустые элементы div) 

<nav>
    <ul>
      <div class="ref1"><!-- empty div for reflections --></div>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Client Login</a></li>
      <li><a href="#">Support</a></li>
      <li><a href="#">Contact</a></li>
      <div class="ref2"><!-- empty div for reflections --></div>
    </ul>
  </nav>

CSS: 

nav { background: #282828 url(../images/nav-bg.png) repeat-x; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; margin: 24px auto;  width: 638px; }
nav ul { padding: 18px 0;  }
nav ul li { background: url(../images/nav-sep.jpg) left center no-repeat; display: inline; padding: 32px; margin: 0 auto;  }
nav ul li:first-of-type { background: none; }
nav ul li:last-of-type { background: url(../images/ref2.png) no-repeat right bottom; margin: 10px 0 0 0; }
nav ul li a { color: #626262; font: 16px Arial, Helvetica, serif; }
nav ul li a:hover { color: #dfdfdf; }

1 Ответ

0 голосов
/ 07 октября 2010

что вам нужно сделать, это настроить ваши ролловер изображения. Один для обычного состояния "unhovered" и один для "hovered" и применения соответствующих классов к ссылкам навигации. 

...
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About Us</a></li>
...

Затем вы можете использовать CSS для отображения изображения в качестве фонового изображения при наведении элемента: 

<li><a href="#" class="home">Home</a></li>

nav ul li.home:hover {
background: url(../images/home-hover.jpg);
display: block;  /* apply this to give the element the dimensions of your image*/
width: 69px; /*width of your nav image*/
height: 25px; /*height of your nav image*/
}

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

Кроме того, вы можете проверить CSS Sprites

...