15 сентября 2011 в 18:21

10 примеров меню для web страниц перевод

image Эти способы не являются ноу-хау или чем-то в этом духе. Тем не менее, они могут помочь начинающим дизайнерам и web технологам в реализации задуманных ими идей. Каждый из предложенных вариантов можно обыграть по-своему.

Проверял лично и убедился в том, что исправно работает под следующими браузерами:

IE7+, Opera 10.5+, FF 3.6+, Chrome 12+ (linux), Chrome 13+ (windows), Safari 5+(win) исходя из личного опыта, предполагаю о том, что работать исправно будет во всех свежих версиях Safari, FireFox, Opera и Chrome.

С помощью CSS можно построить вот такие вот симпатичные варианты:



Перейти к Demo


Перейти к Demo


Перейти к Demo


Перейти к Demo


Перейти к Demo

А с помощью jQuery вот такие:

Перейти к Demo


Перейти к Demo


Перейти к Demo


Перейти к Demo


Перейти к Demo

UPD:
Спасибо за участие всем, особенно
ilyafd который любезно поделился ссылками:

Меню, тренды и примеры от smashingmagazine.com

Необычная навигация в дизайне сайта от womtec.ru

35+ примеров навигации от tripwiremagazine.com
Перевод: design by VanKarWai for ThemeForest
Аббасов Александр @vodka_ru
карма
61,8
рейтинг 0,0
Похожие публикации
Самое читаемое Дизайн

Комментарии (28)

  • 0
    nice!
    • –5
      Very Nice!
  • 0
    1, 4, 5 оч понравились
  • 0
    А я как раз ищу вдохновение. Очень вовремя, спасибо.
    • +14
      Это поможет найти его еще быстрее: 1, 2, 3.
      • +3
        Возможно, кому-то пригодится. Есть такой ресурс и вот такой.
    • +2
      В целом, коллега, если Вас заинтересовали эти вещи, то Вам будет небезынтересно вот это сообщество: dribbble.com

      По UI тут много материй для «инспайринга» :)
  • –1
    Красивые менюшки. Также предлагаю взглянуть на www.cssmenumaker.com, но меню у них, конечно, попроще
  • +18
    Обычные такие меню на CSS, о каких способах речь?
  • +1
    к сожалению такие менюшки красивые только на картинке, на реальном проекте практически не применимы так как очень специфичны.
  • 0
    Такие меню больше всего пригодны для персональных страничек веб-разработчиков, которые предлагают качественные услуги и имеют неплохое портфолио, эдакое витрина услуг. А так, меню Хабра вроде более «тематическая», ну вы понимаете о чем я.
  • 0
    Можно узнать что за шрифт используется в меню по этой ссылке? habrastorage.org/storage1/61ea1330/3a881a04/c4c3335b/57fca5fa.png
  • 0
    спасибо, пригодится!
  • 0
    Спасибо, но…

    Суть не есть в «понравилось».

    Суть есть в целях и эффективности в каждом отдельном проекте такой организации.

    Все примеры смотрятся приятно, НО исключительно как оторванные от общего дизайна, а, главное, проектной целесообразности.

    В целом — очень приятные цветовые сочетания, за что спасибо.

    Извините за этой комментарий, конечно — тут спор физиков и лириков.

    Спасибо.
  • +1
    Я, кстати, впервые по достоинству сумел оценить сайты сделанные в у Лебедева когда не мог придумать как сделать меню. Первым делом пошел на FWA посмотреть на лучшие мировые сайты, но оказалось что абсолютное большинство западных сайтов имеют скучнейшее меню на плашках. Везде одно и то же, только разные цвета, плашки в шапке сайта либо слева одна под другой. А лебедевцы каждый раз придумывают уникальное решение и никаких плашек, все делается работой со шрифтами и версткой.
  • +3
    Я одна ожидала откровения, что будет что-то кроме вертикальных, горизонтальных и всплывающих?
    • 0
      Не одна :) Но в комментариях поместили несколько ссылок на довольно интересные решения.
  • 0
    Хорошая подборка. И отдельное спасибо, что к меню не привязали ссылки на «левые ресурсы»!
  • 0
    К сожалению, примерно половиной из представленных примеров невозможно пользоваться, если в браузере выключить картинки…
    Иногда это бывает критично. Кто-то специально выключает картинки для супер-скорости серфинга, для уменьшения трафика, у кого-то страница могла не загрузиться из-за перегруженного сервера или плохого коннекта и так далее. В общем, правило хорошего тона.
  • 0
    Зато есть другая половина :)
  • 0
    Я бы с осторожностью относился к реализациям некоторых меню, красата, красотой, но слетать ничего не должно, про редактировании и добавлении пунктов.

    Пример бага — clip2net.com/s/1b7RV, подобное встретил и в других реализациях.

    • 0
      Любопытно. А что у вас за ОС, браузер и версия?
      • 0
        Причем тут ОС и браузер, когда там фон статичной картинкой стоит? 0.s3.envato.com/files/313241/menus/jQuery/jQuery-menu-03/images/back-navigation.png

        Вот пример проблемы с другим меню — clip2net.com/s/1b8bj, причем сделать _нормально_ вполне легко.
        • 0
          Я наконец вас понял. Отвечу метафорично: «зачем пытаться засунуть в упаковку из под утюга пылесос?» :) Если что-то по этим примерам или исполнению не подходит для конкретной реализации вашей задумки, привлекайте со стороны дизайнера и верстальщика для таких работ. Они подготовят аналогичный вариант, но «заточенный» под ваши задачи.
          • 0
            То есть что бы какому нибудь манагеру проектов добавить или поменять пункт в меню, надо искать верстальщика для правок, да еще и заплатить ему? Я предпочитаю делать сразу по человечески.
            • 0
              По-моему вы впадаете в крайности

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.