Як зробити меню, що випадає CSS
Сьогодні ми будемо розглядати питання «Як створити меню, що випадає CSS?». Варто відразу сказати, що цей елемент буде зроблений без підключення будь-яких додаткових коштів. Тобто, меню буде створене тільки за допомогою CSS і HTML.
Підготовка
Щоб повністю зрозуміти, про що йде в мова в статті, необхідно хоч трохи познайомитися з теоретичним матеріалом. Але якщо ви знайомі з Псевдокласи, то можете пропустити цей абзац. Отже, щоб створити вертикальне меню, що випадає CSS, нам знадобиться такий елемент, як «: hover». Псевдоклас «: hover» може призначатися до будь-якого тегу HTML. Він дозволяє визначити момент, коли на який-небудь елемент наведений курсор миші. Наприклад, ми призначили властивість: «a: hover {color: red-}». Даний запис означає, що при наведенні курсору миші на будь тег його вміст стає червоним. Варто зауважити, що цей псевдоклас означає ще неактивований елемент. До речі, «: hover» має родинні подібні елементи. Але саме за допомогою цього псевдокласу ми будемо створювати меню, що випадає CSS.
Інструкція
Для початку варто зрозуміти, що являє собою меню, що випадає. Під це визначення потрапляє безліч різних прийомів побудови різних макетів. В даному випадку ми будемо розбирати конструкцію, що складається з декількох постійно видимих пунктів і декількох додаткових (прихованих). Давайте закінчимо з теорією і приступимо до практики.
- Створюємо макет нашого меню. Для цього зробимо розмітку HTML-коду. Створимо вкладений список:
- Приховуємо додаткове меню. Для цього використовуємо таблиці стилів, визначимо наступне властивість: ul ul {Display: none-} Це прибере елементи другого списку з екрану.
- Створюємо в CSS меню, що випадає з основного списку. У каскадних таблицях стилів напишемо наступне правило: ul li: hover ul {display: block-}. Даний запис означає, що при наведенні курсору миші на елемент li, який знаходиться в списку ul, на екрані з`явитися ul (вкладений). На перший погляд така схема може здатися занадто складною і заплутаною. Але насправді все дуже просто.
- Використовуйте даний макет самостійно, вставляючи між тегами
- свій контент. Можете змінювати кількість елементів списку.
Декоративні зміни
Як тільки буде готовий основний макет меню, можна приступати до його оформлення. Напевно, багато в першу чергу бажають позбутися маркерів, що позначають елемент списку. Робиться це за допомогою однієї властивості CSS, а саме list-style-type. Вам потрібно додати такий запис: li {list-style-type: none-}. Далі можна вставити рамку і зробити задній фон. Властивості border та background вам у цьому допоможуть. Можливо, деяким не сподобається, що меню, що випадає з`являється як додатковий список, розсуваючи при цьому основний елементи. Щоб це виправити, можна позиціонувати його. Для цього в каскадних таблицях стилю пишемо наступний запис: ul ul {position: absolute- left: 15px- right: 15px- top: 15px- bottom: 15px-}. Природно, значення у вас будуть використовуватися свої. Залежно від того, де ви хочете побачити меню, що випадає, CSS запропонує ще безліч властивостей, які можуть додати різні ефекти і прикрасити наші списки.
Висновок
Ще раз варто відзначити конструкцію макета меню. Для присвоєння CSS правил в даному випадку використовуються вкладені значення, наприклад, ul ul. Якщо у вас в документі будуть зустрічатися інші подібні конструкції, то можуть виникнути великі проблеми. У цих ситуаціях потрібно використовувати більш конкретне призначення, наприклад, селектори або id-ідентифікатори. Наведений у статті макет меню, що випадає призначений для ознайомлення із загальною конструкцією. Решта роботи покладається на ваші плечі.
Як зробити меню в групі «В контакті» Складно уявити життя сучасної людини без інтернету, в тому числі без всім відомого сайту «В контакті». Він уже став не лише способом спілкування, обміну новинами й місцем для зберігання фотографій, а й інструментом реклами. Користуються популярністю…
Як зробити посилання на сторінці свого сайту Посилання являє собою елемент сторінки веб-сайту (одне або декілька слів, картинка, кнопка тощо), що вказує на інший його елемент, іншу сторінку або ведучий на сторонні ресурси. Внутрішні посилання ведуть на сторінки, розміщені в межах власного…
Випадає список в Excel Сьогодні комп'ютер став необхідною частиною нашого життя. Різні програми настільки спрощують всю роботу, що обійтися без них не можна навіть недосвідченому починаючому користувачеві. Однією з них стала програми Excel - зручна, проста і досить…
Як пронумерувати сторінки в Ворді 2007, 2010 і ранніх версій Кожна сторінка в документі насправді має свій номер, але зазвичай він не показується. Щоб пронумерувати сторінки в Ворді, вам потрібно звернутися до меню колонтитулів. Саме там знаходиться потрібна нам функція.Послідовна нумераціяОсь проста схема,…
Як налаштувати контекстне меню в Windows 7 Говорячи простими словами про роботу ОС Windows, контекстне меню - це меню, яке з'являється на екрані, коли ви клацніть правою кнопкою миші на робочому столі або в Провіднику Windows. При натисканні правою кнопкою миші, таке меню просто надає…
Як поміняти курсор миші? Миша - це пристрій, за допомогою якого ми управляємо курсором. Користувач рухає її по столу, а датчики передають інформацію про зміну положення вказівником, повторяющему все на екрані. Зовнішній вигляд курсора визначається схемою, яка…
Як створити список HTML? Дуже просто! HTML на даний момент є найпопулярнішою мовою, який використовується для розмітки веб-сторінок. Багато розробники навіть не знають про те, що є й інші засоби для створення сайтів. Цій мові присвячено безліч книг, курсів і семінарів. Про нього і ця…
Як побудувати графік в Excel 2007 Графіки - це хороший спосіб аналізу інформації. Як правило, вони необхідні, коли потрібно розмежувати які-небудь бізнес-дані, що показують величину прибутку компанії за рік, або наукових відомостей, що показують, наприклад, як змінюється температура…
Як перемкнути мову на "макбуки"? Способи Багато хто цікавиться тим, як встановити кілька мов клавіатури, доступних в один і той же час на Mac OS X. Модуль «Мова тесту» дозволяє змінювати мову в меню і підказках, а також налаштовувати символи підстановки для дат, одиниць зміни, часу та…
Як зробити випадаючий список в HTML Найпростіший випадає список в HTML легко створити, використовуючи тег select. Це тег-контейнер, в нього вкладаються теги option - саме вони задають елементи списку.Є кілька варіантів списків, які можна зробити за допомогою тега select: список, що…
Як в "Ексель" зробити список, що розкривається (покрокова інструкція) Додавання списку в таблицю Excel допоможе зробити введення даних більш швидким, пропонуючи для користувачів список елементів, з яких слід вибрати необхідну замість того, щоб виконувати введення інформації кожен раз. Коли ви ставите такі дані в…
Як зробити список в списку. HTML-посібник для початківців Сторінки веб-сайтів складаються з багатьох елементів - таблиць, картинок, посилань, медіафайлів, списків. Одним з найбільш затребуваних елементів є як раз-таки список. З його допомогою можна упорядкувати інформацію, подати її в більш стислому і…
Використання властивості CSS "display: none" Каскадні таблиці стилів (CSS) дозволяють організувати зовнішній вигляд і оформлення інтернет-сторінки. Одним з найбільш часто вживаних властивостей і його значень є "display: none".Визначення властивостіСамо властивість є багатоцільовим і визначає…