Випадаюче вертикальне меню за допомогою CSS, JQuery

Від автора: Сьогодні ми зробимо просте, але привабливе меню за допомогою CSS, JQuery.

Перед тим, як ми приступимо до практичних кроків, я Вам рекомендую переглянути демо-результат роботи.

Також завантажте вихідні коди собі на комп’ютер!

Крок 1.

Для початку створіть папку, наприклад folder. У неї помістіть файл index.html з таким кодом:

Colorful Content Accordion | Tutorialzine demo

Потім в папці 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» приховані за рахунок властивості 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. Хочете опублікувати цікавий тематичний матеріал і заробити? Якщо відповідь «Так», то тисніть сюди.