3.4. Створення модального вікна на веб-сторінці засобами css
Модальне вікно часто використовується на веб-сайтах тому було доцільно виконати це завдання із застосування лише технології CSS, оскільки є багато методів реалізації модально вікна але за допомогою JavaScript, а лише на CSS дуже мало.
Для виконання завдання я створив веб-сторінку з наступною розміткою:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" />
<title>index</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<a href="#popup">Модальне вікно лише на CSS</a>
<div id="popup">
<div id="popup_content">
<h3>Hello, I'm popup!</h3>
<a href="#close">Close</a>
</div>
</div>
</body>
</html>
При перегляді даної сторінки в веб-браузері буде наступне:
Рис. 7 Перегяд сторінки в браузері
Для відображення модального вікна потрібно натиснути на посилання «Модальне вікно лише на CSS» і вікно з’явиться.
Рис. 8 Відображення модального вікна
Нище наведені css-правила які дозволяють реалізувати це все вище описане:
#popup_content {
width: 400px;
height: 200px;
background: #cccccc;
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -200px;
z-index: 1111;
}
#popup:target {
visibility: visible;
opacity: 0.7;
filter: alpha(opacity=70);
}
#close:target #popup {
display: none;
}
Суть даного методу полягає в зчитування псвевдокласом :target значення href=”#popup” яке описане в посиланні на яке ми натискємо для відображення модального вікна.
3.5. Створення адаптивного меню для сайта
В час поширення гаджетів та смартфонів з доступом в інтернет, сайти з фіксованими параметрами не актуальний, оскільки він не є зручним для відвідування та перегляду потрібної інформації. Тому на допомогу прийшов «Адаптивний дизайн» і відповідно сайти стали з адаптивними параметрами, які адаптуються під будь-який екран будь-якого гаджета чи монітора ПК і сайт відображається однаково читабельно як для одних та інших користувачів.
Наступне завдання полягає в створення одного із важливих елементів сайту це меню за допомогою якого користувач буде навігацію по сайті.
Для виконання завдання було створено веб-сторінку та таблиці стилів яка під’єднується до цієї сторінки і в якій описані всі css-правила для нашого меню.
HTML-структкра сторінки index.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" />
<title>index</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Адаптивне меню</h2>
<ul id="menu">
<li><a href="#">Головна</a></li>
<li><a href="#">Блог</a></li>
<li><a href="#">Статті</a></li>
<li><a href="#">Контакти</a></li>
</ul>
</body>
</html>
та код таблиці стилів style.css:
h2 {
text-align: center;
}
ul {
margin: 0 auto;
padding: 5px;
text-align: center;
box-shadow: 1px 0px 3px rgba(0, 0, 0, 1.5) inset;
}
ul li {
margin: 0 10px;
text-align: center;
padding: 2px 3px;
display: inline-block;
border-bottom: 0px solid #333399;
-webkit-transition: border-bottom 0.2s ease-out;
-moz-transition: border-bottom 0.2s ease-out;
-o-transition: border-bottom 0.2s ease-out;
transition: border-bottom 0.2s ease-out;
}
ul li:first-child {
border-bottom: 3px solid #333399;
}
ul li a {
display: block;
text-decoration: none;
font-weight: bold;
color: #339966;
}
ul li:hover {
border-bottom: 3px solid #333399;
}
@media screen and (max-width: 768px) {
ul {
min-width: 320px;
}
ul li {
width: auto;
margin: 0 auto;
display: block;
}
}
Рис. 9 Початковий вигляд меню
Рис. 10 Вигляд меню на екранах ширина яких менше 768px