Робимо мега меню
Крок 2: Кодуємо випадає частина меню
"Класичне" меню, що випадає зазвичай містить список вкладений в батьківський елемент і виглядає наступним чином:
Загальна структура
Для нашого Мега Меню замість дерева списків ми будемо використовувати стандартні елементи div. який будуть працювати як вкладені списки:
Це базова структура меню, що випадає. Ідея полягає в тому, щоб включати будь-який вид контенту, наприклад, параграфи, зображення, списки або контактні форми. При цьому організовувати все це в колонки.
Контейнери для випадаючому частини
Контейнери з різними розмірами будуть містити весь конетнтом випадаючому частини. Назви контейнерів відповідає кількості колонок, які вони містять.
Щоб приховати випадаючому частини ми будемо використовувати абсолютне позиціонування з від'ємним значенням лівого поля:
Фоновий колір такий же, як і у пунктів меню. Нові браузери будуть виводити градієнт від кольору #EEEEEE нагорі до кольору #BBBBBB внизу:
Ми знову використовуємо закруглені кути, за винятком лівого верхнього кута:
Частина коду CSS для контейнерів виглядає так:
Ось так МОГБ виглядати випадає контейнер, якщо не приділяти уваги деталям:
А ось приклад того, що зробили ми:
Тепер випадає контейнер відмінно стикується з пунктом меню.
Для правильного висновку контейнерів ми повинні задати їм ширину:
А реакція на проходження курсору миші над пунктом меню здійснюється дуже просто:
Використання випадають контейнерів
Наші класи готові для використання в меню. Ми будемо використовувати кожен з них починаючи з 5-и колоночного і закінчуючи один стовпчик:
А виглядати воно буде так:
Крок 3: Створюємо колонки для випадає контейнера
Тепер, коли контейнери готові, потрібно створити колонки розширених розмірів.
Використання колонок
Ось приклад, що випадає контейнера з декількома колонками. В даному прикладі ми використовуємо різні комбінації всіх видів колонок:
А ось так він буде виглядати:
Крок 4: Вирівнювання вправо
Тепер розберемося з тим, як нам вирівняти пункти меню і випадають контейнери по правій межі навігаційної панелі. Змінювати треба і пункти меню і відповідні їм випадають контейнери.
Для виконання поставленого завдання ми використовуємо новий клас .menu_right для пунктів меню. Таким чином встановимо праве поле і зміщення вправо:
Тепер подивимося на список, що випадає контейнер. У попередньому коді CSS ми встановлювали скругление для всіх кутів за винятком лівого верхнього для того, щоб встановити відповідність батьківського пункту меню. Тепер ми зробимо те ж саме для правої межі. Таким чином, ми створимо новий клас .align_right. в якому скругление для правого верхнього кута буде встановлено в 0.
Тепер зробимо поява випадає пункту праворуч:
Тепер можна використовувати установки для нашого меню:
Ось як буде виглядати наш маленький приклад:
Крок 5: Додаємо контент і встановлюємо стиль для нього
У нас готова структура меню, тепер можна додати контент: тексти, списки, зображення і так далі.
Загальний стиль
Почнемо з базового стилю для параграфів і заголовків:
Будемо використовувати чарівний блакитний колір для посилань в випадаючому частини:
Стиль для списків
Візьмемо за основу вже створений стиль списків і підправимо його: used in the navigation bar.
Стиль для зображень
І створимо стиль для параграфа із зображенням ліворуч:
Прямокутники для виділення тексту
Для виділення якого-небудь контенту будемо використовувати темний прямокутник з округленими кутами і ніжною тінню:
Списки в випадаючому частини
Також змінимо стилі для списків, які будуть розміщуватися в випадаючому контенті:
Крок 6: Handling Browser Compatibility and IE6
Всі браузери обробляють подія hover для інших тегів крім посилань. крім Internet Explorer. Тобто наше Мега Меню не працюватиме в цьому старому браузері. Ми можемо виправити цю проблему за допомогою спеціального файлу, який додасть потрібний функціонал до цього браузеру.
Для вказівки IE6 будемо використовувати наступний код:
В даному уроці використовується кілька PNG файлів, а IE6 не підтримує прозорість. Для вирішення даної проблеми можна використовувати різні варіанти рішень:
- Конвертувати зображення в формат GIF або PNG-8
- використовувати посилання
- Встановити колір фону відмінним від сірого
Ви самі оберете відповідний варіант рішення в завісісмості від умов вашого проекту.
Остаточний вигляд готового проекту
Доброго всім вечора. Намагаюся прикріпити це меню на свій сайт і виникають 2 проблеми: - випадають блоки прозорі і природно зливається текст, який знаходиться нижче меню з текстом з випадаючих блоків; - при русі вниз, як тільки курсор по випадає меню йде за межі основного рядка з пунктами меню, що випадає меню зникає. Що я не правильно роблю?
розібрався. все дуже просто. z-index. ранок вечора мудріший.
Для тих, у кого не працює меню в IE. перевірте значення "DOCTYPE", щоб воно збігалося з ісходником.
Після кожного заголовка, внизу, лінії. Як їх прибрати?
Гарно! Скажіть будь ласка - а це меню до Joomla 1.5 прикрутити можна? І якщо так - то де копати щоб дізнатися як. Шаблон на артістере робив. Як я зрозумів, просто скопіювати исходник не можна. Заздалегідь дякую.
Скільки пішло часу на реалізацію такого меню?
підкажіть, пож-та: я зробив окремо це меню (тобто поза сайтом, просто подивитися). Чи можна його тепер прикрутити до сайту на Joomla?
Підкажіть будь ласка, який рядок відповідає за ширину меню, що випадає, а то у мене кожен пункт пишеться в дві-три рядки, а хочеться щоб було в одну Дякую.
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!