Меню с установками hover, link, visited

Новые сообщения

Страница 1 из 1 1
Модератор форума: chocopie, Samuel, Mihail

ZAN

пользователь

Сообщений: 7

Репутация:

off-line Добавлено: 2012-Янв-02 - 20:36 | Сообщение #1

Ув. Никита smile

Объясни, как создать меню, чтобы при наведении в меню было сначало так:

Ссылка вдавленная с помощью text-shadow и задний фон к ней соответсвующий с позицией 0 - указывающая на верх картинки и -28 - указывающая на низ картинки. (При наведении) + к наведению стиль text-shadow выпуклый текст.

В общем, мне нужно только пояснение о стили текста и изменение картинок.

профиль цитировать

proucoz

администратор

Сообщений: 1611

Репутация:

off-line Добавлено: 2012-Янв-02 - 20:46 | Сообщение #2

В общем смотри как примерно код будет выглядеть...

Code

#menu li a:link, #menu li a:visited { color: #FFF; display: block; height: 32px; background: url('/menu.gif'); padding: 8px 0 0 35px; text-shadow: black 1px 1px 2px, red 0 0 1em; /* Параметры тени */ } #menu li a:hover { color: #FFF; height: 32px; background: url('/menu2.gif') 0 -32px; padding: 8px 0 0 35px; text-shadow: black 1px 2px 1px, red 0 0 1em; /* Параметры тени */ }

Что не понял спрашивай

Хочешь в команду сайта? Пиши! Контакты в профиле.

профиль цитировать

ZAN

пользователь

Сообщений: 7

Репутация:

off-line Добавлено: 2012-Янв-02 - 20:54 | Сообщение #3

А выводить в HTML как?

div id="menu"? Или ul id="menu"? Распиши...

И все равно ничего не выходит. Посмотри на сайте.

Сообщение отредактировал ZAN - Понедельник, 2012-Янв-02, 20:56

профиль цитировать

proucoz

администратор

Сообщений: 1611

Репутация:

off-line Добавлено: 2012-Янв-02 - 20:58 | Сообщение #4

ZAN, выводить так:

Code

<ui class="menu">
<li id="menu"><a href="/">ankor</a></li>
<li id="menu"><a href="/">ankor</a></li>
<li id="menu"><a href="/">ankor</a></li>
<li id="menu"><a href="/">ankor</a></li>

Класс menu пропишешь в CSS сам, это обычно размер шрифта, общий фон, размер и т д.

Хочешь в команду сайта? Пиши! Контакты в профиле.

профиль цитировать

proucoz

администратор

Сообщений: 1611

Репутация:

off-line Добавлено: 2012-Янв-02 - 21:08 | Сообщение #5

ZAN, и CSS поправь, я напутал там)

Code

li#menu { color: #FFF; display: block; height: 32px; background: url('/menu.gif'); padding: 8px 0 0 35px; text-shadow: black 1px 1px 2px, red 0 0 1em; /* Параметры тени */ } li#menu:hover { color: #FFF; height: 32px; background: url('/menu2.gif') 0 -32px; padding: 8px 0 0 35px; text-shadow: black 1px 2px 1px, red 0 0 1em; /* Параметры тени */ }

Хочешь в команду сайта? Пиши! Контакты в профиле.

профиль цитировать

ZAN

пользователь

Сообщений: 7

Репутация:

off-line Добавлено: 2012-Янв-02 - 21:18 | Сообщение #6

Code

li#menu {
  background:  url('/blocks/link_f.png') 0 0px;
  background-repeat: no-repeat;
  color: #fff;
  height: 28px;
  padding: 8px 0 0 10px;
  text-shadow: 0px 1px 1px #fff;
}

li#menu:hover {
  background:  url('/blocks/link_f.png') 0 -28px;
  background-repeat: no-repeat;
  color: #fff;
  height: 28px;
  padding: 8px 0 0 10px;
  text-shadow: 0px 1px 1px #fff;
}

Code

<ui id="menu">
<li id="menu"><a href="/">ankor</a></li>
<li id="menu"><a href="/">ankor</a></li>
<li id="menu"><a href="/">ankor</a></li>
<li id="menu"><a href="/">ankor</a></li>
</ul>

Разведка, сос... biggrin

Как убрать точечки у ul?

Code

display: none;

профиль цитировать

proucoz

администратор

Сообщений: 1611

Репутация:

off-line Добавлено: 2012-Янв-02 - 21:19 | Сообщение #7

ZAN,

Code

li {
list-style: none;
}

Хочешь в команду сайта? Пиши! Контакты в профиле.

профиль цитировать

ZAN

пользователь

Сообщений: 7

Репутация:

off-line Добавлено: 2012-Янв-02 - 22:01 | Сообщение #8

Весь правильный рабочий код:

Code

<ul class="menu" id="menu">
<li><a href="/">ankor</a></li>
<li><a href="/">ankor</a></li>
<li><a href="/">ankor</a></li>
<li><a href="/">ankor</a></li>
</ul>

Code

ul#menu {
  padding: 0px;
}

#menu li {
  background:  url('/blocks/link_f.png');
  background-repeat: no-repeat;
  text-decoration: none;
  color: #fff;
  height: 21px;
  list-style: none;
  font-weight: bold;
  padding: 6px 0 0 6px;
  text-shadow: 0px 1px 1px #fff;
}

#menu li:hover {
  background:  url('/blocks/link_f.png') 0 -28px;
  background-repeat: no-repeat;
  color: #fff;
  height: 21px;
  padding: 6px 0 0 6px;
  text-shadow: 0px 1px 1px #fff;
}

.menu a:link {
  text-decoration: none;
}

профиль цитировать

Samuel

заблокированный

Сообщений: 603

Репутация:

off-line Добавлено: 2012-Янв-03 - 14:51 | Сообщение #9

Оффтоп! Тема закрыта!

Выходные - это печенька!

профиль цитировать

Меню с установками hover, link, visited

Страница 1 из 1
1

Вы не авторизованы!

Вакансии