Горизонтально центрированное меню з випадають підпунктами

В уроці "Горизонтально центрированное меню з використанням тільки CSS" було запропоновано рішення для організації горизонтально центрированного меню з використанням тільки CSS. Просте рішення має один невеликий недолік - організувати з його допомогою меню з випадають підпунктами не можна. Використання правила overflow: hidden; призводить до того, що все, що випадають підпункти будуть обрізатися, і їх ніколи не буде видно.

Продовжуючи тему, зробимо модифікацію запропонованого методу, щоб можна було використовувати його і для меню з випадають підпунктами.

Нижче приводиться меню демонструє реалізацію рішення:

Видаляємо overflow: hidden;

Щоб меню з випадають пунктами запрацювало, потрібно видалити правило overflow: hidden; з стилів елемента centeredmenu div. Якщо просто видалити дане правило, то може з'явитися смужка горизонтальної прокрутки для сторінки. Це відбувається тому, що невидимий елемент ul іноді виходить за праву межу області видимості. Однак не варто турбуватися. Є рішення. Ми можемо запобігти виходу елемента за праву межу області видимості, перевернувши позиціонування елементів меню так, щоб елемент ul виступав з лівого боку. Нижче представлений змінений код CSS:

На малюнку представлена ​​діаграма того, що відбувається з елементами при використанні вище наведених правил:

Зверніть увагу, що рожевий елемент ul виступає тепер з лівого боку сторінки. Браузер автоматично обрізає все, що виходить за межу зони видимості зліва. Тому нам не потрібно використовувати правило overflow: hidden ;.

Додаємо випадають пункти

Тепер модно додати випадають підпункти меню. Семантика HTML дуже проста - використовуються вкладені списки:

Виділення активного пункту меню

Виділення активного пункту верхнього рівня меню виконується за допомогою додавання class = "active" до відповідного елементу li.

Перевертання останнього підміню

Для того щоб останнє меню, що випадає не виходило за межі сторінки ми його перевертаємо. Для цього потрібно додати class = "last" до останнього елемента ul підменю. Дана дія можна сміливо припустити, якщо воно не відповідає задуму проекту.

Танці з бубном для Internet Explorer 6

За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!

Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!

Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.

Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!