[Задание по вёрстке #20] Адаптивное меню

Арсений Лысов

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

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

Лучшим на этой неделе снова стал Blowup, поздравляем. Коротко по каждой из представленных работ:

  • Юлия — хорошая работа, но есть различия с макетом — вся правая сторона в header чуть ниже;
  • Blowup — все отлично;
  • Potato — хорошо, но надо больше спрайтов;
  • akaSpy, Андрей — ребята меньше дивов, больше спрайтов).

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

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

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

Адаптивность — тренд веб-разработки 2012-2013 годов. Адаптивные сайты можно просматривать на различных устройствах, тем самым они захватывают широкую аудиторию пользователей. При создании таких сайтов возникает масса проблем, одной из которых всегда была навигация.

И вот, responsive добрался до [Заданий по верстке], да здравствуют медийные запросы (Media Queries)! На этих длинных выходных у вас есть великолепная возможность продемонстрировать свои навыки адаптивной верстки. Предлагаем вам сверстать вертикальное адаптивное меню в светлых тонах.

О PSD-шаблоне: используется стандартный шрифт Arial, иконки сделаны на шейпах и вы можете их использовать в своих проектах, в скрытых группах слоев (они выделены красным) находятся ховеры иконок.

Скачать

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

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

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

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

Лучшее решение мы выберем и опубликуем в воскресенье. Поздравляем с грядущими праздниками и удачного коддинга! :D

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

43 комментария

    1. Меню слева и меню справа — это одно и тоже. Это два их разных состояния, которые меняются в зависимости от размера экрана

      Ответить

      1. А что тут верстать? :) 5 минут сверстать менюшку и еще за минут 30-40 накидать красивостей сколько душе угодно)

        Ответить

  3. И себе что ли поучаствовать :)

    http://jsfiddle.net/alexriz/4B4A4/show/

    Реализовано:

    • Состояния по заданию: обычное и :hover
    • Состояния вне задания: :active и :focus
    • Расставлены tabindex
    • Добавлено transition для плавности и красивости
    • Иконки в виде svg-спрайта захешированного в base64 (захешировал только из-за того, чтобы не морочить себе голову с подключением по внешней ссылке в jsfiddle)
    • Меню сворачивается в мини-панель при ширине viewport <= 800px
    • Есть возможность введения многострочного текста в пункт меню (вторая менюшка: "тест длинного текста")
    • Есть возможность оставить ссылку без текста (третья менюшка: "Тест отсутствие текста". Не знаю кому такое может пригодиться, но тем не менее если, что то не сломается)

     

     

     

    Ответить

        1. Спасибо за ответ. У меня возник еще один вопрос. Вы задали .nav-itm:after {content: "\a0":} (пробел), для чего вы так сделали, очень интересно?

          Ответить

          1. Это чтобы не ломалось в мобильной версии, если (вдруг) не будет текста в ссылке

            Ответить

    1. Расстягивали так долго в связи с праздниками. Не предпологали, что сверстаете так быстро :)

      Ответить

    1. Сразу вспомнил вот эту тему — комменты к старому заданию.

      Всё правильно, на реальных проектах такая проверка необходима. Всегда надо забивать текста больше чем на макете или теребить дизайнера с вопросами, что будет если текста будет больше.

      Но у нас нет таких требований. Рубрика рассчитана на маленькие задания, 1-2 часа, чтобы не отнимать много времени у желающих поучаствовать и сколько времени будет уходить на проверку каждой работы.

      Ответить

        1. Ну тут я с вами не согласен, это меню явно не подразумевает таких возможностей.

          Ответить

          1. Что??? Не подразумевает таких возможностей??? Вы чего?? Не говорите больше это никому, я Вас прошу :)

            Адекватная реакция на переполнения подразумевается всегда и по-умолчанию, об этом не нужно говорить отдельно. Конечно если Вы хотите сделать свою работу качественно.

            Ответить

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

              В крайнем случая тут можно прописать white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  Например для того случая, если справа будет бадж с каким то числовым уведомлением, типа кол-ва сообщений.

              Ответить

              1. Так в том то и дело, что нужно понимать, что делать. Из макета нет ни единого намека, на то что текст в пунктах должен быть в одну строку, так же как того, что он может быть в несколько строк. Поскольку не указано ничего, по-умолчанию оно должно адекватно работать и с несколькими строками текста.

                Ответить

                1. Это лучше у заказчика уточнить, а то так можно нафантазировать и то, чтобы туда ролики с ютуба вставлялись и при наведении ещё разная музыка играла. Это тоже сразу всё делать?

                  Ответить

  17. Это было последнее задание, больше не будет?

    //Сделайте отправку сообщения по ctrl+enter, 5 строчек яваскрипта ж.

    Ответить

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

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

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