Горизонтальное меню с горизонтальным подменю

[Маленьке Звірятко]

http://saveimg.ru/pictures/05-05-12/8ec5c5e92e3d826f366dfa22b1bf4c21.bmp

Надо сверстать вот такое меню. Дааа, надо признатся, оказалось это сложной задачей для меня:-( главное гори-ое меню и появление подменю сделать удалось. Подменю появляется через hover. А как сделать, чтоб оно появлялось при клике по ссылке на главном меню? Вообще, ваши рекомендации, советы как сверстать?

[wildhind]

а при клике — только скриптом.

Есть ещё :target, но речь ведь о реальном проекте, а не об экспериментальном, не так ли?

[Маленьке Звірятко]

wildhind, совершенно верно

[mrnobody]

http://saveimg.ru/pictures/05-05-12/8ec5c5e92e3d826f366dfa22b1bf4c21.bmp

Надо сверстать вот такое меню. Дааа, надо признатся, оказалось это сложной задачей для меня:-( главное гори-ое меню и появление подменю сделать удалось. Подменю появляется через hover. А как сделать, чтоб оно появлялось при клике по ссылке на главном меню? Вообще, ваши рекомендации, советы как сверстать?

Я так понял Вам нужно чтобы при клике по главной навигации появлялась "поднавигация" и когда отводите курсор, чтобы "поднавигация" не исчезала?

Может быть Вам вот эта статья поможет? В статье это сделано с помощью псевдокласса :focus.

Edited May 6, 2012 by mrnobody

[Маленьке Звірятко]

mrnobody, спасибо, посмотрю. Меня сейчас интересует такой вопрос: фон для главного меню, как делать? Вырезать целиком (613px X 45px)с psd макета, сохранить в png и сделать бекграундом? Тогда нет проблем со скруглением углов. Или вырезать, например, кусочек 10рх Х 45рх, и замостить через repeat-x, а скругление сделать через border-radius? Или как? Аналогично для фона подменю. Там нижние углы скругленые. Как лучше поступить?

[mrnobody]

mrnobody, спасибо, посмотрю. Меня сейчас интересует такой вопрос: фон для главного меню, как делать? Вырезать целиком (613px X 45px)с psd макета, сохранить в png и сделать бекграундом? Тогда нет проблем со скруглением углов. Или вырезать, например, кусочек 10рх Х 45рх, и замостить через repeat-x, а скругление сделать через border-radius? Или как? Аналогично для фона подменю. Там нижние углы скругленые. Как лучше поступить?

Ну можно задать радиус скругления для элемента <ul> внутри которого находятся списки (<li>). А градиент можно сделать с помощью этого сервиса - http://www.colorzilla.com/gradient-editor/ . Для подменю почти тоже самое, только еще для первой и последней ссылки задать соответственно левый-нижний и правый-нижний border-radius через псевдокласс :first-child и :last-child (способ похож на пример этой статьи http://www.red-team-design.com/cool-css3-navigation-menu).

Вот я Вам градиент подобрал, вроде похож (точнее не очень похож , но можно подобрать цвета точнее) -

Edited May 6, 2012 by mrnobody