Як зробити меню, що випадає CSS

Сьогодні ми будемо розглядати питання «Як створити меню, що випадає CSS?». Варто відразу сказати, що цей елемент буде зроблений без підключення будь-яких додаткових коштів. Тобто, меню буде створене тільки за допомогою CSS і HTML.

меню, що випадає css

Підготовка

Щоб повністю зрозуміти, про що йде в мова в статті, необхідно хоч трохи познайомитися з теоретичним матеріалом. Але якщо ви знайомі з Псевдокласи, то можете пропустити цей абзац. Отже, щоб створити вертикальне меню, що випадає CSS, нам знадобиться такий елемент, як «: hover». Псевдоклас «: hover» може призначатися до будь-якого тегу HTML. Він дозволяє визначити момент, коли на який-небудь елемент наведений курсор миші. Наприклад, ми призначили властивість: «a: hover {color: red-}». Даний запис означає, що при наведенні курсору миші на будь тег його вміст стає червоним. Варто зауважити, що цей псевдоклас означає ще неактивований елемент. До речі, «: hover» має родинні подібні елементи. Але саме за допомогою цього псевдокласу ми будемо створювати меню, що випадає CSS.

вертикальне меню, що випадає css

Інструкція

Для початку варто зрозуміти, що являє собою меню, що випадає. Під це визначення потрапляє безліч різних прийомів побудови різних макетів. В даному випадку ми будемо розбирати конструкцію, що складається з декількох постійно видимих пунктів і декількох додаткових (прихованих). Давайте закінчимо з теорією і приступимо до практики.

• Створюємо макет нашого меню. Для цього зробимо розмітку HTML-коду. Створимо вкладений список:
  . Приблизно так має виглядати ваше меню, що випадає. CSS набуде справа трохи пізніше. В даному випадку основний список складається з трьох основних пунктів і двох вкладених.
• Приховуємо додаткове меню. Для цього використовуємо таблиці стилів, визначимо наступне властивість: ul ul {Display: none-} Це прибере елементи другого списку з екрану.
• Створюємо в CSS меню, що випадає з основного списку. У каскадних таблицях стилів напишемо наступне правило: ul li: hover ul {display: block-}. Даний запис означає, що при наведенні курсору миші на елемент li, який знаходиться в списку ul, на екрані з'явитися ul (вкладений). На перший погляд така схема може здатися занадто складною і заплутаною. Але насправді все дуже просто.
• Використовуйте даний макет самостійно, вставляючи між тегами
• свій контент. Можете змінювати кількість елементів списку.

css меню, що випадає

Декоративні зміни

Як тільки буде готовий основний макет меню, можна приступати до його оформлення. Напевно, багато в першу чергу бажають позбутися маркерів, що позначають елемент списку. Робиться це за допомогою однієї властивості 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-ідентифікатори. Наведений у статті макет меню, що випадає призначений для ознайомлення із загальною конструкцією. Решта роботи покладається на ваші плечі.