<<...первую версию смотрите здесь
Новый вариант несколько проще, но приятнее. Интересно иногда возвращаться к старым "разработкам". На старый вариант меню, как я помню, у меня день ушел, а сегодня сделал нечто подобное за десять минут... Речь идет о том меню, которое висело на старой версии сайта. Сразу напомню, что Нетскейпы до шестого подобных финтов не понимают и выводят просто полоску с ссылками. Что сделать... Я использовал подобный вариант с целью "непривлечения" графики. Ресурс информационный, да и хотелось сделать что-то совсем легкое. Кроме того, по некоторым источникам, у нас в России 80% интернет-населения "ходят" на Эксплорерах.
Меню. Обычная табличка, параметрам каждой ячейки заданны описания стилей. Нам, напомню, надо сымитировать четыре состояния кнопки: кнопка в "покое", кнопка при наведении мышки, при нажатии, при отпускании. Привожу описание стилей:
.k { background: #1D68D3;
border-top: 2px solid; border-top-color: #7FAFE2;
border-left: 2px solid; border-left-color: #7FAFE2;
border-bottom: 2px solid; border-bottom-color: #0040A5;
border-right: 2px solid; border-right-color: #0040A5;
FONT-SIZE: 10px; }
.k A { font-family: MS Sans Serif, tahoma, sans-serif;
FONT-SIZE: 10px; color:#FFFFFF; text-decoration:none;
FONT-WEIGHT: bold;}
.k A:Hover { text-decoration: none;}
.ka { background: #FFC800;
border-top: 2px solid; border-top-color: #FFF6A0;
border-left: 2px solid; border-left-color: #FFF6A0;
border-bottom: 2px solid; border-bottom-color: #FF9700;
border-right: 2px solid; border-right-color: #FF9700;
FONT-SIZE: 10px; }
.ka A { font-family: MS Sans Serif, tahoma, sans-serif;
FONT-SIZE: 10px; color:#000000; text-decoration:none;
FONT-WEIGHT: bold;}
.ka A:Hover { text-decoration: none;}
.kd { background: #FF5F00;
border-top: 2px solid; border-top-color: #AD4600;
border-left: 2px solid; border-left-color: #AD4600;
border-bottom: 2px solid; border-bottom-color: #FF947F;
border-right: 2px solid; border-right-color: #FF947F;
FONT-SIZE: 10px; }
.kd A { font-family: MS Sans Serif, tahoma, sans-serif;
FONT-SIZE: 10px; color:#FFFF00; text-decoration:none;
FONT-WEIGHT: bold;}
.kd A:Hover { text-decoration: none; color:#FFFF00; }
.kc { background: #B1DAFF;
border-top: 2px solid; border-top-color: #7FAFE2;
border-left: 2px solid; border-left-color: #7FAFE2;
border-bottom: 2px solid; border-bottom-color: #0040A5;
border-right: 2px solid; border-right-color: #0040A5;
FONT-SIZE: 10px; }
.kc A { font-family: MS Sans Serif, tahoma, sans-serif;
FONT-SIZE: 10px; color:#185DC0; text-decoration:none;
FONT-WEIGHT: bold;}
.kc A:Hover { text-decoration: none; color:#185DC0; }
- Класс "к" — описание кнопки в спокойном состоянии.
- Класс "ка" — при наведении мышки.
- Класс "кd" — кнопка при надавливании.
- Класс "кс" — кнопка после отпускания(мышка еще над ней!)
Вот такое описание. Обратите внимание— цвет ссылок задан с привязкой к классу ячейки и прописано состояние "Hover". Так как мышка находится над ссылкой большее время.Прописан цвет, как минимум. Иначе при нажатии на ссылку и нажатии на кнопку картина будет разная. :))) А в ячейках указываем управление:
<TD ROWSPAN=1 COLSPAN=1 WIDTH=125
VALIGN="center" ALIGN="center"
BGCOLOR="#1D68D3" CLASS="k"
ONMOUSEOVER="this.className = 'ka';"
ONMOUSEOUT="this.className = 'k';"
ONMOUSEDOWN="this.className = 'kd';"
ONMOUSEUP="this.className = 'kc';">
<a href="#">DHTML</A></TD>
Можно и не описывать состояние после нажатия, мало кто догадается нажать на край кнопки и проследить все изменения. :))
Дополнение — Нетскейп шестой все это понимает вполне нормально, только немного "подтормаживает" иногда. Опера 5 тоже, вроде, все "переваривает".
