Створення css-сітки мініатюр з динамічним спливаючим меню
Для початку нам потрібно створити документ HTML5. Додаємо шрифти CSS Google WebFonts, які будуть застосовуватись до заголовка. Крім того, якщо користувач користується Internet Explorer 8 або раніше версією, для нормального відображення підключаємо документ HTML5shiv.
Це забезпечує підтримку нових елементів HTML5, таких як або . Тепер переходимо до основної частини, яка включатиме нашу галерею. Різні зображення були розділені за допомогою невпорядкованого списку, кожен елемент якого міститиме різну мініатюру. Невпорядковані списки дуже добре використовувати для створення макету сайту, оскільки вони прості в налаштуваннях і можуть містити різні дані.
Сортування мініатюр
Усередині кожного контейнера у нас має бути два окремі блоки. В одному буде розміщено зображення з посиланням на іншу сторінку. Зазвичай такі посилання ведуть до внутрішньої сторінки зі збільшеною копією зображення, але іноді можуть вести і першоджерело. Другий - внутрішній DIV з ім'ям класу.meta. Контент буде абсолютно позиціонований. Позиціонування досить важливо, оскільки нам потрібно меню, що розкривається, яке буде з'являється у верхній частині інших елементів, а не відштовхуватися від них.
Можливо, вам доведеться у спливаюче вікно включити більше даних або додати додаткові атрибути. Ці зміни не повинні вплинути на анімацію css3.
Давайте перейдемо до стилів.
У верхній частині ми скидаємо стандартні стилі і налаштовуємо кілька додаткових властивостей. Це досить важливо, щоб усі наші поля та відступи правильно відображалися у сучасних браузерах. Ще однією цікавою технікою є значенняheight: 101% до елемента тілу HTML. Це гарантуватиме, що наш сайдбарне стрибатиме, коли з'явиться динамічний контент.
CSS стає цікавішим, як ми переходимо до галереї. Ви бачите ID#thumbs, до якого надалі будуть застосовані наступні стилі. Погляньмо, як це виглядає:
Ви також можете бачити, що кожне зображення відображається з непрозорістю 60%. Такі переходи, як ми бачимо, застосовані до зображення, а не до спливаючого меню, тому за бажання, анімацію можна змінити на будь-яку іншу або взагалі її прибрати. Але з такою анімацією легше відобразити, яке зображення активне.
Ефект спливаючого меню
Це остання частина CSS, але вона не складна. Ми будемо використовувати таку ж кількість властивостей CSS3 та вендорними префіксами.
Нові властивості CSS3 були поділені на розділи для легшого сприйняття. Ми будемо використовувати закруглені кути та невеликі тіні. При завантаженні весь контент буде видимим, але ми не зможемо його побачити, так як ширина встановлена на 0px. При наведенні ми збільшуємо ширину.
Як бачимо, і дія із прихованими елементами є досить цікавою. Це урок демонстрація того, як такі ефекти можна реалізувати за допомогою CSS властивості. Існує також багато різних способів для покращення якості анімацій за допомогою JQuery.