CSS меню с закладками и Верстка слоями…

Сентябрь 2, 2007 — seregaborzov

- А не проще было 2 поста сделать?

- Так как этот вопрос я использую в качестве эпиграфа, не надо мне его задавать…

CSS меню с закладками

Конечно для многих дизайнеров и верстальщиков эта проблема покажется тривиальной, но для меня она оказалась трудной и интересной, так я сам по себе не дизайнер (только пробовал когда-то). Итак требовалось сверстать меню следующего вида:

При наведении на одну из закладок, меняется соответственно подуровень с ссылками(на рисунках ссылки подуровней одинаковые, но на самом деле они разные):

Я не буду приводить здесь код и рассказывать о том, как я делал меню. Просто хочу выложить исходник(3Кб) и дать ссылку на пример по которому я делал меню. CSS-вариант крут, но у каждого веб-дизайнера есть три проблемы: IE, FF, Opera =). Чтобы добиться корректного отображения во всех браузерах надо либо порвать одно место, либо быть верстальщиком. Так как ни того, ни другого я делать не хотел (хотя был близок к первому варианту=)), пришлось обратиться к Жеке. Его вариант меня очень порадовал, хоть он и использует JavaScript, поэтому я решил выложить и его исходник(3Кб), чтобы Вы могли пользоваться этим прекрасным меню, а Вы должны сейчас кликнуть по этой ссылке и посмотреть, что интересного творится на блоге Мастера Меню и PHP джедая smile_regular .

Верстка слоями

Верстку сайта, для которого собственно это меню и создавалось, я делал слоями или div’ами, впервые пробуя так верстать. И надо сказать, что после использования табличной верстки, когда я тока учился дизайну, при верстке слоями чувствуешь себя человеком smile_teeth . И если Вы тоже новичок в дизайне, и хотите освоить верстку слоями Вам помогут следующие ресурсы:

PS: у меня вроде появились или лся новый читатель =), ну хоть прокомментируй чего-нить. нравиться хоть? или так и будешь делать вид, что не знаешь =)))

…а музыка была: BLACK SABBATH - PLANET CARAVAN (слушать только в наушниках)

del.icio.us Tags: дизайн, верстка, меню, ссылки, css