Дизайн выпадающего меню — блог компании «Веб-Эталон»
Выпадающее меню— это компактный способ показывает список вариантов в выпадающем блоке. Позволяет отразить несколько вариантов или категорий и подкатегорий. Оно должно легко открываться, закрываться и взаимодействовать с пользователем, а выпадающие пункты меню должны легко сканироваться.
Выпадающее меню на сайте nike.com/ru сделано максимально просто и понятно для пользователя
Несколько советов, которые помогут сделать выпадающее меню лучше:
Используйте маркеры для подменю
Ссылки, к которым прикреплены подменю, рекомендуется обозначать визуальными индикаторами, которые помогут пользователю не запутаться. Это могут быть стрелки, точки или другие заметные элементы.
На сайте emex.ru стрелками обозначены ссылки с подменю
Выделяйте пункт с открытым выпадающим списком
Выделение напоминает пользователю, что он выбрал.
Если не обозначать пункт меню, из которого открылось подменю, пользователю перед совершением действия нужно вспомнить, что он выбрал, это отвлекает внимание
На сайте mvideo.ru визуально обозначенный пункт меню с открытым подменю облегчает навигацию для пользователя.
Обеспечьте достаточное расстояние
Оптимальное расстояние между пунктами в выпадающем меню обеспечивает для пользователя большее удобство при навигации. Важно, чтобы кликабельным было не только слово, но и некоторое пустое расстояние от него, чтобы не приходилось целиться.
В проекте mon voyage выпадающее меню имеет оптимальное расстояние между пунктами и кликабельно не только слово, но и расстояние до разделителей
Подбирайте подходящий размер для выпадающего меню
- Не делайте выпадающее меню слишком длинным. Чем меньше пунктов, тем проще ориентироваться
- Избегайте меню, которые содержат больше двух подуровней
- Не делайте слишком узкие выпадающие меню, по ним будет сложно перемещать курсор
На сайте renault.ru оптимальный размер выпадающего меню. А подменю, благодаря иллюстрациям, становится еще удобнее для пользователя
Не делайте выпадающий список слишком длинным
Создатели интернет-магазина roxy-russia.ru сделали выбор в пользу горизонтального меню
Качественное выпадающее меню должно быть не только красиво, но и хорошо функционировать, позволяя пользователю без затруднений находить нужную информацию.
Вертикальное выпадающее меню для блога|Простые советы.
<style type=»text/css»> <!—
/* CSS Document */
ul#menu-v,
ul#menu-v li,
ul#menu-v ul {
margin: 0;
border: 0 none;
padding: 0;
width: 260px;
list-style: none;
}
ul#menu-v:after {
clear: both;
display: block;
font: 1px/0px serif;
content: «.»;
height: 0;
visibility: hidden;
}
ul#menu-v li {
float: left;
display: block !important;
display: inline;
position: relative;
border:#ddcca2 1px solid;
}
ul#menu-v li ul li {
border:none;
border-bottom:#991500 2px solid;
}
/* Root Menu */
ul#menu-v a {
padding: 0 6px;
display: block;
background: #ebe0c7;/цвет коробки/
color: #991500;/цвет названия рубрик/
font: bold 12px/28px Verdana, Arial;
text-decoration: none;
height: auto !important;
height: 1%;
}
ul#menu-v a:hover,
ul#menu-v li:hover a,
ul#menu-v
li.
iehover a {
background: #991500;
color: #ebe0c7;
}
/* 2nd Menu */
ul#menu-v li:hover li a,
ul#menu-v li.iehover li a {
background: #ebe0c7;
color: #991500;
border:#ddcca2 1px solid;
}
ul#menu-v li:hover li a:hover,
ul#menu-v li:hover li:hover a,
ul#menu-v li.iehover li a:hover,
ul#menu-v li.iehover li.iehover a {
background: #991500;
color: #ebe0c7;
border:#ebe0c7 1px solid;
}
ul#menu-v ul,
ul#menu-v ul ul,
ul#menu-v ul ul ul {
display: none;
position: absolute;
top: 0;
left: 240px;
}
ul#menu-v li:hover ul ul,
ul#menu-v li:hover ul ul ul,
ul#menu-v li.iehover ul ul,
ul#menu-v li.iehover ul ul ul {
display: none;
}
ul#menu-v li:hover ul,
ul#menu-v ul li:hover ul,
ul#menu-v ul ul li:hover ul,
ul#menu-v li.iehover ul,
ul#menu-v ul li.iehover ul,
ul#menu-v ul ul
li.
iehover ul {
display: block;
}
—> </style>
<ul id=»menu-v»>
<li><a href=»#»>Вертикальное</a>
<ul>
<li><a href=»#»>Ссылка 1</a></li>
<li><a href=»#»>Ссылка 2</a></li>
</ul>
</li>
<li><a href=»#»>CSS</a>
<ul>
<li><a href=»#»>Ссылка 1</a></li>
<li><a href=»#»>Ссылка 2</a></li>
<li><a href=»#»>Ссылка 3</a></li>
<li><a href=»#»>Ссылка 4</a></li>
<li><a href=»#»>Ссылка 5</a></li>
</ul>
</li>
<li><a href=»#»>Меню</a>
<ul>
<li><a href=»#»>Ссылка 1</a></li>
<li><a href=»#»>Ссылка 2</a></li>
</ul>
</li>
</ul>
Значения справа или слева будет выпадать меню (отмечено
желтым) меняете по своему усмотрению.
Так же подбираете цвет и прочее согласно
оформлению вашего блога.Мне нравится это меню, потому что достаточно легко поставить на свой блог и еще проще настроить под свой дизайн.
Это фишку я подсмотрел у «Блоггера-новичка»
Посмотрите как можно сделать
в Blogger: как сделать
Использование выпадающего меню — очень удобный способ навигации. К сожалению, в большинстве блогов по адресу
В этой статье я расскажу, как добавить многоуровневую систему навигации в свой блог на Blogger. Знание HTML, CSS или JavaScript не требуется.
Начнем
В качестве отправной точки я создал простой блог по адресу https://dropdownmenugenerator.blogspot.com/. Блог состоит из нескольких страниц. Теперь мы шаг за шагом будем добавлять меню в наш блог.
Шаг №1: Создание меню
Для создания меню воспользуемся онлайн-инструментом — Генератор выпадающего меню. Основное преимущество Генератора в том, что он все делает автоматически, быстро, легко и выдает профессиональный инструмент навигации по сайту, не требующий дополнительной настройки. Подробнее об онлайн-приложении читайте в посте: Необычный редактор — Генератор выпадающих меню.
- Настройка структуры
На вкладке «Структура» мы определяем элементы: ссылки, заголовки, разделители и изображения. Редактор структуры основан на функции перетаскивания. Это позволяет вам легко создавать структуру меню, отображающую несколько уровней иерархии. Для каждого элемента ссылки мы устанавливаем URL-адрес страницы, который является URL-адресом, который мы копируем с нашего сайта Blogger и вставляем в поле «Ссылка» в генераторе.
Чтобы сделать наше меню более удобным для пользователя, мы добавили значок к каждому элементу ссылки.
Приложение включает общие значки (Главная, Справка, Электронная почта и т. д.), значки для социальных сетей (Facebook, Twitter и т. д.), универсальные значки (стрелки, точки и т. д.) и другие. - Настройка внешнего вида
Внешний вид меню определяется шаблоном. Так как наш блог имеет закругленные углы, мы выбираем шаблон #R012 из коллекции. Далее настраиваем цвета и шрифт в соответствии со стилем нашего блога.
- Установка дополнительных опций и получение Embed Code
На вкладке «Параметры» мы устанавливаем ширину на 100%, выравнивание по центру и прозрачность. Наше меню готово.
Генератор предоставляет неограниченный хостинг для ваших меню. Все, что вам нужно, это код для вставки, чтобы отображать меню прямо на веб-страницах.
Любые изменения, внесенные в меню в Генераторе, будут немедленно отражены в меню на вашем сайте.
Шаг 2. Добавление меню в блог
Теперь мы готовы встроить наше меню в блог. Открываем наш дашборд в Blogger и выбираем «Макет». В разделе «Заголовок» мы добавляем новый гаджет «HTML/JavaScript».
В поле содержимого гаджета вставляем наш Embed Code:
<дел>
Вот и все! Теперь мы можем открыть наш блог в браузере, чтобы увидеть выпадающее меню на страницах.
Важно отметить, что один экземпляр меню используется для нескольких страниц вашего блога. Любые изменения, внесенные в Генератор, будут немедленно отражены в меню на страницах вашего блога.
Основные характеристики меню, созданного в генераторе меню
- Кроссбраузерная поддержка (IE 7.
0+, Firefox 0.8+, Chrome 6.0+, Safari 1.2+, Opera 7.5+ и т. д.) - Несколько уровней иерархии
- Горизонтальная или вертикальная ориентация
- Многоязычная поддержка
- Красивый эффект перехода
- Реальные тени PNG
- Полупрозрачный
- Поддержка всплывающих подсказок
- Подменю отображаются поверх Flash-роликов и полей выбора HTML
- Код слишком мал
- Нет сторонних библиотек (например, jQuery)
- Разрешено несколько меню на одной странице
Заключение
Надеюсь, эта короткая статья поможет любому блоггеру создать профессиональное многоуровневое выпадающее меню для своего блога. Пожалуйста, не стесняйтесь задавать вопросы!
См. также
Как добавить выпадающее меню, адаптированное для мобильных устройств, в Blogger
Ссылки
- Blogger: https://www.blogger.com
- Видеоруководство: добавление выпадающего меню в Blogger
- Live Demo (блог с меню): https://dropdownmenugenerator.
blogspot.com/ - Генератор меню: https://www.dropdownmenugenerator.com
- Форма вопроса: https://www.dropdownmenugenerator.com/contactus.aspx
Добавление раскрывающегося меню на страницы Blogger | Малый бизнес
Джимми Бойд
Владельцы веб-сайтов используют раскрывающиеся меню для создания удобной навигации по сайту. Меню направляет посетителей на дополнительные страницы сайта, что увеличивает число просмотров страниц. Добавление раскрывающегося меню в свой блог на веб-сайте Google Blogger привлекает внимание к наиболее важным страницам вашего блога. Блогерам часто не хватает технических навыков, необходимых для создания выпадающего меню с нуля и добавления его в блог. Благодаря сценарию меню и функциям редактирования сервиса любой блоггер может включить этот важный инструмент навигации в свой веб-сайт.
Вариант меню для всего сайта
Выберите сценарий для раскрывающегося меню на стороннем веб-сайте.
Несколько сайтов предлагают бесплатный скрипт или программу для создания скрипта выпадающего меню. Среди них Lab.Artlung, Web-Source и Ricocheting.com.Скопируйте образец сценария при использовании сценария с таких сайтов, как Lab.Artlung или Web-Source. Просмотрите сценарий, чтобы найти части текста и ссылок для каждого пункта меню в сценарии. Замените эти части сценария собственным текстом и информацией о ссылках. Например, вы можете ввести «Домашняя страница» в качестве текста и ввести адрес своей домашней страницы в качестве ссылки. Начинайте каждую ссылку с «http://www». Когда посетители используют сценарий, они будут перенаправлены на веб-страницу, указанную вами для каждого параметра текста.
Введите информацию о своей теме и ссылку в соответствующих областях на веб-сайте при использовании Ricocheting или аналогичного генератора меню. Скопируйте исходный код, сгенерированный сайтом. Вам не нужно менять текст и ссылки в этом случае, потому что генератор уже сделал это за вас.
Войдите в свою учетную запись Blogger. Выберите функцию «Макет». В старых версиях Blogger выберите ссылку «Дизайн» при входе в свою учетную запись. Нажмите «Добавить гаджет» и выберите «HTML/JavaScript». В обновленной версии вы увидите стрелку вниз рядом с «Просмотреть блог». Нажмите на стрелку и выберите ссылку «Макет». Добавьте код раскрывающегося меню в раздел «Макет», если вы хотите включить его на все страницы своего блога. Выберите «Добавить гаджет». Выберите вариант «HTML/JavaScript».
Вставьте код раскрывающегося меню в поле редактирования. Сохрани это. Теперь меню появится на всех страницах вашего блога. Вам не нужно добавлять скрипт при создании новых сообщений.
Меню для отдельных сообщений
Войдите в свою учетную запись Blogger. Нажмите «Сообщения», чтобы найти сообщение, в которое вы хотите включить меню. Нажмите кнопку «Редактировать» для нужного поста.
Выберите в редакторе опцию «HTML».
