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

Відео: CSS3 для початківців | # 11 Меню, що випадає на CSS

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

підготовка

Відео: Меню, що випадає на CSS

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

Інструкція

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

Відео: Створення меню, що випадає (CSS, JQuery)

• Створюємо макет нашого меню. Для цього зробимо розмітку HTML-коду. Створимо вкладений список:

. Приблизно так має виглядати ваше меню, що випадає. CSS вступить в справу трохи пізніше. В даному випадку основний список складається з трьох основних пунктів і двох вкладених.

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

Увага, тільки СЬОГОДНІ!