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

13

Від автора: Сьогодні ми зробимо просте, але привабливе меню за допомогою 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

Таким чином, ми створили вертикальне меню за допомогою 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. Ваші відгуки і питання по статті чекаю в коментарях.

    З повагою, Михайло Влащенко.

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

    E-mail: [email protected]

    Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування

    P. S. Хочете опублікувати цікавий тематичний матеріал і заробити? Якщо відповідь «Так», то тисніть сюди.