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

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

 

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

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

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

 

 


Согласитесь, что одновременно все подменю видеть на экране нам совершенно не нужно, даже наоборот: нам необходимо, чтобы в каждый момент времени на экране было видимо только одно подменю - в зависимости от того, какой пункт меню выбран. Иначе говоря, мы будем подводить курсор к пункту меню и рядом будут появляться соответствующие подменю. Поэтому сейчас нужно "выключить" видимость всех блоков. Сделать это можно, прописав свойство visibility: hidden в стиле каждого блока подменю. После этого все блоки подменю исчезнут с экрана.


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

Прежде чем писать сценарии для нашего меню, следует сделать несколько замечаний по поводу особенностей JavaScript. JavaScript - язык, основанный на использовании объектов. Доступ к свойствам и методам объекта организуется с использованием точечной нотации, т.е. при обращении имя объекта отделяется от имени его свойства (характеристики) или метода (функции) точкой. Например: main.style.color='green'.

На языке JavaScript эта запись будет означать, что CSS-свойству color в стиле для блока main присваивается значение 'green'. По аналогии можно изменять и значение свойства visibility блока - в зависимости от ситуации.

В браузерах Internet Explorer и Opera написанные таким образом сценарии будут прекрасно работать, но в браузере Mozilla механизм доступа к свойствам объектов несколько другой. Объекты там начинают существовать только после полной загрузки страницы, поэтому может случиться так, что пользователь будет пытаться обратиться к объекту, когда его еще не существует. Поэтому, чтобы сохранить универсальность метода, на практике мы будем пользоваться несколько другой схемой.

В JavaScript существует встроенный метод getElementByld(), который позволяет обратиться к объекту по идентификатору. Идентификаторами подменю в нашем случае являются идентификаторы CSS, которые мы им сами присвоили. После того как элемент найден, можно менять его свойства, в том числе и его стиль. Например, чтобы изменить свойство visibility блока с идентификатором main, следует написать: document .getElementById("main"). style.visibility='visible'

Аналогично можно обращаться к любым объектам и менять любые свойства их стиля.

Для реализации нашей задачи потребуется написать несколько функций на языке JavaScript, которые будут управлять работой меню. Не пугайтесь, они очень простые и однотипные. Главная их задача - включать видимость нужного подменю. Эти функции будут выполняться, т.е. работать, когда пользователь на странице выполнит некое действие, т.е. произойдет некое событие. Полный список событий, которые может обрабатывать сценарий на JavaScript, рассматривался, когда Вы изучали элемент SCRIPT в HTML.

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

Текст всех функций будем помещать между тегами:


<SCRIPT TYPE="text/javascript">
.................
</SCRIPT<

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


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

В первую очередь, такая функция должна выполняться в тот момент, когда документ только загрузился, т.е. когда пользователь первый раз видит страницу, он не должен увидеть ни одного из подменю. Поэтому в элементе BODY сразу будем вызывать эту функцию:


<BODY topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" onLoad="HideAll()">

 

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

 

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

 

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