Створюємо класні вкладки (tabs)
Дуже часто на багатьох сайтах зустрічаються вкладки, які дозволяють заощадити місце та, за бажанням відвідувача, показати їм більше інформації.
Тобто можна на одній сторінці розмістити інформацію, яка б зазвичай займала 3-5 сторінок. Вкладки незамінні у такій ситуації. У колишніх уроках ми вже мали подібні приклади, але плагінів для вкладок величезна кількість. Я постараюся показувати Вам найкращі та корисні.
Почнемо, мабуть, з кінця - cHTML.
Усі вкладки необхідно створювати так. Спочатку створюємо список з усіма вкладками. Якщо хочемо зробити, щоб певну вкладку відразу було відкрито для користувачів, їй необхідно присвоїти клас "active". Далі по кожній окремій вкладці створюємо шари. Обов'язково для кожного шару прописуємо клас "tabset_content". Після тега
із класом "tabset_label". Він необхідний для правильної роботи вкладок, але на екрані не відображається.
Тепер необхідно додати між тегами наступні рядки:
Тут ми додали всі потрібні скрипти для правильного функціонування. Вийшло трохи наляпісто (цілих 4 зовнішніх файли), проте мені подобається отриманий результат. Зверніть увагу на шляху до скриптів і пам'ятайте, що при переміщенні файлів їх необхідно змінювати (шляхи).
Також у вихідниках ми маємо таблицю стилів, але її прописувати у файлі не обов'язково, оскільки вона автоматично підвантажується через Javascript.
Ось і все готове! На мою думку, вийшло дуже непогано! Такі вкладки можуть стати в нагоді при створенні міні сайтів з описом товарів, сервісів. Також можна зробити простий сайт-візитку. Успіхів!
Даний урок підготовлений для вас командою сайту ruseller.com Джерело уроку: www.phrogz.net Переклав: Максим Шкурупій Урок створений: 28Квітня 2009 Переглядів: 86966 Правила передруку
5 останніх уроків рубрики "Для сайту"
Ефекти блочного розкриття
Сьогодні ми хотіли б поділитися декількома ідеями щодо ефекту блочного розкриття, яку ви можете використати для своїх проектів.
Якщо ви хочете суттєво підвищити рівень безпеки вашого сайту на WordPress, то вам не уникнути конфігурації файлу .htaccess. Це дозволить не тільки вберегтися від цілого ряду атак хакерів, але і організувати перенапрямки, а також вирішити завдання пов'язані з кешем.
20 безкоштовних тем для WordPress у стилі Material Design
Material Design - це тренд, що набирає обертів від Google. У цій збірці зібрані безкоштовні теми для WordPress, виконані в цьому популярному стилі.
20 сайтів з креативним ефектом MouseOver
Ефекти на те й існують, щоб вражати наших відвідувачів. У цій збірці зібрано кілька десятків ресурсів, чиї творці дуже постаралися вразити своїх відвідувачів.
Під кінець місяця пропонуємо ознайомитися з набором безкоштовних матеріалів для веб-дизайнерів за минулий місяць.