Як зробити меню, що випадає css
Сьогодні ми будемо розглядати питання «Як створити меню, що випадає CSS?». Варто відразу сказати, що цей елемент буде зроблений без підключення будь-яких додаткових коштів. Тобто, меню буде створено тільки за допомогою CSS і HTML.
підготовка
Щоб повністю зрозуміти, про що йде в мова в статті, необхідно хоч трохи познайомитися з теоретичним матеріалом. Але якщо ви знайомі з псевдокласів, то можете пропустити цей абзац. Отже, щоб створити вертикальне меню, що випадає CSS, нам знадобиться такий елемент, як «: hover». Псевдоклас «: hover» може призначатися до будь-якого тегу HTML. Він дозволяє визначити момент, коли на будь-якої елемент наведений курсор миші. Наприклад, ми призначили властивість: «a: hover {color: red-}». Даний запис означає, що при наведенні курсора миші на будь-який тег його вміст стає червоним. Варто зауважити, що цей псевдоклас означає ще неактивований елемент. До речі, «: hover» має родинні подібні елементи. Але саме за допомогою цього псевдокласу ми будемо створювати меню, що випадає CSS.
Інструкція
Для початку варто зрозуміти, що являє собою меню, що випадає. Під це визначення потрапляє безліч різних прийомів побудови різних макетів. В даному випадку ми будемо розбирати конструкцію, що складається з декількох постійно видимих пунктів і декількох додаткових (прихованих). Давайте закінчимо з теорією і приступимо до практики.
- Створюємо макет нашого меню. Для цього зробимо розмітку HTML-коду. Створимо вкладений список:
декоративні зміни
Як тільки буде готовий основний макет меню, можна приступати до його оформлення. Напевно, багато хто в першу чергу бажають позбутися від маркерів, що позначають елемент списку. Робиться це за допомогою одного властивості 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-ідентифікатори. Наведений в статті макет меню, що випадає призначений для ознайомлення із загальною конструкцією. Решта роботи покладається на ваші плечі.