... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Слои в CSS (стр.6)

 

 


Таким образом, при загрузке документа будет вызвана функция HideAll(), которая отключит видимость всех подменю, даже если какое-либо из них уже было видно. По такому же принципу необходимо записать еще несколько функций - по одной для каждого подменю. Назначение этих функций следующее: включить видимость конкретного меню и отключить все остальные, поскольку в каждый момент времени на экране у нас может находиться только одно подменю. Пользователь, вызывая какое-то подменю, автоматически закрывает все остальные. Названия функциям дадим такие же, как и идентификаторы соответствующих блоков, содержащих код подменю. В результате получим пять функций:

function HideAll () {
document.getElementById("main").style.visibility='hidden'
document.getElementById("movie").style.visibility='hidden'
document.getElementById("issue").style.visibility='hidden'
document.getElementById("survey").style.visibility='hidden'
document.getElementById("forum").style.visibility='hidden'
}

function Main () {
document.getElementById("main").style.visibility='visible'
document.getElementById("movie").style.visibility='hidden'
document.getElementById("issue").style.visibility='hidden'
document.getElementById("survey").style.visibility='hidden'
document.getElementById("forum").style.visibility='hidden'
}

function Movie () {
document.getElementById("main").style.visibility='hidden'
document.getElementById("movie").style.visibility='visible'
document.getElementById("issue").style.visibility='hidden'
document.getElementById("survey").style.visibility='hidden'
document.getElementById("forum").style.visibility='hidden'
}

function Issue () {
document.getElementById("main").style.visibility='hidden'
document.getElementById("movie").style.visibility='hidden'
document.getElementById("issue").style.visibility='visible'
document.getElementById("survey").style.visibility='hidden'
document.getElementById("forum").style.visibility='hidden'
}

function Survey () {
document.getElementById("main").style.visibility='hidden'
document.getElementById("movie").style.visibility='hidden'
document.getElementById("issue").style.visibility='hidden'
document.getElementById("survey").style.visibility='visible'
document.getElementById("forum").style.visibility='hidden'
}

function Forum () {
document.getElementById("main").style.visibility='hidden'
document.getElementById("movie").style.visibility='hidden'
document.getElementById("issue").style.visibility='hidden'
document.getElementById("survey").style.visibility='hidden'
document.getElementById("forum").style.visibility='visible'
}

Теперь, чтобы меню заработало, нужно указать, в каких случаях написанные нами функции должны выполняться. Мы договорились, что подменю будет появляться при наведении указателя мыши на пункт основного меню. Таким образом, если пользователь подводит указатель к пункту "Фильмы", то должно появиться подменю #movie. Это действие выполняет функция JavaScript с именем Movie ().

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

<DIV ID="menu">
<A HREF="#" onmouseover="Main()">Главная</A>&nbsp;||&nbsp;
<A HREF="#" onmouseover="Movie()">Фильмы</A>&nbsp;||&nbsp;
<A HREF="#" onmouseover="Issue()">Статьи</A>&nbsp;||&nbsp;
<A HREF="#" onmouseover="Survey()">Обзор</A>&nbsp;||&nbsp;
<A HREF="#" onmouseover="Forum()">Форум</A>
</DIV>

Теперь подменю должны открываться при наведении указателя мыши. Но они должны еще и закрываться, когда указатель выходит за пределы меню. Аналогично ведет себя и меню Windows. Эту задачу реализовать сложнее, но если хорошенько подумать, то простое решение найдется. Нам даже не нужно будет писать дополнительных функций на JavaScript.

Подумайте, в каких случаях указатель мыши оказывается за пределами меню или открытого подменю - в этом случае он располагается либо над блоком заголовка #head, либо над блоком основного содержимого #content. Значит, решение будет следующим: когда курсор находится над блоками #content или #head, нужно опять вызывать функцию HideAll (), и тогда при выходе курсора за пределы подменю оно будет автоматически закрываться. Код блоков нужно изменить следующим образом:

<DIV ID="head" onmouseover="HideAll( )">
<H1>Все о кино</H1>
</DIV>
и

<DIV ID="content" onmouseover="HideAll( )">
.... Текст блока ....
</DIV>

Если вы все сделали правильно, то теперь меню будет полностью функционировать, и, что особенно приятно, работать это будет во всех последних версиях браузеров: Internet Explorer 6.0, Opera 7.5 и Mozilla 1.7.


ПОСМОТРЕТЬ ПРИМЕР РАСКРЫВАЮЩЕГО МЕНЮ

 

Страница: - 1 - | - 2 - | - 3 - | - 4 - | - 5 - | - 6 -

 

Наверх страницы

 

Уроки CSS © 2007 - 2018 г. Все права защищены