Вертикальне меню CSS: робимо самі

Деякі веб-майстри не хочуть витрачати час на розробку з нуля простих елементів, які вже існують. Вони вважають, що немає сенсу витрачати свій час на те, що вже давно є. Насправді для тих, хто тільки освоює HTML і CSS, важливо самим робити багато речей, щоб добре розуміти їх роботу. Це відноситься і до меню. Створимо вертикальне меню CSS. Воно буде грунтуватися тільки на HTML і CSS, без застосування javascript і JQuery. Кожне меню являє собою список посилань, які ведуть на сторінки сайту.

Основні кроки

Щоб створити нескладне вертикальне меню CSS, необхідна наступна послідовність дій:

1. Спочатку визначте список посилань (за допомогою коду HTML), з яких буде складатися меню. Дайте їм назви, наприклад, такі:

  1. Головна.
  2. Наша історія.
  3. Керівництво.
  4. Послуги.
  5. Контакти.

2. Потім стилізуємо посилання за своїм бажанням за допомогою CSS.

Напишемо код HTML, збережемо у файлі my_Vmenu.html і подивимося, як це буде виглядати в браузері: Вертикальне меню CSS

Це основа (каркас) нашого меню. # 1, # 2 і т.д. необхідно замінити на посилання. Подивіться, як все виглядає в браузері. Картина вам не сподобається. Тепер треба приступити до опису стилів елементів, щоб зробити повноцінне вертикальне меню CSS.

Опис стилів



Створіть файл my_Vmenu.css, в якому задайте все, що вам завгодно, щоб поліпшити зовнішній вигляд такого важливого елементу сайту. Нижче наведений код, впровадження якого пожвавить вертикальне меню CSS. Його і запишіть в створений файл, а потім ми розглянемо докладніше, що означають основні рядки, які тут наведені.

Детальний опис використаних стилів

Тепер розглянемо детально наше CSS меню вертикальне:

CSS меню вертикальнеlist-style-type дозволяє прибрати маркери списку. За допомогою установки "0" для margin і padding прибираємо зайві відступи у списку. Як видно з коду HTML, наше меню є списком, а за допомогою 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.jpg і menu_2.jpg - це картинки для зображення пункту меню в звичайному стані і при наведенні курсору.

Вертикальне CSS меню

Краще збережіть картинки в окремій папці для малюнків, назвіть її my_images, але тоді подкорректируйте код CSS. Напишіть там, де вказані ці зображення, що вони знаходяться в даній директорії: url (my_images / menu_1.jpg) і url (my_images / menu_2.jpg).

В інших властивостях, описаних в коді CSS, розібратися просто. Вони задають зовнішній вигляд нашого меню. Неважко помітити, що ширина і висота пунктів задана однаковою для пунктів при звичайному стані і при наведенні мишки на них. Розмір шрифту 18px, padding задає відступи з різних сторін від назв пунктів. Властивість display дозволяє задати відображення блоками, щоб задавати ширину і відступи.меню вертикальне

Наше вертикальне меню

Як бачите, вертикальне CSS меню створити легко. На базі даних знань ви зможете зробити його красивим і привабливим для відвідувачів свого інтернет-ресурсу! Використовуйте свою фантазію, і тоді стильне меню прикрасить ваш сайт.




» » Вертикальне меню CSS: робимо самі