Язык CSS
Слои.


Если вы умеете работать в каком-либо графическом редакторе, то вам понятно, что означает данный термин. Для остальных поясню.
Представьте себе множество листков бумаги, на каждом из которых что-то написано или нарисовано. Мы видим только содержание верхнего листа, но если мы его снимем, то увидим содержание следующего листа и т.д.
Также и в CSS, мы можем создать несколько слоев, на каждом разместить необходимые элементы и пронумеровать слои с помощью свойства z-index. Чем больше номер, тем выше слой находится в стопке слоев. Например, если сделать 6 слоев, то пользователь сначала увидит именно слой z-index:6.
Слои часто используются при создании раскрывающихся меню. Подменю открываются на одном и том же месте, потому что написаны они на разных слоях. В зависимости от того, на какой пункт меню вы наводите мышку, видимым становится тот или иной слой, остальные становятся невидимыми (прозрачными).

Сделаем html-страницу с таким меню:
Динамическое меню


Попробуем на практике. Сначала создадим сами пункты меню (div c id “menu”, внутри ссылки - основные пункты меню (книги, фильмы, музыка, игры) <a href=”#”>): Зададим стиль для нашего меню на style.css:
#menu{
width:200px;
height:200px;
border:3px solid blue;
margin:20px;
padding:20px;
background:#afda92;
position:absolute;
left:20px;
top:20px}

#menu a{
text-decoration:none;
display:block}

#menu a:hover{
text-decoration:underline;
display:block}
Проверьте результат в браузере.


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

Попробуем на практике. Добавим на html-страницу блоки подменю (так же div c id “books”, “films”, “musiks” и “games”, внутри – так же ссылки (элементы подменю) <a href=”#”>)
Проверьте результат в браузере.


Теперь с помощью css расположим их на одном и том же месте. Оформление у них одинаковое и различаться эти div-ы будут только номером слоя.

Попробуем на практике. Добавим это в таблицу стилей:
#books, #films, #musiks, #games{
border:3px solid blue;
margin:20px;
padding:20px;
background:#9dc284;
position:absolute;
width:250px;
height:200px;
left:180px;
top:30px}

#books a, #films a, #musiks a, #games a{
text-decoration:none;
display:block}

#books a:hover, #films a:hover, #musiks a:hover, #games a:hover{
text-decoration:underline;
display:block}
Проверьте результат в браузере.


Мы видим только подменю игр (т.е. верхний слой). Но нам надо, чтобы при открытии страницы отражалось только меню, а подменю открывались бы при наведении курсора мыши на пункт меню.
Для этого сделаем все слои прозрачными (визуально невидимыми), добавим соответствующее свойство (visibility:hidden) в таблице стилей.
Теперь мы видим только меню, но знаем, что все подменю находятся на своем месте. Нам осталось только сделать так, чтобы при наведении курсора мыши на пункт меню, слой с соответствующим подменю становился видимым.


К сожалению, средствами CSS этого сделать нельзя. CSS отвечает за ЧТО и ГДЕ поместить на странице, а на вопросы КОГДА и КАК отобразить отвечают сценарии, написанные на различных языках (например, на javascript). Попробуем сделать три шага на javascript, чтобы наше меню заработало как надо.

Попробуем на практике. Шаг 1 Создайте новый файл, вставьте в него следующий код:
function books(){
document.getElementById("books").style.visibility='visible';
document.getElementById("films").style.visibility='hidden';
document.getElementById("musiks").style.visibility='hidden';
document.getElementById("games").style.visibility='hidden'}

function films(){
document.getElementById("books").style.visibility='hidden';
document.getElementById("films").style.visibility='visible';
document.getElementById("musiks").style.visibility='hidden';
document.getElementById("games").style.visibility='hidden'}

function musiks(){
document.getElementById("books").style.visibility='hidden';
document.getElementById("films").style.visibility='hidden';
document.getElementById("musiks").style.visibility='visible';
document.getElementById("games").style.visibility='hidden'; }

function games(){
document.getElementById("books").style.visibility='hidden';
document.getElementById("films").style.visibility='hidden';
document.getElementById("musiks").style.visibility='hidden';
document.getElementById("games").style.visibility='visible'; }


Это javascript-функции, которые делают видимыми наши подменю. Сохраните этот файл под именем script.js (только не забудьте в типе файла выбрать "All types") в папку, где у вас лежат html и css-документ.


Попробуем на практике. Шаг 2 В head вашей html-страницы добавьте строку подключения к странице script.js:
<script type="text/javascript" src="script.js"></script>


Попробуем на практике. Шаг 3 В тело html-страницы надо добавить события, при которых будут срабатывать javascript-функции.
Событие у нас одно - наведение курсора мыши - onMouseOver.
А вот функций, которые должны сработать - четыре, по одной на каждый пункт меню. Поменяйте html-код нашего меню на следующий:
<div id="menu">
<a href=”#” onMouseOver="books();">Книги</a>
<a href=”#” onMouseOver="films();">Фильмы</a>
<a href=”#” onMouseOver="musiks();">Музыка</a>
<a href=”#” onMouseOver="games();">Игры</a>
</div>


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


В следующий раз будем учиться оформлять списки.


Источники:


Язык CSS. Виды и свойства блоков. Язык CSS. Списки.


comments powered by Disqus