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

Создавая блок в CSS, мы всегда четко задаем его параметры, а также позиционируем его в определенное место на экране. Таким образом, любой блок имеет две координатах X и Y, которые определяют положение блока на плоскости экрана. Но в CSS 2 есть еще и третья, пространственная координата Z, которая определяет номер слоя, на котором находится блок.

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

Слои в CSS в этом отношении очень похожи на слои графических редакторов. Фоном здесь служит основной код Web-страницы, а с помощью CSS вы можете какой-либо элемент вынести на отдельный слой. Сделать это можно, используя CSS-свойство z-index, Принимаемые этим свойством значения указывают порядковый номер слоя. Чем больше номер, тем выше слой находится в стопке слоев. Слой с номером 1 находится непосредственно над основной страницей, слой с номером 2 над первым и т.д. В результате слой с номером 2 будет ближе расположен к пользователю, просматривающему вашу страницу, чем слой с номером 1.

С помощью слоев в комбинации со свойством visibility можно создавать различные раскрывающиеся меню, динамично меняя значение свойства visibility для разных слоев. Для этого подменю располагаются на отдельных слоях, и когда пользователь щелкает на команде меню, на передний план выводится тот слой, в котором хранится выбранное пользователем подменю.

В последнее время на некоторых страницах часто наблюдается размещение на отдельном слое разного рода рекламной информации. Вы открываете страницу, а поверх ее основного содержимого располагается отдельный слой с рекламным Flash-роликом или просто статический рекламный текст. Спустя некоторый промежуток времени на этом слое появляется кнопка, позволяющая убрать рекламную информацию. Чаще всего эта кнопка оформляется наподобие кнопки закрытия окна в Windows - с изображением крестика (х). Щелкнув на ней, вы просто делаете слой невидимым, и он больше не мешает вам читать основной текст Web-страницы. Реализовать такой сценарий без слоев было бы довольно проблематично.

Пример - раскрывающееся меню

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

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

Разобьем работу по созданию документа с раскрывающимся меню на этапы:

в первую очередь создадим структуру, образующую саму Web-страницу;
затем создадим подменю и разместим их на отдельных слоях;
в последнюю очередь напишем на JavaScript несколько функций и заставим наше меню работать.

Итак, для создания самой страницы нам потребуются три блока: заголовок, меню и блок основного содержимого страницы. Позиционировать их будем абсолютно, чтобы точно знать расстояние между блоками — это нам пригодится, когда придет время позиционировать блоки с подменю. Первый блок будет очень прост, назовем его #head. В нем расположится только один заголовок. Запишем стиль для этого блока:

#head {
height: 50px;
width: 100%;
position: absolute;
left: 0px;
top: 0px;
}

Мы задали ширину блока в 100%, чтобы он был на всю ширину окна браузера. Также мы зафиксировали высоту в 50 пикселей, при этом блок позиционируется в левый верхний угол экрана. Запишем его HTML-код:

Внутри этого блока находится всего один заголовок. Запишем для него простой стиль, который выровняет его по правому краю и задаст синий цвет.

#head H1 {
color: Navy;
margin: 0em;
padding-right: 0.5em;
text-align: right;
}

Слои в CSS. Выпадающее меню.

Свойство margin-top:0рх на первый взгляд кажется ненужным, но оно помогает устранить различия в размерах абзацных отступов, которые установлены в разных браузерах. В результате задания этого свойства расстояние от верхнего края окна до заголовка будет одинаково во всех браузерах. Отступ справа в 0.5 em сделает заголовок аккуратнее. Теперь займемся строкой меню. Она будет располагаться прямо под заголовком. Стиль этого блока будет следующим:

#menu {
background-color: #C0C0C0;
border-bottom: 1px solid;
border-top: 1px solid;
padding: 2px 10px;
position: absolute;
top: 50px;
width: 100%;
}

Строка меню будет шириной на весь экран, сверху и снизу будет тонкая черная граница. Весь блок будет сдвинут вниз на 50 пикселей, что совпадает с высотой блока #head. Чтобы текст не прилипал к краям блока, создаем отступы. Сверху и снизу поменьше, всего 2 пикселя, с боков по 10 пикселей. Все отступы задаем именно в пикселях, а не в каких-либо других относительных единицах, для того чтобы эти размеры не зависели от базового размера шрифта, установленного в браузере, или от каких-либо других параметров. Здесь как никогда нам нужна точность позиционирования текущих элементов и будущих блоков подменю.

HTML-код меню будет содержать только ссылки на разделы, разделенные двумя горизонтальными линиями и оформленные следующим образом:

<DIV ID="menu">
<A HREF="#">Главная</A> || 
<A HREF="#">Фильмы</A> || 
<A HREF="#">Статьи</A> || 
<A HREF="#">Обзор</A> || 
<A HREF="#">Форум</A>
</DIV>

Стиль для ссылок внутри блока #menu должен определить параметры шрифта, зафиксировать цвет и размер шрифта в пикселях, полужирное начертание и убрать подчеркивание.

#menu A {
color: Navy;
font: bold 13px Tahoma, sans-serif;
text-decoration: none;
}

И последний блок, где располагается основной текст страницы, должен находиться ниже двух предыдущих на 80 пикселей. Правило для него будет следующим:

#content {
font-size: 0.8em;
padding: 0.5em;
position: absolute;
left: 0px;
top: 80px;
}

Согласитесь, что одновременно все подменю видеть на экране нам совершенно не нужно, даже наоборот: нам необходимо, чтобы в каждый момент времени на экране было видимо только одно подменю - в зависимости от того, какой пункт меню выбран. Иначе говоря, мы будем подводить курсор к пункту меню и рядом будут появляться соответствующие подменю. Поэтому сейчас нужно "выключить" видимость всех блоков. Сделать это можно, прописав свойство 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 сразу будем вызывать эту функцию:

Категория: Css | Добавил: ChronoW (21.11.2012)

Просмотров: 3337 | Теги: css Слои | Рейтинг: 0.0/0

Всего комментариев: 0

web-development.ucoz.ru

Слои в CSS

Пример - раскрывающееся меню

Слои в CSS. Выпадающее меню.