Меню сообщества с использованием стилей css
Метки: уроки оформления блога, HTML
Вы не можете комментировать, т.к. не авторизованы.
|
|
Нелли Бойнова
04-03-2014 23:45 (ссылка)
Меню на основе картинки, о котором шла речь в предыдущем посте, самое распространённое на сайте mail.ru и одновременно самое простое. Но в нём есть некоторые недостатки и сложности, с которыми вам придётся столкнуться, если вы попытаетесь сделать такое меню. Несмотря на то, что фотошоп установлен наверное у каждого второго пользователя, далеко каждый сможет нарисовать для себя привлекательное меню; меню-картинка имеет какой-то вес, то есть загружается не мгновенно, что важно для пользователей с медленным интернетом; даже если вы нарисуете великолепный вариант меню, в сообществе оно превратится в разлинованный рисунок из-за ошибок в коде самого сайта.
Избежать этих проблем позволит меню с использованием стилей css, о которых мы говорили в одном из занятий нашего тренинга. Именно таким образом создано меню нашего сообщества, а ещё раньше мы его использовали, чтобы сделать меню сообщества "Компьютеры и интернет" и это было самое первое меню с использованием стилей css на сайте. Меню многим понравилось, были вопросы и в сообществе и в личке с просьбой рассказать как его сделать.
Рассказываю :)
Для примера использую меню нашего сообщества, вернее, его небольшую часть:
Для меню нам понадобится вот такая таблица:
Её код:
Таблица состоит из трёх строк, во второй строке три ячейки, в первой и третьей по одной большой объединённой ячейке, для создания которой используется атрибут colspan.
Значение:
colspan=3 в коде ячейки говорит о том, что она занимает такое же пространство, что и три обычные ячейки таблицы.
Мы не задаём размеры ячеек, они будут определяться по содержимому.
Значения атрибутов:
border="0" cellspacing="0" cellpadding="2" - ширина (0), расстояние между ячейками (0), отступ содержимого от границ ячейки (2рх). Последняя величина нужна для того, чтобы между ячейками в таблице были видны промежутки. Если такие промежутки не нужны, значение cellpadding тоже принимается равным "0"
align="center" - выравнивание таблицы по центру.
Итак, таблицу мы создали, но если вы захотите посмотреть как выглядит приведённый мной код, не увидите совершенно ничего.
Это как в том анекдоте про суслика:
- Ты суслика видишь ? - Нет - И я не вижу. А он есть.
Точно так же и с таблицей: никто её не видит, но она есть, а главное, о её существовании знает браузер, который готов разместить содержимое по ячейкам таблицы. Осталось, это содержимое создать.
Если вы участвовали в нашем тренинге, наверное помните, что о стилях css мы уже говорили.
Точно такие же рамочки css с фоном используем и для заливки ячеек таблицы. Фоном рамочки может быть и цвет (тогда она получается невесомой) и картинка (так вы можете избавиться от промежутков между строками таблицы, которые добавляет майл).
В нашем меню мы использовали оба варианта: верхняя ячейка - картинка в рамочке, все остальные - просто цвет.
Код верхней ячейки:
В этом коде:
Примечание*
В заливке ячейки мы используем и цвет и картинку для тех случаев, когда при медленном интернете картинка будет грузиться долго, или если в браузере заблокированы картинки.
Код ячейки из второй строки:
Как видите, код совершенно идентичный, изменился только размер ячейки, и для фона мы используем небольшую картинку с градиентом цвета от тёмного к светлому, для того, чтобы кнопка выглядела объёмной.
Был забавный случай, когда занимаясь меню сообщества мы ошиблись в коде и указали цвет фона ячейки не синий, а желтый. При загрузке меню было видно, как желтый цвет ячейки меняется на синий цвет картинки. Код этот был для нас в новинку и мы даже допустили, что именно так оно и должно выглядеть. Потом разобрались, конечно. Это я к тому, что какой бы маленькой по весу ни была картинка, которую используете в оформлении меню, загрузится она всё равно позже, чем цвет.
Для нижней ячейки используем такой же код, но с большей шириной ячейки и без заливки картинкой с градиентом цвета (просто так захотели, чтобы нижняя ячейка выглядела плоской).
В верхней ячейке мы разместили название сообщества. Это обычный текст, цвет и размер которого форматировали с помощью встроенного редактора записи.
В центре таблицы размещаются ссылки на посты меню.
Код ссылки:
Обратите внимание, в тексте ссылок тоже можно изменять цвет и размер текста. Но если изменение размера роли не играет (следите только, чтобы текст помещался в ячейке), то при изменении цвета текста исчезает эффект изменение цвета ссылки при наведении курсора. Вначале текст ссылок мы сделали белым - так наряднее. Сейчас оставили цвет ссылок синим, по умолчанию, зато теперь ссылки в меню меняются, когда на них наводят курсор.
В нижней ячейке мы поместили поиск по сообществу, который можно сделать здесь: http://blogs.yandex.ru/form... достаточно очевидно: всего три шага, в результате которых вы получите форму поиска по сообществу.
Вместо поиска по сообществу в нижней ячейке можно поместить список постов меню с выпадающими ссылками.
О том, как сделать такой список, рассказывала в этом посте
Если есть таблица, оформление и содержимое ячеек, осталось вложить их друг в друга, как матрёшку.
Оформление ячеек помещаем в ячейки таблицы, содержание в оформление, и в результате получаем код меню, который выглядит так:
Разумеется, я не предполагаю, что все тут же примутся создавать и прямо в комментариях демонстрировать свои варианты меню. Но представление о том как такие меню делаются вы получили и, если поставите такую цель, сможете придумать и создать меню для своего сообщества.
Ирина