[Задание по вёрстке #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. usf

    ооо, наконец-то новый шаблончик)

     

  2. alexriz

    3. Выложить до 5.04.2013 г. исходный код

    это же сегодня O_o

    1. Арсений (Автор записи)

      Да ладно)))

      1. alexriz
  3. P1RATE

    Вот мой вариант http://jsfiddle.net/qxEU4/1/

  4. ann

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

  5. Ruslaner

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

  6. Blowup

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

    1. Владимир

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

    2. John

      Для этого не нужен jquery.

      http://tellmeof.cc.ua/DarkVertMenu/darkvertmenu.html

  7. Ryter
  8. Ryter

    http://jsfiddle.net/ryter/TFD4d/1/ чуток обновил 

  9. Юлия
    1. Юлия

      Кое-что забыла) Вот последний вариант http://jsfiddle.net/Juli/yJHMA/6/

  10. maiordom
  11. Sergalas

    надеюсь все получиться с первого раза

    http://jsfiddle.net/Sergalas/bUHBc/embedded/result/ 

  12. zombie_113

    Хм… а иконки на шрифтах никто не юзает? О_о

  13. usf

    http://codepen.io/usf/pen/ugBfF

    не смог залогиниться тут , ошибка cannot modify header information ;)

  14. SerGen

    Мой вариант решения: http://jsfiddle.net/tGhPF/

  15. int

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

    Ужас ваще.

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

    1. usf

      сижу на убунте. никакой проблемы не вижу. плохой ты линуксоид, значит

      1. int

        сижу на opensuse, в репах нет ie

        1. usf

          его и не должно быть в репах :D

          про wine слышал?

          1. int

            Хорошо, показывай установщик 10-го IE. Я в душе не знаю где его скачать.

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

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