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

    ты так  быстро настрочил верстку.
    Когда это ты успел ?

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

      я поражён от скорости, ещё сутки не прошли уже 3 варианта, а на это задание выделили почти 2 недели)

      1. alexriz

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

  2. alexriz

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

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

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

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

     

     

     

    1. Денис

      Скажите пожалуйста, с помощью какой программы вы сделали svg-иконки?

      1. alexriz

        Adobe Illustrator, потом еще руками подчистил код от мусора

        1. Денис

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

          1. alexriz

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

  3. Merty
    1. Merty

      Забыл убрать бордер у последней ссылки, вот без него http://jsfiddle.net/wWDRq/3/embedded/result/

      1. Merty

        Как говорится, поспешишь людей насмешишь.. :) вот наверное итоговый вариант:

        http://jsfiddle.net/wWDRq/4/embedded/result/

        1. alexriz

          цвет фона пункта меню менять на ховере забыли.

           

          1. Merty

            Наверное упустил из виду в исходниках, посмотрю, спасибо ;)

  4. Надя Дегтярева
  5. Natalya

    Решение. Меню сворачивается при ширине меньше 900px.

  6. amelice
    1. amelice

      небольшая поправка  — http://learn.javascript.ru/play/1nDFtb

  7. Potato

    Если ширина экрана меньше 400 пикселей, тогда включается мобильная версия.

    http://cssdeck.com/labs/full/1cacogk5
     

  8. Петр

    http://codepen.io/anon/full/fhlLC

    попробавал обойтись без медиа запросов. Не получилось сделать тень для блока и центрирование в минимизированной версии.

  9. NoMoreNY
    1. int

      Должно зависеть от ширины экрана

      1. NoMoreNY
  10. usf

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

     

    ЗЫ, пипец, дня 3 не могу коммент оставитьб в спам все улетает( который раз уже такое

  11. VanBalance
  12. alexriz

    2 недели это конечно жутко долго :)

    1. Павел Тринько

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

  13. akaSpy

    Это говорите у Blowup все отлично? Поощрять непродуманную верстку не стоит. Нужно все таки учитывать, что почти все элементы динамические.

    Вот гляньте: http://joxi.ru/_0SHUdg5CbBZHIB_Aug

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

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

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

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

  14. Павел
    1. akaSpy

      Идеальное решение!

      1. alexriz

        ну не идеальное, скажем так

        И такое почти у всех :(

        1. Merty

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

        2. Merty

          Хотя, если делать через padding, то можно и предусмотреть =)

          1. alexriz

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

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

            1. Merty

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

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

              1. alexriz

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

                1. int

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

  15. int

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

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

    1. Павел Тринько

      Нет, не последнее задание. Ещё будут, скоро! :)

  16. Дмитрий Желудев

    Для меня  курс z-click.ru/csspractik.htm стал открытием  — CSS практика.

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

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

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

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