Деякі веб-майстри не хочуть витрачати час нарозробку з нуля простих елементів, які вже існують. Вони вважають, що немає сенсу витрачати свій час на те, що вже давно є. Насправді для тих, хто тільки освоює HTML і CSS, важливо самим робити багато речей, щоб добре розуміти їх роботу. Це відноситься і до меню. Створимо вертикальне меню CSS. Воно буде грунтуватися тільки на HTML і CSS, без застосування Javascript і JQuery. Кожне меню являє собою список посилань, які ведуть на сторінки сайту.
Основні кроки
Щоб створити нескладне вертикальне меню CSS, необхідна наступна послідовність дій:
1. Спочатку визначте список посилань (за допомогою коду HTML), з яких буде складатися меню. Дайте їм назви, наприклад, такі:
- Головна.
- Наша історія.
- Керівництво.
- Послуги.
- Контакти.
2. Потім стилізуємо посилання за своїм бажанням за допомогою CSS.
Напишемо код HTML, збережемо у файлі my_Vmenu.html і подивимося, як це буде виглядати в браузері:
Це основа (каркас) нашого меню. # 1, # 2 і т.д.необхідно замінити на посилання. Подивіться, як все виглядає в браузері. Картина вам не сподобається. Тепер треба приступити до опису стилів елементів, щоб зробити повноцінне вертикальне меню CSS.
опис стилів
Створіть файл my_Vmenu.css, в якому задайте все, що вам завгодно, щоб поліпшити зовнішній вигляд такого важливого елемента сайту. Нижче наведено код, впровадження якого пожвавить вертикальне меню CSS. Його і запишіть в створений файл, а потім ми розглянемо докладніше, що означають основні рядки, які тут наведені.
Детальний опис використаних стилів
Тепер розглянемо детально наше CSS меню вертикальне:
ul # my_Vmenu - загальний стиль всього списку.
ul # my_Vmenu li a - стиль посилання між тегами li.
ul # my_Vmenu li a: hover - це опис виду пунктів розглянутого меню в той момент, коли на один з них людина наводить курсор.
ul # my_Vmenu li a span - опис тексту (назв меню).
Пам'ятайте, що файли my_Vmenu.css і my_Vmenu.html треба зберегти в одній директорії. Втім, вони можуть розташовуватися і в різних папках, але тоді важливо прописати в файлі my_Vmenu.html шлях до my_Vmenu.css. Будьте уважні, тому що у новачків з цим часто проблеми.
Стиль треба підключати між тегами head в html-файлі. menu_1.png і menu_2.png - це картинки для зображення пункту меню в звичайному стані і при наведенні курсору.
Краще збережіть картинки в окремій папці длямалюнків, назвіть її my_images, але тоді подкорректируйте код CSS. Напишіть там, де вказані ці зображення, що вони знаходяться в даній директорії: url (my_images / menu_1.png) і url (my_images / menu_2.png).
В інших характеристиках, описаних в коді CSS,розібратися просто. Вони задають зовнішній вигляд нашого меню. Неважко помітити, що ширина і висота пунктів задана однаковою для пунктів при звичайному стані і при наведенні мишки на них. Розмір шрифту 18px, padding задає відступи з різних сторін від назв пунктів. Властивість display дозволяє задати відображення блоками, щоб задавати ширину і відступи.
Наше вертикальне меню
Як бачите, вертикальне CSS меню створити легко.На базі даних знань ви зможете зробити його красивим і привабливим для відвідувачів свого інтернет-ресурсу! Використовуйте свою фантазію, і тоді стильне меню прикрасить ваш сайт.
