Робимо CSS-меню, яке випадає з основного

Робимо CSS-меню, яке випадає з основного

Більшість людей, які мають комп 'ютери, обов' язково намагається підключитися до інтернету. Після цього будь-яка людина може як користувач відвідувати різні сайти. Це може бути пошук інформації, розваги, навчання, ігри, спілкування на форумах і багато іншого.

Заходячи на сторінку сайту, користувач бачить її зміст. Це як зміст книги, яку ви збираєтеся прочитати. Вміст складається з різних наборів посилань, що перекладають користувача на інші сторінки ресурсу або навіть на інші сайти. Такі посилання допомагають користувачам здійснювати навігацію по інтернету. Групуються посилання в окремі блоки, що представляють меню сайту.

Функціональність будь-якого ресурсу залежить від того, яке меню на ньому використовується. Меню сайту може мати різний дизайн, мати горизонтальну або вертикальну орієнтацію, розташовуватися внизу, вгорі або збоку, бути прихованим, розкритим, випадаючим, розвертається.

Горизонтальне меню CSS

Горизонтальне спадне меню застосовується для впорядкування навігаційної структури сайту. Не слід зловживати кількістю рівнів для вкладення, їх повинно бути не більше двох. При більшій кількості рівнів користувачеві буде набагато складніше відшукати необхідну інформацію. Далі докладніше розглянемо методику створення меню.

Представимо CSS-меню, що випадає з основного горизонтального блоку. Ускладнимо завдання і зробимо CSS спадне меню при наведенні. Повинен бути якийсь основний горизонтальний блок з посиланнями, що представляють пункти меню. Після наведення вказівника миші на ці пункти повинні відкриватися додаткові навігаційні пункти.

Щоб створити спадне меню CSS, знадобиться:

  • файл HTML;
  • файл CSS;
  • зображення для тла.

Зображення для тла є допоміжним елементом для поліпшення дизайну і надання меню стильності.

Створення файлу HTML

Сторінки будь-якого сайту можуть бути статичними або динамічними. Статична сторінка сайту при перегляді у переглядачі з 'являється в тому вигляді, в якому вона спочатку створена. Динамічна сторінка створюється в момент її відкриття в переглядачі з окремих сторінок та додаткового виводу інформації з бази даних. Але в будь-якому випадку, якщо через браузер відкрити сторінку з вихідним кодом, то буде виведена HTML-сторінка гіпертекстової розмітки. Для створення меню необхідно розробити HTML-сторінку та зберегти її в HTML-файлі. Створюємо з-меню, що випадає з основного цим способом. Сторінки HTML можна створювати в будь-яких текстових редакторах, але краще використовувати спеціалізовані: Notepad++ или Adobe Dremweaver CSS. Відкриваємо в редакторі порожню сторінку, вписуємо необхідний код і зберігаємо її під іменем myindex.html. Коментарі можна додавати прямо в коді, між спеціальними тегами, які використовуються в HTML для цих цілей.


Розмітка сторінки при створенні спадного горизонтального CSS-меню відрізняється від звичайного стандартного меню, оскільки до потрібних спискових елементів < li > необхідно додати вкладені ненумеровані або нумеровані списки < ol > або < ul >.

Код HTML

Зауважте, що в HTML всі конструкції між дужками < > називаються тегами. Теги можуть бути одинарними і парними. Парний тег обов 'язково містить дві пари дужок < >, причому в другій парі конструкція всередині починається зі слішу/. У парному тегу перший тег відкриває, а другий - закриває.

Створюємо код:

<! doctype html > <! -- Цей тег показує, що сторінка створюється на HTML 5. -- >

< html > <! -- Загальний блок, що включає всю сторінку HTML -- >

< head > <! -- Службова невидима частина сторінки HTML -- >

< title > CSS-меню, що випадає з основного </title > <! -- Назва сторінки з адресного рядка переглядача -- >


<meta http-equiv=""Content-Type"" content=""text/html; charset = utf-8 "> <! -- Кодування сторінки -- >

< link rel = "" stylesheet "" href = "" css/style.css "" type = "" text/css ""/> <! -- Приєднання файла стилів -- >

</head>

< body > <! -- Тіло сторінки сайту -- >

< div class = "" primer "> <! -- Основний контейнер для виводу меню -- >


< ul class = "" navigator "> <! -- Створення ненумерованого списку для меню -- >

< li > < a href = "" # "" > < span > Головна сторінка </span > </a >/li > <! -- Створення пунктів меню -- >

< li > < a href = "" # "" > < span > Мій пункт меню 1 </span > </a >

< ul class = "" vipadnoe "> <! -- CSS-меню, що випадає з основного -- >

< li > < a href = "" # "" > < span > Мой подпункт 1 </span > </a > </li >


< li > < a href = "" # "" > < span > Мой подпункт 2 </span > </a > </li >

</ul></li>

< li > < a href = "" # "" > < span > Мій пункт меню 2 </span > </a >

<ul class=""vipadnoe"">

< li > < a href = "" # "" > < span > Мой подпункт 1 </span > </a > </li >


< li > < a href = "" # "" > < span > Мой подпункт 2 </span > </a > </li >

< li > < a href = "" # "" > < span > Мой подпункт 3 </span > </a > </li >

< li > < a href = "" # "" > < span > Мой подпункт 4 </span > </a > </li >

< li > < a href = "" # "" > < span > Мой подпункт 5 </span > </a > </li >

< li > < a href = "" # "" > < span > Мой подпункт 6 </span > </a >

</li></ul></li></ul> </div> </body> </html>

Так можна створити нескінченну кількість пунктів і підпунктів меню. В самому кінці закриваємо всі парні теги.

Створення файлу CSS

У файлі HTML було підключено файл стилів style.css, необхідний не тільки для правильного позиціонування меню на сторінці сайту, але і для надання меню красивого виду, створення неповторного дизайну сайту. Файл CSS створюється в такому ж редакторі, як і файл HTML, але, на відміну від сторінки HTML, користувач побачить тільки результат роботи файлу стилів на сторінці, що переглядається. Крім того, під час додавання коментарів до CSS використовується конструкція/* Коментар... */.

Код CSS

Створюємо код:

/ * спадне меню CSS */
body {/* Стиль для тіла сторінки сайту */
background: # 0814da ;/* Колір тла */
margin: 0 ;/* Зовнішні відступи */
padding: 0 ;/* Внутрішні відступи */
font-family: "Trebuchet MS" ", Arial, Helvetica, sans-serif ;/* Сімейство шрифтів */
}
.primer {/* всього блоку меню */
position: relative ;/* Позиція відносно вихідного місця */
background: # ebecf7 url (../images/vanbackground.jpg) ;/* Тло з картинкою для всього меню */
width: 525px ;/* Ширина всього блоку меню */
height: 384px ;/* Висота всього меню */
border: 1px # 000 solid ;/* Товщина і стиль межі всього блоку меню */
margin: 21px auto;
padding: 16px;
}
/ * стилі меню */
.navigator, .navigator ul {/* Стиль блоку з ненумерованим списком */
list-style: none ;/* Скасування маркерів для списку */
margin: 0;
padding: 0;
}
.navigator {/* Стиль навігаційного блоку */
position: relative;
}
.navigator ul {/* Стиль ненумерованого списку */
height: 0 ;/* По висоті */
left: 0 ;/* Зліва */
overflow: hidden ;/* Ховається частина блоку, якщо не поміщається повністю у відведеному місці */
position: absolute ;/* Робимо абсолютне позиціонування */
top: 47px ;/* Зверху */
}
.navigator li {/* Стиль пунктів ненумерованого списку */
float: left ;/* Обтікання з лівого боку */
position: relative;
}
.navigator li a {/* Стиль посилань пунктів ненумерованого списку */
background-color:# 7c75b7 ;/* Колір тла */
border:1px solid #7c75b7;
color:#fbfbff;
display:block ;/* Показ блоком. */
font-size:15px ;/* Встановлення розміру шрифту */
line-height:34px ;/* Міжрядковий інтервал */
padding:6px 21px;
text-decoration:none ;/* Текст без оформлення */
transition:0.6s;
}
.navigator li:hover > a {/* Стиль пунктів ненумерованого списку під час наведення */
background:#8fcb38;
border-color:#7c75b7;
color:#fbfbff;
}
.navigator li:hover ul.vipadnoe {/* Стиль спадного меню під час наведення */
height:auto;
width:181px;
}
.navigator ul li {/* Стиль списку і пунктів */
-moz-transition:0.7s;
}
.navigator li ul li {/* Стиль пункт-список-пункт */
-moz-transition-delay:1s;
}
.navigator li:hover ul li {/* Стиль при наведенні миші */
}
.navigator ul li a {/* Стиль список-пункт-посилання */
background:#7c75b7;
border-color:#7c75b7;
color:#fbfbff;
line-height:2px;
-moz-transition:1.7s;
-o-transition:1.7s;
-webkit-transition:1.7s;
transition:1.7s;
}
.navigator li:hover ul li a {/* Стиль при наведенні пункт-список-пункт-посилання */
line-height:36px;
}
.navigator ul li a: hover {/* Стиль список-пункт плюс посилання при наведенні */
background: #8fcb39;
background-image: rgba(41,137,216,0.5);}

Після того як були створені файли myindex.html і style.css, їх потрібно помістити в окрему теку. Створюємо для зручності в теці "Мої документи" окрему теку demo, а в ній теку CSS, куди розміщуємо файл style.css, і теку images, куди розміщуємо малюнок фону, вказаний у файлі стилів. Для файлу myindex.html не створюємо ще однієї окремої теки і розміщуємо її у створеній теці demo. Тепер, відкривши в браузері файл myindex.html, можна буде побачити горизонтальне CSS-меню, що випадає при наведенні. Ось і все.

Таким же способом створюється вертикальне спадне меню на CSS, але тільки для нього необхідно буде розробити кілька інший файл стилів.