Html меню для сайта горизонтальное выпадающее меню: Горизонтальное выпадающее многоуровневое меню

Шаблон дизайна меню или меню в методиках разработки WAI-ARIA 1.1

Создание раскрывающегося меню навигации с помощью HTML5 и CSS3

Есть несколько отличных решений для раскрывающихся меню навигации, например, плагин jquery superfish.Многие из них используют много файлов и ресурсов для создания раскрывающихся списков, но иногда они вам не нужны. Я хочу показать вам, как создать собственное простое, но стильное раскрывающееся меню, используя новые теги HTML5 и великолепные стили CSS3.

Nav Menu (8185 загрузок)

Раскрывающийся список, который мы собираемся создать, скрывается и открывается при наведении курсора, используя только CSS. Используя новые функции переходов CSS3, мы будем анимировать состояния наведения и раскрывающиеся списки. Эти эффекты действуют точно так же, как эффекты javascript, которые вы использовали.Структура файлов проста. Вам понадобятся файлы index.html и style.css для хранения стилей css.

Вот предварительный просмотр того, что мы построим сегодня:

Начнем со структуры HTML. Это головная часть:

В основной части мы добавим html-код для навигационного меню. Каждый список ul внутри li представляет собой раскрывающееся меню. Я добавил «» к каждому родительскому li, чтобы показать иерархию. Код создает двойные кавычки под прямым углом к ​​элементу.

Теперь стилизуем навигацию.Начнем со стилей для основной навигации. При желании стили для #nav id можно удалить. Они просто в центре меню. Вы можете изменить их, чтобы они соответствовали вашему дизайну.

/ * Основная навигация * /
#nav {
положение: относительное;
ширина: 620 пикселей;
маржа: 0 авто;
маржа сверху: 50 пикселей;
отступ: 10 пикселей;
}

ul # navigation {
маржа: 0px авто;
положение: относительное;
плыть налево;
граница слева: сплошной 1px # c4dbe7;
граница справа: сплошной 1px # c4dbe7;
}

ul # navigation li {
дисплей: встроенный;
размер шрифта: 12 пикселей;
font-weight: жирный;
маржа: 0;
отступ: 0;
плыть налево;
положение: относительное;
верхняя граница: 1px solid # c4dbe7;
нижняя граница: 2px solid # c4dbe7;
}

ul # navigation li a {
отступ: 10px 25px;
цвет: # 616161;
тень текста: 1px 1px 0px #fff;
текстовое оформление: нет;
дисплей: встроенный блок;
граница справа: сплошной 1px #fff;
граница слева: сплошной цвет 1px # C2C2C2;
верхняя граница: 1px solid #fff;
фон: # f5f5f5;

-webkit-transition: цвет 0.2 с линейный, фон 0,2 с линейный;
-moz-transition: цвет 0.2с линейный, фон 0.2с линейный;
-o-переход: цветной 0,2 с линейный, фон 0,2 с линейный;
переход: цветной 0,2 с линейный, фон 0,2 с линейный;
}

ul # navigation li a: hover {
фон: # f8f8f8;
цвет: # 282828;
}

ul # navigation li a.first {
граница слева: 0 нет;
}

ul # navigation li a.last {
граница справа: 0 нет;
}

ul # navigation li: hover> a {
фон: #fff;
}

 

Обратите внимание, что ul # navigation li a имеет несколько стилей перехода.Они используются для создания приятного эффекта затухания при наведении курсора.

Теперь стилизуем выпадающие меню:

/ * Выпадающая навигация * /
ul # навигация li: hover> ul
{
/ * эти 2 стиля очень важны,
это те, которые заставляют раскрывающийся список появляться при наведении * /
видимость: видимая;
непрозрачность: 1;
}

ul # navigation ul, ul # navigation ul li ul {
стиль списка: нет;
    маржа: 0;
    отступ: 0;
/ * следующие 2 стиля очень важны,
это те, которые заставляют раскрывающийся список оставаться скрытым * /
    видимость: скрыта;
    непрозрачность: 0;
    позиция: абсолютная;
    z-индекс: 99999;
ширина: 180 пикселей;
фон: # f8f8f8;
box-shadow: 1px 1px 3px #ccc;
/ * css3 переходы для плавного наведения * /
-webkit-transition: непрозрачность 0.2 с линейный, видимость 0,2 с линейный;
-moz-transition: непрозрачность 0,2 с линейная, видимость 0,2 с линейная;
-o-переход: непрозрачность 0,2 с линейная, видимость 0,2 с линейная;
переход: непрозрачность 0,2 с линейная, видимость 0,2 с линейная;
}

ul # navigation ul {
    верх: 43px;
    слева: 1px;
}

ul # navigation ul li ul {
    верх: 0;
    слева: 181px; / * сильно связано с шириной: 180 пикселей; сверху */
}

ul # navigation ul li {
ясно: оба;
ширина: 100%;
граница: 0 нет;
нижняя граница: 1px solid # c9c9c9;
}

ul # navigation ul li a {
фон: нет;
отступ: 7px 15px;
цвет: # 616161;
тень текста: 1px 1px 0px #fff;
текстовое оформление: нет;
дисплей: встроенный блок;
граница: 0 нет;
плыть налево;
ясно: оба;
ширина: 150 пикселей;
}
 

Теперь меню стилизовано и процесс разработки завершен.Меню готово к использованию в ваших собственных проектах. При использовании CSS3, конечно, возникают проблемы с совместимостью IE с меню. Плавные эффекты, реализованные с помощью переходов CSS3, не работают в IE, но меню все еще работает и может быть надежной альтернативой меню javascript.

Благодарю вас за ваше время и за любые отзывы / вопросы, не стесняйтесь оставлять комментарии ниже!

[Всего: 25 Среднее: 4,4 / 5]

20 веб-сайтов с креативным дизайном раскрывающегося меню

Сегодня мы выбрали 20 веб-сайтов с креативным дизайном выпадающих меню и классным макетом.Вы не увидите, как выглядит дизайн выпадающего меню из всех предварительных просмотров, поэтому сразу переходите на веб-сайты и проверяйте дизайн целиком!

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

Если вы хотите научиться кодировать выпадающие меню самостоятельно, вы должны знать, что обычно это делается с помощью jQuery. Первым шагом является создание концепции в Photoshop, затем размещение основных элементов HTML, стилизация всего в CSS и, наконец, связывание всего этого с помощью нескольких строк jQuery для создания семантического, доступного и деградируемого дизайна меню.

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

Какие из них вам нравятся больше всего и почему? Дайте нам знать в разделе комментариев ниже.

П.С. Если вам нужно больше вдохновения для дизайна веб-навигации, ознакомьтесь с этими веб-дизайнами с всплывающими меню навигации. Дизайн веб-сайтов и с необычными меню навигации.

Бен Шерман

Панель меню

Ben Sherman обязательно вдохновит вас, особенно если вы предпочитаете минималистский дизайн. Это отличный пример простого и понятного раскрывающегося меню, которое можно интегрировать во все виды веб-проектов.

Американский орел

Раскрывающееся меню

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

Пивоварня Мэйфлауэр

Это красная строка раскрывающегося меню. У Mayflower Brewing простое меню с 6 категориями. Если вы наведете указатель мыши на каждую из них, то заметите, что подкатегории имеют более темный оттенок красного и похожий дизайн с тем же шрифтом, что и меню.

Хэмптон-Бэйс

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

Redbrickhealth

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

Carreras con Futuro

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

Callaway Golf

На веб-сайте

Gallaway Golf есть элегантное выпадающее меню. Он отличается простым и чистым дизайном и расположен рядом с логотипом. Отлично смотрится на чистом минималистичном дизайне.

Bon Look

Bon Look — еще один отличный пример веб-сайта с творческим раскрывающимся меню. Проверьте это и убедитесь, что в каждой подкатегории также есть изображение для предварительного просмотра, которое помогает покупателю найти именно то, что ему нужно.Это также отличный способ косвенно продвигать ваши продукты.

Converse

У

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

Вода Гернси

Это еще один творческий пример строки раскрывающегося меню. Тонкая горизонтальная полоса со значками для каждой категории и простое серое раскрывающееся меню с множеством подкатегорий.

Полевая школа Куалоа

Меню

Kualoa Field School также аккуратно оформлено в современном стиле. На этом веб-сайте в заголовке используется большое горизонтальное изображение с крупным шрифтом и логотипом, за которым следует строка раскрывающегося меню.

Пума

Puma — еще один пример хорошо организованного веб-сайта с крутой выпадающей строкой меню. Он выглядит как горизонтальная полоса, которая представляет каждую подкатегорию, такую ​​как избранные, новые поступления и т. Д., Но также добавляет что-то, что отличает этот пример от предыдущих, связанные изображения с различными коллекциями, распродажами и специальными предложениями.Это действительно интересный дизайн выпадающего меню, идеально подходящий для крупных веб-сайтов, работающих в модной нише.

Достижение тишины

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

Хельми-Берн

На веб-сайте

Helmy-Bern есть темное, но аккуратное раскрывающееся меню, которое может быть именно тем, что вы искали. Он имеет современный и функциональный дизайн, который легко интегрируется во всевозможные веб-проекты. Это меню очень хорошо разработано и спроектировано, и оно может стать отличной отправной точкой для других потрясающих дизайнов. Пусть это станет вашим источником вдохновения для создания темных раскрывающихся меню!

Санта-Крус

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

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

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

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

BH — это элегантное раскрывающееся меню, которое идеально подходит для винного магазина. Если вы работаете над подобным проектом, этот пример может вам пригодиться.

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

Это раскрывающееся меню было разработано для веб-сайта электронной торговли модной одежды. Меню корзины покупок — вот что делает этот пример интересным и заслуживающим внимания в будущих проектах.Вы всегда можете проверить товары, добавленные в корзину, не покидая страницы. У каждого товара есть собственная миниатюра, фото, название и цена.

Создание горизонтального раскрывающегося списка — HTML и CSS — Форумы SitePoint

Я разработал сайт на Laravel, и у меня есть категории, вызываемые из базы данных, и они проходят за нижнюю часть экрана, что заставляет пользователей прокручивать вниз, чтобы увидеть их все.

Если вы посмотрите на изображение, вы увидите результат, который я ищу.

Я просмотрел примеры и могу получить эффект, если добавлю ссылки вручную, но они вызываются из базы данных

HTML

  

        
        

        
  О нас  
        @foreach ($ section как $ section)
        

             {{$ section-> name}} 
            

                @foreach ($ section-> категории как $ category)
                    
  {{$ category-> name}}  
                @endforeach
            
        
        @endforeach
            
  Инженерные услуги  
           
  Свяжитесь с нами  
           
 
        
    
  

CSS

  .menu {
    float: right;
    обивка-верх: 1%;
}
.menu li {
    дисплей: встроенный блок;
}
.menu li: first-child {
    маржа слева: 0;
}
.menu li a {
    дисплей: блок;
    размер шрифта: 18 пикселей;
    отступ: 10 пикселей 10 пикселей;
    цвет: #FFF;
    -webkit-transition: легкость всего 0.3s;
    -moz-transition: легкость всего 0.3s;
    -о-переход: легкость всего 0,3 с;
    переход: вся легкость 0,3 с;
    font-weight: 300;
}
.menu li a: hover, .menu li.active a {
    фон: # 000000;
    цвет: # 4BCAFF;
}
#nav .current a {
    красный цвет;
}
.toggleMenu {
    дисплей: нет;
    отступ: 2px 0px 0px 0px;
}
.nav: раньше,
.nav: after {
    содержание: " ";
    дисплей: таблица;
}
.nav: after {
    ясно: оба;
}
.nav ul {
    стиль списка: нет;
}
  

примеров и передовых методов — Smashing Magazine

Краткое резюме ↬

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

Да, верно: раскрывающихся меню навигации могут быть удобными для пользователя . Буквально вчера Джейкоб Нильсен представил результаты своего недавнего исследования раскрывающихся меню, в ходе которого он обнаружил, что большие двумерные раскрывающиеся панели, которые группируют параметры навигации, помогают пользователям избежать прокрутки и могут точно объяснить выбор пользователя с эффективным использованием типографика, значки и всплывающие подсказки.

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

Огромная вертикальная выпадающая панель от Foodnetwork; обратите внимание на кнопку закрытия («x» в правом верхнем углу).

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

Больше после прыжка! Продолжить чтение ниже ↓

Встречайте Image Optimization , новое практическое руководство Адди Османи по оптимизации и размещению высококачественных изображений в Интернете. От форматов и сжатия до доставки и обслуживания: все в одной книге 528 страниц, страниц.

Перейти к содержанию ↬

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

Организовать страницы в виде раздела

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

Организация категорий в блоге

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

Показать товары на веб-сайте электронной коммерции

Вы увидите, что многие веб-сайты электронной коммерции используют раскрывающиеся меню для отображения продуктов или категорий продуктов. Выпадающее меню — это удобная функция, в которой все потребители могут легко понять, поэтому это идеальный способ упорядочить продукты.Веб-сайт Best Buy, показанный ниже, делает именно это.

Дисплейные модули

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

Лучшие Лрактики

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

Избегайте раскрывающегося списка с более чем двумя уровнями

В целом, это едва ли не худшая ошибка, которую можно сделать с раскрывающимися меню с точки зрения удобства использования. Если это сделано со структурой меню при наведении курсора, пользователь теряет фокус меню всякий раз, когда указатель мыши удаляется от него. Если это сделать с помощью интерактивной структуры, у нее будет слишком много кнопок, и она не будет работать должным образом.

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

В основном, есть два способа доступа к раскрывающемуся меню: либо наведением курсора, либо щелчком мыши, чтобы активировать меню. С точки зрения дизайна и удобства, всплывающее меню лучше.

С другой стороны, многие будут утверждать, что интерактивное меню лучше, потому что оно намного удобнее.Причина? Из-за способа построения всплывающего меню пользователь должен постоянно держать указатель над меню. Если пользователь теряет фокус всплывающего меню, оно закрывается. Поэтому лучше использовать раскрывающееся меню, которое активируется нажатием кнопки, а затем деактивируется, нажав кнопку еще раз.

В

CSS-Tricks есть руководство, показывающее, как создать макет, подобный тому, что есть на Digg. Это идеальное раскрывающееся меню с функцией активации / деактивации щелчком, так что вам, безусловно, стоит взглянуть на него.

Кроме того, в Google есть раскрывающееся меню, в котором используется трюк включения / выключения.

Задержка деактивации зависания

Избегание структуры наведения и множества уровней в раскрывающемся списке может быть слишком большим ограничением для навигации, которую вы пытаетесь создать. Однако есть решение, которое может повысить удобство использования многоуровневого меню и наведения курсора. В большинстве меню раскрывающийся список исчезает сразу после того, как пользователь отводит указатель мыши от меню. Решение — отсрочить его исчезновение.Или используйте функцию щелчка, которая требует, чтобы пользователи щелкали за пределами области меню, чтобы закрыть раскрывающийся список, аналогично тому, как работает лайтбокс.

Возьмем, к примеру, компанию Dell. Он использует многоуровневое раскрывающееся меню, но его все же можно использовать. Это единственное исключение из использования многоуровневых раскрывающихся меню.

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

Сама навигация фактически влияет на удобство использования раскрывающегося меню. Один из способов улучшить работу меню с раскрывающимся списком — добавить к параметрам меню эффект наведения. Это точно показывает, с какой кнопки в навигации открывается меню, что, безусловно, поможет пользователям.

Пример ниже, домашняя страница MediaTemple, показывает сильный эффект наведения курсора на параметры навигации, который помогает поддерживать раскрывающееся меню.

Бесшовные переходы

Раскрывающееся меню должно отображаться плавно и без прерываний.Меню должно загрузиться немедленно. Многие веб-сайты делают ошибку, делая меню настолько «тяжелым», что его загрузка занимает больше времени при наведении курсора.

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

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

Удалить подсказки

Конечно, при разработке раскрывающихся меню всегда есть небольшие детали, которые влияют на удобство использования. Одна важная практика, которую вы можете упустить, — это наличие всплывающих подсказок или их отсутствие.Вы всегда должны удалять всплывающие подсказки с кнопок с раскрывающимися меню. Причина? Всплывающие подсказки просто мешают, а иногда даже блокируют первый элемент списка в раскрывающемся меню.

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

Приемы укладки

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

Используйте чистый список

Важен не только стиль элемента, но и стиль содержимого. Чистая типографика и читаемый список важны. Используйте разумный интервал между элементами в списке и добавьте границу над и под элементами списка.

Пример ниже от Audi показывает очень хорошо организованный и читаемый список. Элементы списка разделены, и есть даже значки элементов списка.

С другой стороны, на сайте The Washington Post список в раскрывающемся меню очень скудный. Между элементами списка недостаточно интервалов, поэтому меню очень загромождено и его сложно использовать.

Эффекты наведения курсора на элементы списка

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

Полупрозрачный фон

Это не сработает для всех дизайнов, но вам следует подумать о полупрозрачном фоне для меню. Веб-сайт, показанный ниже, имеет прозрачность, поэтому пользователь все еще может видеть фон изображения. Ключ к полупрозрачным элементам — поддерживать сильный и читаемый контраст.

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

В приведенном ниже примере раскрывающееся меню выглядит так, как должно.

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

Navigant Consulting

Это меню плохо оформлено и не работает.

Panasonic

Хотя это меню хорошо оформлено, его сложно использовать из-за плохого эффекта наведения.

Toshiba

Меню Toshiba слишком маленькое, и в нем не соблюдаются хорошие стили.

LG

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

Крайслер

На странице Chrysler используется раскрывающееся меню с очень мелким текстом, что затрудняет чтение.

Вс

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

Творческие лаборатории

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

л.с.

Еще одно всплывающее меню, в котором отсутствуют полезные функции.

Alienware

Черное меню на черном фоне затрудняет использование этого раскрывающегося списка.

Здесь много раскрывающихся меню с удобными функциями и функциями стилизации.

Sony

Хорошо продуманное всплывающее меню с хорошим списком.

ActionEnvelope

Чистая вертикальная раскрывающаяся панель с большим количеством отступов; обратите внимание, как панель выглядит выше других элементов дизайна.Простое и красивое решение.

Хелми Берн

Красиво оформленное меню с плавным переходом.

Красный Кирпич

Это меню аккуратно оформлено и легко читается.

REI

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

Philips

Philips имеет большой и удобный раскрывающийся модуль.

Walmart

На сайте Walmart пользователь нажимает на область за пределами меню, чтобы закрыть ее.

Samsung

Меню Samsung удобно использовать из-за большого размера и стиля.

Epson

Epson показывает еще одно раскрывающееся меню, которое можно использовать.

Мини Купер

На этом веб-сайте используется раскрывающееся меню с отложенным закрытием.

Шлюз

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

Asus Global

Красивое меню с отложенным скрытием.

Intel

Очень чистое выпадающее меню.

Цель

Хорошо организованное меню с отложенным закрытием.

Garmin

Это раскрывающееся меню простое, но функциональное.

Logitech

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

Incase

Это меню очень простое, но служит своему назначению.

evelMerch

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

IBM

Здесь используется многоуровневый раскрывающийся список, но небольшая задержка упрощает его использование.

EA

Очень чистый и хорошо организованный выпадающий элемент.

Дополнительная литература по SmashingMag:

(al, il)

30 потрясающих примеров дизайна раскрывающихся меню

Последнее обновление 9 ноября 2021 г.

Чистая навигация очень важна для успешного веб-сайта. Мы с вами полностью понимаем, что большие информационные веб-сайты имеют теги по огромному количеству страниц / категорий.

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

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

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

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

Оттуда они могут осмотреться и сгенерировать для вас несколько просмотров страниц, пытаясь найти то, что им нужно / нужно.Самый страшный маршрут, который они могут выбрать после бомбардировки, — это покинуть ваш сайт.

Меню с наведением курсора и интерактивное меню очень часто используются в дизайне выпадающих меню. Чтобы сделать вещи менее запутанными, вы хотите, чтобы пользователи видели, что они собираются щелкнуть. С другой стороны, интерактивные меню идеально подходят для мобильных пользователей.

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

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

• Чистый и простой в использовании.
• Убрать всплывающие подсказки с кнопок с раскрывающимися меню.
• Чистая типографика и читаемый список важны.
• Посоветуйте достаточный интервал между элементами списка.
• Для удобства использования всех кнопок требуется эффект наведения.
• Используйте те же шрифты и аналогичный фон.
• Создайте удобное для просмотра меню.
• Постарайтесь, чтобы размер шрифта был таким же, как у навигации.
• Цвет раскрывающегося списка должен отличаться от фона.
• Маркеры и значки до некоторой степени хороши.

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

Представлено много разных стилей, что дает вам более широкую картину.Дизайн — это вызов, как и кодирование, все зависит от задействованных элементов; рисунки, значки, ряды и т. д.

Примечание: Все изображения связаны с указанным веб-сайтом.

1. ThreadBird

2. Безрезьбовой

3. Десина

4. LionBurger

5. WestCoastPoppin

6. Converse

7. Twitter

8.Facebook

9. BohemiaDesign

10. GetSatisfaction

11. Дриббл

12. Chipotle

13. Грань

14. Торговая площадка учебников

15. TheyMakeApps

16. MTV

17. Skype

18. Adidas

19. Vimeo

20.Центр рассказывания историй

21. Freitag

22. Shopify

23. Реклама зоопарка

24. Полароид

25. Lecoqsportif

26. Imaginamos

27. Piiq

28. Forgeideas

29. Ямьюна

30. Ch4mical

Теги: выпадающее меню удивительные дизайны меню навигационное меню amazon лучшее выпадающее меню jquery самые красивые меню лучший дизайн мегаменю 2018 лучшие примеры навигации по сайту лучшие примеры навигации по блогам примеры навигации по блогам html-код марки и модели выпадающего списка ccs3 выпадающее меню создать вертикальное выпадающее меню html css идеи дизайна креативного меню css пример каскадного меню css код для создания выпадающего меню css выпадающее css пример выпадающего меню css выпадающее меню навигация css для меню и подменю css горизонтальное меню с примерами подменю css hover menu dropdown css list menu выпадающее меню css примеры дизайна меню css примеры меню css панель навигации подменю css навигация выпадающее меню css вертикальное меню наведения настраиваемое выпадающее меню css различные типы выпадающих списков в html двойное выпадающее меню вниз одно меню выпадающее меню стрелка остальное amazon выпадающее меню раскрывающееся меню выпадающий список css дизайн выпадающее окно изображение выпадающее окно стили выпадающий список выпадающий список css drop dow n список css код выпадающий список дизайн выпадающий список примеры выпадающий список html выпадающий список в html и css выпадающий список значение выпадающее меню выпадающее меню код для blogger выпадающее меню дизайн выпадающее меню дизайн 2017 выпадающее меню эффект выпадающее раскрывающееся меню исходного кода генератора меню вниз выпадающее меню html css выпадающее меню в html и css выпадающее меню в html5 и css3 выпадающее меню боковая панель выпадающее меню выпадающее меню загрузки с использованием html и css выпадающее меню панели навигации выпадающее меню html выпадающее меню выпадающее меню html выпадающее меню выпадающее меню html5 выпадающее меню html выпадающее окно кнопка выпадающего списка css в выпадающем списке html дизайн css выпадающий дизайн выпадающий пример выпадающий список анимация наведения выпадающего изображения выпадающее изображение выпадающее изображение css выпадающее меню в html выпадающее меню css выпадающее меню выпадающее меню css выпадающее меню демонстрационное меню пример раскрывающегося меню раскрывающееся меню полной ширины при наведении курсора раскрывающееся меню css раскрывающееся меню HTML-кода раскрывающееся меню HTML-кода раскрывающееся меню шаблона HTML в HTML-раскрывающемся меню CSS вниз или вниз раскрывающийся стиль раскрывающийся список пользовательского интерфейса раскрывающийся список с наведением dropmenu css easy drop down menu css erxamples пример списка меню с ценой эксклюзивный дизайн меню необычная панель меню css цветочный магазин вдохновение для веб-дизайна всплывающая навигация бесплатно шаблоны меню навигации css бесплатно создатель выпадающего меню бесплатно выпадающее меню бесплатные шаблоны html css с раскрывающимся меню бесплатное меню html5 бесплатное адаптивное раскрывающееся меню бесплатные шаблоны веб-меню раскрывающееся меню во всю ширину дизайн веб-сайта во всю ширину вдохновение при наведении указателя мыши выпадающее меню при наведении курсора раскрывающееся меню как создать раскрывающееся меню в html как сделать создать выпадающее меню навигации в html как создать вертикальное выпадающее меню с html css как создать выпадающее меню в html и css как создать выпадающее меню с помощью html и css как создать выпадающее меню навигации в html5 как создать drop вниз меню в html как сделать выпадающую панель в html как сделать выпадающее меню в html как сделать выпадающее меню навигации в html как т o сделать выпадающее меню в html и css как сделать список меню как сделать подменю в html html-код для выпадающего меню html-код для выпадающего меню со ссылками html-код для строки меню с выпадающим подменю html-код для панели навигации с выпадающим списком html css панель меню с подменю выпадающий список html выпадающий список html выпадающее меню html выпадающее меню с изображениями пример кода html меню html примеры меню html выпадающая панель навигации html подменю горизонтальный html5 css3 примеры навигации html5 генератор выпадающего меню html5 выпадающее меню html5 hover menu html5 конструктор меню генератор меню html5 онлайн стили меню html5 многоуровневое меню html5 Вдохновение у него есть опция меню навигации по страницам javascript крутое меню javascript мега раскрывающееся меню javascript меню эффект наведения javascript раскрывающееся меню раскрывающееся меню jquery раскрывающийся список jquery с изображениями раскрывающееся меню jquery панель навигации примеры всплывающего меню jquery горизонтальное выпадающее меню jquery скачать бесплатно строку меню jquery с подменю меню jquery ho ver выпадающее большое выпадающее меню главное меню css главное меню дизайн пользовательского интерфейса дизайн мегаменю примеры мегаменю примеры мегаменю html образец мегаменю пример меню дизайн кнопки меню идеи создания меню создание меню онлайн-дизайн меню приложение меню drop html примеры меню иерархия меню дизайн макета меню идеи меню меню menarik раскрывающееся меню css меню подменю идеи заголовков меню css современное раскрывающееся меню css современное меню навигации современный простой дизайн меню современная веб-навигация больше действий раскрывающееся меню больше раскрывающееся меню примеры многоуровневой навигации раскрывающееся меню панели навигации раскрывающееся меню панели навигации перейти к 50 навигации панель навигации с раскрывающимся списком примеры навигации меню навигации html стили меню навигации вложенное раскрывающееся меню в HTML вложенное меню навигации красивое раскрывающееся меню дизайн онлайн-меню организация программного обеспечения всплывающее меню html всплывающее раскрывающееся меню популярные статьи для вдохновения раскрывающееся меню раскрывающееся меню адаптивный дизайн меню для раскрытия гибкого раскрывающегося меню с отзывчивым меню подменю с подменю отзывчивая панель навигации с раскрывающимся меню отзывчивый веб-сайт раскрывающееся меню адаптивные шаблоны веб-сайтов с раскрывающимся меню раскрывающееся меню свертывание веб-сайта ролловер пример веб-дизайна пример макета макета меню прокрутка вниз меню боковая навигация дизайн боковая навигация примеры простое раскрывающееся меню css бесплатно скачать простое всплывающее меню простое отзывчивое раскрывающееся меню примеры меню сайта исходный код для раскрывающегося меню в формате HTML сжатые онлайн-образцы стиль раскрывающееся меню подменю css под раскрывающееся меню подменю кода css подменю html подменю html5 в html исходный код вкладка раскрывающееся меню вкладка меню дизайн вдохновение раскрывающееся меню сверху вниз веб-шаблоны типов компьютеров типы меню навигации по веб-сайту веб-дизайн типы веб-дизайна типы меню веб-меню программное обеспечение для разработки веб-меню программное обеспечение веб-меню веб-меню веб-навигация пользовательский интерфейс дизайн веб-страницы меню веб-страницы раскрывающееся меню создатель веб-страницы раскрывающееся меню примеры меню веб-страницы создание меню веб-страницы примеры навигации веб-страницы раскрывающееся меню веб-сайта веб-сайт меню веб-сайт конструктор меню программное обеспечение веб-сайт дизайн меню примеры панели навигации веб-сайта создатель панели навигации веб-сайта примеры навигации веб-сайта шаблоны навигации бесплатно что такое список меню в html где находится раскрывающееся меню с раскрывающимися меню

Вы делаете эти распространенные ошибки навигации по веб-сайту?

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

Давайте рассмотрим некоторые распространенные ошибки навигации и посмотрим, чему мы можем научиться.

Ошибка №1: нестандартный стиль

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

Ожидается. Да, маркетинг — это дифференциация, но ваш стиль навигации не подходит для этого. Ваша цель — помочь людям найти ваш контент, а не показать им новый способ передвижения по сайту.

Ошибка № 2: Использование общих меток

Навигация должна быть описательной. Такие ярлыки, как «Продукты» или «Услуги», являются общими для всех предприятий и не служат для общения с посетителями.Как ни странно, «что мы делаем» не говорит о том, что вы делаете. Сэкономьте посетителям клики (и помогите снизить показатель отказов), сделав навигацию по вашему сайту наглядной.

Когда ваша навигация показывает ваши основные услуги или продукты, ваш сайт мгновенно общается .

Ваша навигация — это также огромная возможность указать свою релевантность для поисковых систем. Поскольку ваша аудитория не ищет «продукты» или «услуги», навигация с помощью этих ярлыков не поможет вам в рейтинге. Используйте ярлыки, которые включают популярные ключевые фразы в соответствии с Google Keyword Tool.

Совет для профессионалов! Навигация по сайту и его структура должны быть спланированы с учетом поисковых систем.

Ошибка № 3: выпадающие меню

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

Выпадающие меню раздражают , согласно исследованиям юзабилити от NN Group. Это потому, что, будучи посетителями, мы двигаем глазами намного быстрее, чем мышью.Когда мы перемещаем мышь к пункту меню, мы уже решили щелкнуть… и затем раскрывающийся список дает нам больше возможностей. Это момент трения в наших умах как посетителей.

Хуже того, раскрывающихся списков побуждают посетителей пропускать важные страницы верхнего уровня . Если на вашем сайте используются раскрывающиеся меню, вы можете увидеть проблему прямо здесь в своей статистике: низкие посещения на высоких страницах.

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

Ошибка №4: Слишком много элементов в вашей навигации

Вы уже видели это раньше: этот веб-сайт с сотнями ссылок на главной странице. Ужасный. Но даже восьми может быть слишком много. Это потому, что кратковременная память содержит только семь элементов . Это означает, что восемь — НАМНОГО больше семи.

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

Совет для профессионалов: этот трюк также работает для остальной части страницы, а не только для навигации. Каждый удаленный визуальный элемент делает все остальное более заметным. Вы можете много чего «громче», делая другие вещи «тише».

Краткая навигация также важна для SEO. Поскольку на вашу домашнюю страницу неизбежно больше ссылок, чем на внутренние страницы, она имеет наибольший «авторитет» в поисковых системах. SEO-специалисты называют этот авторитет «ссылочным соком» и, как жидкость, он перетекает с домашней страницы на более глубокие страницы через навигацию.

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

Используйте калькулятор Link Juice Calculator, чтобы подсчитать общее количество кликабельных элементов на вашей домашней странице. У Amazon их около 100, и их сайт больше вашего, верно?

Ошибка № 5: Неправильный заказ

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

Так что ставьте самые важные элементы в начало навигации, а наименее важные — в середину. «Контакт» должен быть последним элементом в списке, помещая его в крайний правый угол горизонтальной навигации верхнего уровня, стандартное расположение.

Напоминание о бонусе! Всегда ссылки, никогда не кнопки

Если вы упустили тенденции веб-дизайна за последние восемь лет и все еще испытываете искушение использовать графическую навигацию на основе кнопок (а не текстовые ссылки), вот пять веских причин не делать этого:

1. Кнопки не удобны для поиска, поскольку текст внутри них невидим для поисковых систем.
2. Кнопки обновлять сложнее, чем ссылки, поэтому для каждого обновления требуется Photoshop и новое изображение.
3. Кнопки загружаются медленнее, чем ссылки, что делает их особенно плохими для мобильных посетителей.
4. Кнопки менее доступны для слабовидящих.
5. Кнопки не нужны, даже если вы хотите использовать нестандартные шрифты, благодаря таким инструментам, как TypeKit.

5 примеров правильной навигации

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

Smith Brothers — наглядная и лаконичная навигация

Навигация на сайте Smith Brothers описательна и лаконична.Всего четыре пункта, начиная с первой и второй по значимости услуг и заканчивая контактной ссылкой.

Independent Publishers Group — описательная сгруппированная навигация

На веб-сайте IPG используется сильный контраст, чтобы различать первичную и вторичную навигацию в заголовке. Каждый из пяти или менее элементов, что упрощает сканирование. Общий термин «услуги» подразделяется на еще два описательных ярлыка: «услуги распространения» и «цифровые услуги».

Sweat Vac — описательная, лаконичная навигация с короткими ярлыками

Если вы не видели фото (или вы работаете в поисковой системе), навигация подскажет вам, чем занимается эта компания: головные уборы.Далее перечислены другие товары, такие как рубашки и снаряжение. В этом минималистском подходе каждый предмет — одно простое слово.

Купальники Kiefer — описательная, заказанная навигация

Сайт Kiefer имеет огромный каталог, но категории доступны в качестве основной навигации по всему сайту. Самые важные предметы для посетителей (купальники и купальные принадлежности) перечислены первыми. Важная вещь для Kiefer (распродажа) указана последней. Менее популярные категории находятся посередине.

ЕвроМебель — заказанная навигация с мега выпадающими меню

Большинство посетителей имеют в виду комнату.Меньшее количество посетителей ищут конкретный продукт или бренд. В навигационной системе EuroFurniture элементы перечислены соответственно. Мега выпадающие меню позволяют легко перейти в этот огромный каталог мебели.

Профессиональный совет: мега выпадающие списки для планшетов. Обратите внимание на маленький синий значок «x» в правом верхнем углу выпадающего списка сверху. Это кнопка закрытия. Без этого у пользователей планшетов не было бы возможности закрыть окно, поскольку у них нет курсора мыши, чтобы выйти из раскрывающегося списка.

Часто задаваемые вопросы об ошибках навигации по веб-сайту

Что такое плохая навигация по сайту?

Плохая навигация по веб-сайту — это веб-сайт, который плохо спроектирован, поэтому пользователи не могут интуитивно перемещаться по веб-сайту и получать доступ к различным частям и страницам сайта.

Влияет ли навигация по сайту на SEO?

Хотя навигация по веб-сайту не является прямым фактором SEO, логическая навигация по сайту помогает Google легче сканировать веб-сайты и легче понять, о чем веб-страницы.

Почему важна навигация по сайту?

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

Что является самой важной частью навигации по сайту?

Самая важная часть навигации по сайту — это простота использования.

Заключение по ошибкам навигации по сайту

Ошибки навигации по сайту дороги, и их можно избежать. Одна ошибка может повлиять на удобство использования обоих поисковых рейтингов. Сделайте этикетки информативными. Ограничьте количество элементов до семи. Поместите важные вещи в начало. Избегайте раскрывающихся меню. Следуйте рекомендациям по веб-навигации, описанным в этой статье. … Затем, наконец, проверьте разницу в своей аналитике.

Об авторе: Энди Крестодина — стратегический директор Orbit Media, чикагской компании, занимающейся веб-дизайном.Он также является автором Content Chemistry, Иллюстрированного руководства по контент-маркетингу, которое вы можете найти Энди в Google+ и Twitter.

Узнайте, как мое агентство может привлечь огромное количество трафика на ваш веб-сайт

• SEO — разблокируйте огромное количество SEO-трафика. Смотрите реальные результаты.
• Контент-маркетинг — наша команда создает эпический контент, которым будут делиться, получать ссылки и привлекать трафик.
  

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

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

  Комментарий *

  Имя *

  Email *

  Сайт