правильное выпадающее меню
Веб-дизайн 0 Комментариев

Как создавать правильное выпадающее меню?

Выпадающее меню давно стало одной из неотъемлемых частей навигации сайта, благодаря Javascript и CSS. При создании такого меню следует придерживаться некоторой стратегии.

В этой статье рассмотрим некоторые советы, как создавать эффективное выпадающее меню.

Маркеры для пунктов меню.

Использование маркеров для каждого пункта меню является хорошей идеей. Эти небольшие визуальные индикаторы помогут пользователю легче работать с навигацией сайта.

Такие маркеры могут быть разного вида: стрелки, точки или квадраты.

выпадающее меню

Отличным примером использование данного способа является дизайн Thredbird (threadbird.com).

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

выпадающее меню

Выделение пункта табуляцией.

Большинство выпадающих меню сайтов имеет достаточно пространства между пунктами. Но еще лучше выделять выбранный пункт с помощью табуляции. С помощью табуляции увеличивается пространство, на которое необходимо кликнуть, чтобы перейти по ссылке, что упрощает работу.

выпадающее меню

Webdesigner Depot (webdesignerdepot.com) использует отличное анимированное выпадающее меню в своем дизайне. Если выбрать любой пункт меню, появится табуляция, которая и выделит этот пункт, и сделает его выбор проще для пользователя.

выпадающее меню

Другой пример – сайт The Philadelphia Orchestra  (philorch.org). Отличный дизайн. Чистый, простой в использовании и чтении. Но, если вы наведете курсор на любой пункт меню, вы поймет, что перейти по нему, можно, нажав на сам текст. Там нет табуляции. Самое неприятное, что меню по размерам достаточно объемное, но пространство ссылок очень ограничено.

Использование ховера для главных пунктов меню.

Главная мысль – оставлять «подсвеченным» главным пункт меню, когда пользователь выбирает его подпункты. Это поможет всегда понимать с каким пунктом работаешь, и не потеряться, особенно, если главных пунктов достаточно много.

выпадающее меню

Сайт DePauw University (depauw.edu) использует контраст между белым и черным. Активный раздел меню выделен белым текстом на темном фоне.

выпадающее меню

На сайте Comedy Central’s (cc.com) вы заметите тот же эффект. Но вместо контрастных черного и белого цветов, они используют зелено-желтый на черном.

Заключение.

Качественное созданное выпадающее меню – это смесь формы и функциональности. Да, оно должно выглядеть красиво, но, кроме этого, оно также должно быть удобно в использовании.



Подпишитесь на обновления блога!

Будьте всегда в курсе новостей

Добавить комментарий