Шаг 13

Уф. Тринадцатый шаг (кстати, вы еще не устали шагать?). Кто-то считает это число несчастливым, для меня оно ничем не отличается от всех остальных. Так что за триннадцатым шагом обязательно последует четырнадцатый...

Ну, а разговор сегодня пойдет, как и обещано было, о менюшках как на microsoft.com. Делать точную скин-имитацию мы не будем.

Начнем с создания таблицы по параметрам указанным слева.

Раскрасим нашу таблицу в нужный цвет, зададим текст внутри ячеек, укажем размер этих ячеек (скажем пикселей по 100).

Да, кстати, я еще немного порулил CSS-ами. Переопределил внешний вид тегов <A> и <P>. В принципе это можно и не делать...

Теперь обращаю ваше внимание, что до того, как начать работать со слоями, в нашем случае галочка у выделенного подпункта меню (пункт View) не должна стоять. Иначе мы не сможем нарисовать перекрывающиеся слои.

Нажав на эту кнопку мы нарисуем слой как показано на рисунке. После его отрисовки стоит заняться его внешним видом и прочими настройками.

Прежде всего как и в предыдущем примере нужно дать нашему слою уникальное имя.

Затем стоит указать в качестве параметра Vis - Hidden (наш слой сразу исчезнет) + указать цвет фона = цвету фона таблицы.

Не пугайтесь, когда ваши слои вдруг пропадут. Есть замечательная плавающая палитра в меню window, которая называется Layers.

Включите ее и увидите все ваши слои и их текущее состояние (показан или нет).

Так, пришло время вернуться к нашему меню. Пропишите для каждого из пунктов меню (которые и будут вызывать при наведении всплывающие меню) ссылку на #. Такая комбинация позволяет:

• создать ссылку
• избежать перехода на другую страницу, если пользователь нажмет на ссылку.

В принципе, вместо # вы можете указать ссылку на некую обшую страницу данного раздела (например на сводную страницу новостей).

Пришло время заняться Behaviors. Для этого выберите нужную ссылку (можно, например нажать на тег <A> в строке состояния). После этого вызовите палитру Behaviors и выберите пункт Show-Hide Layers. При наведении мышки на первый пункт мы должны показывать соответствующий слой и прятать все остальные.

Достигается это очень просто - посмотрите на картинку :)

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

Ну вот и результат. Можете сравнить с аналогичными меню на других сайтах. По моему все просто :) До следующего урока.

Назад | Содержание | Вперед