Меню за допомогою CSS спрайтів
Сьогоднішній урок ознайомить Вас із процесом створення простого меню з використанням одного зображення.
Це меню дуже просте, але виглядає непогано та підійде для різних сайтів.
Якщо у Вас до цього часу меню складається з безлічі зображень - настав час зробити апгрейд :)
Мета
CSS спрайт зведе до мінімуму кількість HTTP запитів та підвищить швидкість завантаження сайту.
Дизайн меню
Почнемо зі створення нашого меню у Фотошопі.
Лінійки та маркери повинні стати Вашими найкращими друзями, коли йдеться про CSS спрайти. Для початку давайте їх увімкнемо: View>Rulers. Як тільки ми всі увімкнули, можемо створювати нову напрямну, натискаючи на лінійку і перетягуючи її на зображення.
Щоб у Вас все правильно працювало в CSS, необхідно точно знати координати кожного елемента меню в спрайте.
Найпростіше під час створення подібних меню використовувати цілі значення: 100, 200, 300 пікселів, а чи не 101 чи 342 пікселя. Це дозволить Вам з меншими трудовитратами вносити зміни в меню.
Структура за допомогоюЩю HTML
Код нижче створить просту структуру меню, з якою ми будемо працювати за допомогою CSS.
Трохи проSEO
Позиціонуємо зображення за допомогоюCSS
Властивість CSS background-position дозволяє вказати набір координат фонового зображення. Великий плюс цього те, що Ви можете завантажувати те саме зображення для декількох елементів. Але координати дозволять Вам вказувати різні частини цього зображення. Це CSS c властивість є основним спрайтів.
Кожному елементу меню ми надали власний клас. Це дозволить нам звертатися індивідуально до кожного елемента для вказівкикоординат. На початку таблиці стилів ми вказуємо місце розташування фону, а далі в кожному елементі просто прописуємо координати.
Використовуючи цей метод, ми створили три унікальні стани для навігації:
1. За умовчанням 2. При наведенні мишки 3. Стан "Вибраний" елемент меню, який відображає поточну сторінку. Активується за допомогою класу "selected"
Підведемо Підсумки
До цього моменту у Вас має вийти меню з використанням одного зображення. Це значно знизить навантаження на сайт і збільшить швидкість завантаження.
Даний урок підготовлений для вас командою сайту ruseller.com Джерело уроку: www.buildinternet.com Переклав: Максим Шкурупій Урок створено: 26 Січня 2010 Переглядів: 47060 Правила передруку
5 останніх уроків рубрики "Для сайту"
Ефекти блочного розкриття
Сьогодні ми хотіли б поділитися декількома ідеями щодо ефекту блочного розкриття, яку ви можете використати для своїх проектів.
Якщо ви хочете суттєво підвищити рівень безпеки вашого сайту на WordPress, то вам не уникнути конфігурації файлу .htaccess. Це дозволить не тільки вберегтися від цілого ряду атак хакерів, але і організувати перенапрямки, а також вирішити завдання пов'язані з кешем.
20 безкоштовних тем для WordPress у стилі Material Design
Material Design - це тренд, що набирає обертів від Google. У цій збірці зібрані безкоштовні теми для WordPress, виконані в цьому популярному стилі.
20 сайтів з креативним ефектом MouseOver
Ефекти на те й існують, щоб вражати наших відвідувачів. У цій збірці зібрано кілька десятків ресурсів, чиї творці дуже постаралися вразити своїх відвідувачів.
Під кінець місяця пропонуємо ознайомитися з набором безкоштовних матеріалів для веб-дизайнерів за минулий місяць.