Від автора: Сьогодні ми зробимо просте, але привабливе меню за допомогою CSS, JQuery.
Перед тим, як ми приступимо до практичних кроків, я Вам рекомендую переглянути демо-результат роботи.
Також завантажте вихідні коди собі на комп’ютер!
Крок 1.
Для початку створіть папку, наприклад folder. У неї помістіть файл index.html з таким кодом:
Colorful Content Accordion | Tutorialzine demo
-
- ГОЛОВНА
-
- Пункт1
- Пункт2
- Пункт3
- Пункт4
-
- ФОТО
-
- Пункт1
- Пункт2
- Пункт3
-
- ВІДЕО
-
- Пункт1
- Пункт2
- Пункт3
- Пункт4
-
- БЛОГИ
-
- Пункт1
- Пункт2
- Пункт3
-
- ІГРИ
-
- Пункт1
- Пункт2
- Пункт3
- Пункт4
- Пункт5
- Пункт6
-
- КОНТАКТИ
-
- Пункт1
- Пункт2
- Пункт3
Потім в папці folder створіть папку style і помістіть в неї файл style.css. Файл style.css повинен містити цей код:
body{
background: #000;
margin: 0;
padding: 0;
}
ul{
margin: 0;
padding: 0;
}
li{
list-style :none;
text-align: left;
}
a{
color: #000;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
#main{
width: 100%;
height: 620px;
background: url(../img/font.jpg);
margin: 0;
}
ul.container{
width: 240px;
margin: 0 auto;
padding: 0;
}
li.menu{
width: 240px;
padding: 5px 0;
}
li.button a{
width: 200px;
height: 34px;
display: block;
overflow: hidden;
position: relative;
font-family: Arial,Helvetica,sans-serif;
font-size: 21px;
padding: 10px 20px 0 20px;
}
li.button a:hover{
text-decoration: none;
}
li.button a span{
/* This span acts as the right part of the section’s background */
height:44px;
position:absolute;
right:0;
top:0;
width:4px;
display:block;
}
li.button a.box1, li.button a.box2, li.button a.box3, li.button a.box4, li.button a.box5, li.button a.box6{
background: url(../img/point.png);
color :#ccc;
border: 1px solid #ccc;
}
.dropdown{
width: 242px;
display: none;
}
.dropdown li{
background: url(../img/point.png);
border: 1px solid #ccc;
margin: 5px 0;
padding: 4px 18px;
}
Також не забуваємо про наші скрипти. У папці folder створюємо папку js і поміщаємо в неї скрипт jquery-1.4.2.js, jquery.easing.1.3.js і script.js.
Щоб наша сторінка була не такою похмурою, я створив для неї барвистий фон. Для цього в папці folder необхідно створити папку img і помістити в неї файл font.jpg. Робити це необов’язково. Просто в цьому випадку фон сторінки буде чорного кольору.
Після того, як Ви виконали вищевказані дії, у вікні Вашого браузера з’явиться ось така сторінка:
Таким чином, ми створили вертикальне меню за допомогою CSS, JQuery з випадаючими підпунктами. Для того щоб побачити підпункти меню, потрібно натиснути на відповідний пункт меню. Повторний клік по відповідному пункту меню поверне його в початковий стан.
Крок 2.
Для того щоб зрозуміти, як влаштована робота даного меню, розглянемо вихідні коди файлів index.html, style.css і script.js.
Отже, розглянемо файл index.html. А саме ось цю частину коду:
- ГОЛОВНА
-
- Пункт1
- Пункт2
- Пункт3
- Пункт4
Вона являє собою в браузері пункт меню “ГОЛОВНА” з розкриваються підпунктами меню “Пункт1”, “Пункт2”, “Пункт3”, “Пункт4”.
Підпункти меню “Пункт1”, “Пункт2”, “Пункт3”, “Пункт4” приховані за рахунок властивості display: none;. Для того щоб побачити другий рівень меню Вам необхідно зробити один клік по пункту меню “ГОЛОВНА”. Після цього наше меню плавно розсовується.
Даний ефект реалізований за допомогою ява-скрипт script.js.
Пункти меню “ФОТО”, “ВІДЕО”, “БЛОГИ”, “ІГРИ”, “КОНТАКТИ” реалізовані аналогічним чином. Відмінність одна від одної полягає у кількості підпунктів меню, тому ми їх розглядати не будемо.
Також варто звернути увагу на коректне підключення стилів і скриптів. Оскільки якщо неправильно підключити хоча б один з скриптів, то наше меню буде працювати не так, як нам потрібно.
Файл style.css.
У цьому файлі я хочу звернути Вашу увагу на стилі класів button і dropdown (стилі для пунктів меню і їх підпунктів, відповідно). Розглянемо їх:
li.button a{
width: 200px; – ширина блоку;
height: 34px; – висота блоку;
display: block; – блочне розташування блоків;
font-family: Arial,Helvetica,sans-serif; – шрифт тексту;
font-size: 21px; – розмір шрифту тексту;
padding: 10px 20px 0 20px; – внутрішні відступи блоку;
}
.dropdown{
width: 242px; – ширина блоку;
display: none; – приховане відображення блоку;
}
.dropdown li{
background: url(../img/point.png); – фон блоку, представлений картинкою;
border: 1px solid #ccc; – рамка блоку кольору #ccc в 1 піксель;
margin: 5px 0; – зовнішній відступ блоку;
padding: 4px 18px; – внутрішній відступ блоку;
}
У свою чергу, все меню укладено в блок container. За рахунок властивостей даного блоку наше меню розташовано по центру екрана.
ul.container{
width: 240px; – ширина блоку;
margin: 0 auto; – зовнішні відступи блоку(ліворуч і праворуч задано auto – блок знаходиться по середині екрана);
padding: 0; – внутрішні відступи блоку;
}
Файл script.js. Наші пункти меню другого рівня плавно відкриваються і закриваються саме за рахунок цього скрипта.
Розглянемо його код більш детально:
$(document).ready(function(){
$.easing.def = “easeInOutQuad”;
$(‘li.button a’).click(function(e){
var dropDown = $(this).parent().next();
$(‘.dropdown’).not(dropDown).slideUp(‘slow’);
dropDown.slideToggle(‘slow’);
e.preventDefault();
})
});
Рядок $.easing.def = “easeInOutQuad”; задає ефект відкриття/приховування підпунктів меню. В даному випадку вказаний ефект easeInOutQuad. На його місце можна поставити інший ефект, наприклад, easeOutBounce.
У рядку $(‘li.button a’).click(function(e) описане те, що даний ефект (відкриття/закриття) застосовується тільки для елементів класу button по кліку, тобто для пунктів меню “ГОЛОВНА”, “ФОТО”, “ВІДЕО”, “БЛОГИ”, “ІГРИ”, “КОНТАКТИ”.
Ці рядки $(‘.dropdown’).not(dropDown).slideUp(‘slow’); dropDown.slideToggle(‘slow’); задають швидкість відкриття/приховування підпунктів меню. У даний момент задана швидкість відкриття “slow”. Вона дорівнює 1 секунді.
Дякую за увагу. На цьому урок закінчений. Ми з Вами створили випадаюче вертикальне меню за допомогою CSS, JQuery. Ваші відгуки і питання по статті чекаю в коментарях.
З повагою, Михайло Влащенко.
E-mail: [email protected]
Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування
P. S. Хочете опублікувати цікавий тематичний матеріал і заробити? Якщо відповідь «Так», то тисніть сюди.