Вертикальне меню CSS: робимо самі
Деякі веб-майстри не хочуть витрачати час на розробку з нуля простих елементів, які вже існують. Вони вважають, що немає сенсу витрачати свій час на те, що вже давно є. Насправді для тих, хто тільки освоює HTML і CSS, важливо самим робити багато речей, щоб добре розуміти їх роботу. Це відноситься і до меню. Створимо вертикальне меню CSS. Воно буде грунтуватися тільки на HTML і CSS, без застосування javascript і JQuery. Кожне меню являє собою список посилань, які ведуть на сторінки сайту.
Основні кроки
Щоб створити нескладне вертикальне меню CSS, необхідна наступна послідовність дій:
1. Спочатку визначте список посилань (за допомогою коду HTML), з яких буде складатися меню. Дайте їм назви, наприклад, такі:
- Головна.
- Наша історія.
- Керівництво.
- Послуги.
- Контакти.
2. Потім стилізуємо посилання за своїм бажанням за допомогою CSS.
Напишемо код HTML, збережемо у файлі my_Vmenu.html і подивимося, як це буде виглядати в браузері: 
Це основа (каркас) нашого меню. # 1, # 2 і т.д. необхідно замінити на посилання. Подивіться, як все виглядає в браузері. Картина вам не сподобається. Тепер треба приступити до опису стилів елементів, щоб зробити повноцінне вертикальне меню CSS.
Опис стилів
Створіть файл my_Vmenu.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 - це картинки для зображення пункту меню в звичайному стані і при наведенні курсору.
Краще збережіть картинки в окремій папці для малюнків, назвіть її my_images, але тоді подкорректируйте код CSS. Напишіть там, де вказані ці зображення, що вони знаходяться в даній директорії: url (my_images / menu_1.jpg) і url (my_images / menu_2.jpg).
В інших властивостях, описаних в коді CSS, розібратися просто. Вони задають зовнішній вигляд нашого меню. Неважко помітити, що ширина і висота пунктів задана однаковою для пунктів при звичайному стані і при наведенні мишки на них. Розмір шрифту 18px, padding задає відступи з різних сторін від назв пунктів. Властивість display дозволяє задати відображення блоками, щоб задавати ширину і відступи.
Наше вертикальне меню
Як бачите, вертикальне CSS меню створити легко. На базі даних знань ви зможете зробити його красивим і привабливим для відвідувачів свого інтернет-ресурсу! Використовуйте свою фантазію, і тоді стильне меню прикрасить ваш сайт.
Як зберегти сторінку Інтернет-сайту? Нерідко виникає проблема, як зберегти сторінку в Інтернеті, тому що з'являється необхідність чи просто бажання мати її у себе. Для цього існує кілька способів, які ми розглянемо в цій статті. Наприклад, в Інтернеті ви знайшли рецепт цікавого страви…
Як оформити групу 'В Контакте' Напевно, немає сенсу розповідати про те, що таке соціальна мережа «В Контакте»: чи не у кожного першого є в ній сторінка. Багато дуже активно нею користуються і створюють усілякі тематичні групи, що об'єднують однодумців. Як оформити групу «В…
Початківцям веб-дизайнерам: як зробити обтікання картинки текстом У цій статті ми розповімо вам про ті особливості HTML і CSS, які пов'язані із зображеннями. Ви дізнаєтеся, як вставити їх в HTML-документ. Також в статті наведена інформація про те, як змінити параметри малюнка і організувати обтікання картинки…
Як налаштувати контекстне меню в Windows 7 Говорячи простими словами про роботу ОС Windows, контекстне меню - це меню, яке з'являється на екрані, коли ви клацніть правою кнопкою миші на робочому столі або в Провіднику Windows. При натисканні правою кнопкою миші, таке меню просто надає…
Як зробити меню, що випадає CSS Сьогодні ми будемо розглядати питання «Як створити меню, що випадає CSS?». Варто відразу сказати, що цей елемент буде зроблений без підключення будь-яких додаткових коштів. Тобто, меню буде створене тільки за допомогою CSS і HTML.ПідготовкаЩоб…
Інструкція: як занести в чорний список в «Однокласниках» У соціальних мережах деколи ми стикаємося з такими користувачами, спілкуватися з якими абсолютно нецікаво, а може, і більше того, противно. Таким особистостям не хочеться показувати свої фотографії і ділитися новинами. Благо адміністратори…
Як зробити випадаючий список в HTML Найпростіший випадає список в HTML легко створити, використовуючи тег select. Це тег-контейнер, в нього вкладаються теги option - саме вони задають елементи списку.Є кілька варіантів списків, які можна зробити за допомогою тега select: список, що…
Як зробити гіперпосилання у презентації різними способами? Коли ви працюєте в Microsoft PowerPoint, ви можете прикріпити матеріал, який знаходиться за межами презентації, за допомогою гіперпосилань. Завдяки гіперпосиланням можна пов'язати частина презентації з іншим слайдом в тому ж файлі, окремої…
Що таке хмара тегів Хмара тегів ще називають хмарою міток. Воно розташовується, як правило, збоку сайту, іноді його можна знайти під навігацією. Таке меню дуже популярно на блогах, де з його допомогою можна витягнути публікації з певними тегами або на якусь конкретну…
Як красиво оформити групу в Контакті. Поради та правила Соціальна мережа Вконтакте радує своїх користувачів великою кількістю цікаво оформлених груп. Багато хто з них зовні не поступаються повноцінному сайту. Такий ефект забезпечує грамотне оформлення групи, зокрема, меню і аватари. Досвідчені…
Властивість css "прозорість" - простий спосіб зробити дизайн сайту цікавіше Сьогодні створення дизайну сайту стає справжнім мистецтвом. Це не просто набір елементів сторінки певного кольору і розміру, шрифти різних стилів і тематичні малюнки. Для того щоб зробити сайт несхожим на інші, привернути увагу відвідувачів і…
Кнопка html: застосування, виготовлення Початківці творці сайтів (не ті, хто використовує готові рішення, а саме ті, хто хоче створювати сайти самостійно) вивчають html, однак не завжди вдається з першого разу зрозуміти всі нюанси створення сайту своїми руками.Кнопка html в меню сайту в…
Вирівнювання по центру: CSS-верстка При верстці сторінки часто необхідно здійснити вирівнювання по центру CSS-способом: наприклад, центрировать основний блок. Існує кілька варіантів вирішення цієї проблеми, кожен з яких рано чи пізно доводиться використовувати будь…