CSS-live.ru

[Задание по вёрстке #17] Вертикальное меню

Добрый вечер, верстальщики! Уже пятница и пора потренироваться на выходных. [Задание по вёрстке] это рубрика статей, которые мы публикуем по пятницам. В каждой статье Вы найдете шаблоны кнопочек, форм или даже сайтов в формате PSD. Ваша задача красиво и качественно сверстать шаблон.

Лучшее решение [Задание по вёрстке #16]

На этой неделе было три лидера: Blowup, Vita, usf. Поздравляем победителя Vita и коротко по каждой из представленных работ:

  • Петр — уголок с уведомлениями сделан на css, жаль что работа не доделана до конца, отсутствуют ховеры у элементов и нет фона
  • Антон — хорошо, но твиты и фолловеров надо было делать ссылкой, большинство участников уведомления сделали на css обратите на это внимание
  • Tyffaxyn — хорошая css, слишком сильная тень у уведомлений и нет ховера на этот же элемент
  • Blowup — радует что input обернутый в тег form), уголок на css, base64, но вот твиты и фолловеры надо ссылками
  • Sergalas — видимо не хватка времени. Опять слишком много id, твиты не ссылки, уведомления прыгают в разных браузерах и фон сделан у этого же элемента картинка
  • Vita — хорошая работа, но недочёт в EI10
  • usf — единственный кто аватар пользователя обернул в тег figure, оптимизированная работа, но твиты и фолловеры в span и тень у текста надо было белую, а не чёрную делать

Благодарим участников и смотрим новое задание.

Вертикальное меню в темных тонах

Вертикальное меню

Навигация является самой важной составляющей любого сайта. Часто навигационное меню или список корневых категорий отделяют сайдбаром (боковая панель). Так же когда на сайтах есть вложенность категорий их разбивают по группам и если в группе больше 7-10 пунктов, то меню делают "выпадающими", скрывая разделы третьего уровня вложенности, что упрощает пользователю поиск нужной информации.

На эту неделю предлагаем сверстать вертикальное меню в темной цветовой гамме. Некоторые пункты меню "раздвижные". В шаблоне используется стандартный шрифт, не забываем про скрытые группы слоев с ховерами для иконок.

Скачать

Требования к вёрстке:

1. Сверстать шаблон, максимально используя HTML5 и CSS3. Минимальные отклонения от макета ("пиксель в пиксель"). Добиться максимально одинакового результата во всех последних версиях браузеров, включая IE10.

2. Приветствуется минимальная вложенность, оптимизированный HTML5 и CSS3.

3. Выложить до 12.04.2013 г. исходный код на любой из площадок: jsFidle, codepen, JS Bin, CSSDeck. Дать ссылку на своё решение в комментариях к этой статье. (Также можно на Facebook и Вконтакте).

Лучшее решение мы выберем и опубликуем в пятницу. Удачного коддинга на выходных, друзья! :D

P.S. Это тоже может быть интересно:

25 комментариев

  1. сначала я была за задания для верстки но теперь на сайте только они, печально(

  2. А можете ли ньюфагу объяснить принцип, по которому работает сиё выдвижение?

  3. http://codepen.io/anon/pen/tkmic
    на мой взгляд, эффект выпадания логичнее было бы сделать на jquery и по клику, это повысило бы удобство пользования данной менюшкой.
    т.к. при движении курсора сверху вниз по подпунктам Gallery при переходе на пункт Logout сворачиваются предыдущие пункты, что может сбить пользователя с толку, т.е., чтобы благополучно навести курсор на пункт Logout нужно двигаться либо снизу вверх, либо сбоку.
    а так в качестве тренировки макет интересный оказался

    1. Согласен, на практике для мобильных девайсов надо будет все равно втавлять подпорку скрипта для обработки события click

  4. > На этой недели было три лидера ну ё-моё.
    Неделя Недели Неделе Неделю Неделей О неделе (на неделе) Какого лешего у вас родительный падеж?

    Ужас ваще.

    И где вы предлагаете людям брать IE10 на линуксе, например?

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.