Также и в CSS, мы можем создать несколько слоев, на каждом разместить необходимые элементы и пронумеровать слои с помощью свойства z-index. Чем больше номер, тем выше слой находится в стопке слоев. Например, если сделать 6 слоев, то пользователь сначала увидит именно слой z-index:6.
Слои часто используются при создании раскрывающихся меню. Например, поводите мышкой по пунктам меню:
Обратите внимание, подменю открываются на одном и том же месте, потому что написаны они на разных слоях. В зависимости от того, на какой пункт меню вы наводите мышку, видимым становится тот или иной слой, остальные становятся невидимыми (прозрачными).
Давайте сделаем html-страницу с таким меню. Сначала создадим сами пункты меню:
<html>
<head>
<title>CSS слои</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="menu">
<a href="#">Книги</a>
<a href="#">Фильмы</a>
<a href="#">Музыка</a>
<a href="#">Игры</a>
</div>
</body>
</html>
Зададим стиль для нашего меню на странице style.css:
#menu{
width:100px;
height:100px;
border:1px solid red;
margin:5px;
padding:5px;
background:yellow;
position:absolute;
left:10px;
top:10px;
}
#menu a{
color:#2b3845;
text-decoration:none;
display:block;
}
#menu a:hover{
color:#2b3845;
text-decoration:underline;
display:block;
}
Как видите, мы выбрали абсолютное позиционирование для нашего меню и это не случайно. Все подменю нам надо будет расположить
на одном и том же месте, а сделать это можно именно с абсолютным позиционированием.
Итак, добавим на html-страницу блоки подменю:
<html>
<head>
<title>CSS слои</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="menu">
<a href="#">Книги</a>
<a href="#">Фильмы</a>
<a href="#">Музыка</a>
<a href="#">Игры</a>
</div>
<div id="book">
<a href="#">Детективы</a>
<a href="#">Классика</a>
<a href="#">Фантастика</a>
<a href="#">Учебники</a>
</div>
<div id="movie">
<a href="#">Детективы</a>
<a href="#">Драмы</a>
<a href="#">Комедии</a>
<a href="#">Сериалы</a>
</div>
<div id="musik">
<a href="#">Блюз</a>
<a href="#">Джаз</a>
<a href="#">Джангл</a>
<a href="#">Рок</a>
</div>
<div id="game">
<a href="#">Азартные</a>
<a href="#">Логические</a>
<a href="#">Развлекательные</a>
<a href="#">Компьютерные</a>
</div>
</body>
</html>
Как видите, это набор div-ов, с помощью css мы расположим их на одном и том же месте. Оформление у них одинаковое и различаются
эти div-ы только номером слоя. Добавим это в таблицу стилей:
#menu{
width:100px;
height:100px;
border:1px solid red;
margin:5px;
padding:5px;
background:yellow;
position:absolute;
left:10px;
top:10px;
}
#menu a{
color:#2b3845;
text-decoration:none;
display:block;
}
#menu a:hover{
color:#2b3845;
text-decoration:underline;
display:block;
}
#book, #movie, #musik, #game{
background:yellow;
border:1px solid red;
position:absolute;
left:110px;
top:15px;
width:120px;
height:100px;
}
#book{
z-index:1;
}
#movie{
z-index:2;
}
#musik{
z-index:3;
}
#game{
z-index:4;
}
#book a, #movie a, #musik a, #game a{
display:block;
color:red;
text-decoration:none;
}
#book a:hover, #movie a:hover, #musik a:hover, #game a:hover{
display:block;
color:pink;
text-decoration:underline;
}
Откройте нашу страницу в браузере. Как и ожидалось, мы видим только подменю игр (т.е. верхний слой). Но нам надо, чтобы при
открытии страницы отражалось только меню, а подменю открывались бы при наведении курсора мыши на пункт меню.
Для этого сделаем все слои прозрачными (визуально невидимыми), добавим соответствующее свойство (visibility:hidden) в таблице стилей:
...
#book, #movie, #musik, #game{
background:yellow;
border:1px solid red;
position:absolute;
left:110px;
top:15px;
width:120px;
height:100px;
visibility:hidden;
}
...
Обновите страницу в браузере, теперь мы видим только меню, но знаем, что все подменю находятся на своем месте.
Нам осталось только сделать так, чтобы при наведении курсора мыши на пункт меню, слой с соответствующим подменю становился видимым. К сожалению, средствами CSS этого сделать нельзя.
CSS отвечает за ЧТО и ГДЕ поместить на странице, а на вопросы КОГДА и КАК отобразить отвечают сценарии, написанные на различных языках (например, на javascript). Этому языку посвящена другая серия уроков. Но для тех, кто не любит останавливаться на полпути, ниже приведены три шага, которые необходимо сделать, чтобы наше меню заработало как надо. Урок же, посвященный слоям CSS на этом можно считать законченным.
Шаг 1
Создайте, например в блокноте, новый файл, скопируйте и вставьте в него следующий код:
function books(){
document.getElementById("book").style.visibility='visible';
document.getElementById("movie").style.visibility='hidden';
document.getElementById("musik").style.visibility='hidden';
document.getElementById("game").style.visibility='hidden';
}
function movies(){
document.getElementById("book").style.visibility='hidden';
document.getElementById("movie").style.visibility='visible';
document.getElementById("musik").style.visibility='hidden';
document.getElementById("game").style.visibility='hidden';
}
function musiks(){
document.getElementById("book").style.visibility='hidden';
document.getElementById("movie").style.visibility='hidden';
document.getElementById("musik").style.visibility='visible';
document.getElementById("game").style.visibility='hidden';
}
function games(){
document.getElementById("book").style.visibility='hidden';
document.getElementById("movie").style.visibility='hidden';
document.getElementById("musik").style.visibility='hidden';
document.getElementById("game").style.visibility='visible';
}
Это javascript-функции, которые делают видимыми наши подменю. Сохраните этот файл под именем script.js (только не забудьте в типе файла выбрать "All types") в папку, где у вас лежат
html-страница и css-страница.
Шаг 2
В head вашей html-страницы добавьте строку подключения к странице script.js:
...
<head>
<title>CSS слои</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
...
Шаг 3
В тело html-страницы надо добавить события, при которых будут срабатывать javascript-функции. Событие у нас одно - наведение курсора мыши - onMouseOver. А вот функций, которые должны сработать - четыре, по одной на каждый пункт меню. Поменяйте html-код нашего меню на следующий:
...
<div id="menu">
<a href="#" onMouseOver="books();">Книги</a>
<a href="#" onMouseOver="movies();">Фильмы</a>
<a href="#" onMouseOver="musiks();">Музыка</a>
<a href="#" onMouseOver="games();">Игры</a>
</div>
...
Так мы указали, что при наведении курсора мыши на пункт меню "Книги" должна сработать функция "books", которая и сделает
видимым слой с нужным подменю. Аналогично и для других пунктов меню.
Откройте страницу в браузере и убедитесь, что теперь все работает. На сегодня все, в следующий раз будем учиться оформлять списки.
Предыдущий урок Вернуться в раздел Следующий урок
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
Как сделать сайт → Уроки CSS → Урок 13. Слои
CSS - Урок 13. Слои
Если вы умеете работать в каком-либо графическом редакторе, то вам понятно, что означает данный термин. Для остальных поясню. Представьте себе множество листков бумаги, на каждом из которых что-то написано или нарисовано. Мы видим только содержание верхнего листа, но если мы его снимем, то увидим содержание следующего листа и т.д.Также и в CSS, мы можем создать несколько слоев, на каждом разместить необходимые элементы и пронумеровать слои с помощью свойства z-index. Чем больше номер, тем выше слой находится в стопке слоев. Например, если сделать 6 слоев, то пользователь сначала увидит именно слой z-index:6.
Слои часто используются при создании раскрывающихся меню. Например, поводите мышкой по пунктам меню:
Обратите внимание, подменю открываются на одном и том же месте, потому что написаны они на разных слоях. В зависимости от того, на какой пункт меню вы наводите мышку, видимым становится тот или иной слой, остальные становятся невидимыми (прозрачными).
Давайте сделаем html-страницу с таким меню. Сначала создадим сами пункты меню:
Итак, добавим на html-страницу блоки подменю:
Для этого сделаем все слои прозрачными (визуально невидимыми), добавим соответствующее свойство (visibility:hidden) в таблице стилей:
Нам осталось только сделать так, чтобы при наведении курсора мыши на пункт меню, слой с соответствующим подменю становился видимым. К сожалению, средствами CSS этого сделать нельзя.
CSS отвечает за ЧТО и ГДЕ поместить на странице, а на вопросы КОГДА и КАК отобразить отвечают сценарии, написанные на различных языках (например, на javascript). Этому языку посвящена другая серия уроков. Но для тех, кто не любит останавливаться на полпути, ниже приведены три шага, которые необходимо сделать, чтобы наше меню заработало как надо. Урок же, посвященный слоям CSS на этом можно считать законченным.
Шаг 1
Создайте, например в блокноте, новый файл, скопируйте и вставьте в него следующий код:
Шаг 2
В head вашей html-страницы добавьте строку подключения к странице script.js:
Шаг 3
В тело html-страницы надо добавить события, при которых будут срабатывать javascript-функции. Событие у нас одно - наведение курсора мыши - onMouseOver. А вот функций, которые должны сработать - четыре, по одной на каждый пункт меню. Поменяйте html-код нашего меню на следующий:
Откройте страницу в браузере и убедитесь, что теперь все работает. На сегодня все, в следующий раз будем учиться оформлять списки.
Предыдущий урок Вернуться в раздел Следующий урок
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.