Выпадающее меню на чистом css / html
Содержание:
- Влияние меню сайта на продвижение
- Вертикальное меню
- Команды в AutoCAD
- Раздвижное меню-аккордеон
- Формы
- Максимальное масштабирование размера¶
- Что собой представляет меню сайта
- Горизонтальное меню
- Горизонтальное выпадающее меню на всю ширину
- Просмотр сеансов посещений ВК
- Блочное горизонтальное меню (float)
- Горизонтальное выпадающее меню с разделителями
- Простое горизонтальное меню
- Доработка горизонтального меню
- Меню для сайта на CSS в онлайн сервисе
- 1 комментарий для “VBA Excel. Автоматическая запись текущей даты и времени”
- Создадим-ка горизонтальную навигационную модель
- Navbar — Открытие dropdown меню при наведении
- Основные виды меню сайта + примеры
- Разметка HTML
- Что это такое
Влияние меню сайта на продвижение
Главная цель, которую стремятся достичь собственники ресурсов, – место в топе поисковой выдачи. Поможет в решении этой задачи соблюдение следующих условий:
- Удобная навигация и грамотная перелинковка. Внутренняя оптимизация в итоге будет оценена по достоинству и пользователями, и поисковыми роботами. Перелинковка помогает при ориентации посетителей в контенте ресурса, позволяет легко переходить по ссылкам в нужные разделы. Правило трех кликов должно стать основным при навигации по сайту.
- Интересные названия разделов способствуют увеличению времени, которое посетитель проведет на страницах проекта. Для поисковиков это положительный критерий при оценке поведенческих факторов.
- Грамотная разработка сайта подразумевает создание семантического ядра. Для этого предварительно собирается и анализируется информация о тематических поисковых фразах. Названия разделов должны представлять собой самые частотные из пользовательских запросов. Это значит, что заголовки меню нужно разрабатывать в тесном контакте с SEO-специалистом.
- Графические элементы необходимо снабдить alt и title, чтобы поисковики учитывали их при индексации ресурса.
Вертикальное меню
Первым шагом создания вертикального меню будет создание маркированного списка. Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором «navbar». Каждый элемент <li> нашего списка будет содержать по одной ссылке:
<ul id="navbar"> <li><a href="#">Главная</a></li> <li><a href="#">Новости</a></li> <li><a href="#">Контакты</a></li> <li><a href="#">О нас</a></li> </ul>
Наша следующая задача заключается в сбросе стилей списка, установленных по умолчанию. Нам нужно убрать внешние и внутренние отступы у самого списка и маркеры у пунктов списка. Затем зададим нужную ширину:
#navbar {
margin: 0;
padding: 0;
list-style-type: none;
width: 100px;
}
Теперь пришло время стилизовать сами ссылки. Мы добавим к ним фоновый цвет, изменим параметры текста: цвет, размер и насыщенность шрифта, уберем подчеркивание, добавим небольшие отступы и переопределим отображение элемента <a> со строчного на блочный. Дополнительно были добавлены левая и нижняя рамки к пунктам списка.
#navbar a {
background-color: #949494;
color: #fff;
padding: 5px;
text-decoration: none;
font-weight: bold;
border-left: 5px solid #33ADFF;
display: block;
}
#navbar li {
border-left: 10px solid #666;
border-bottom: 1px solid #666;
}
Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
#navbar {
margin: 0;
padding: 0;
list-style-type: none;
width: 100px;
}
#navbar li {
border-left: 10px solid #666;
border-bottom: 1px solid #666;
}
#navbar a {
background-color: #949494;
color: #fff;
padding: 5px;
text-decoration: none;
font-weight: bold;
border-left: 5px solid #33ADFF;
display: block;
}
</style>
</head>
<body>
<ul id="navbar">
<li><a href="#">Главная</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">О нас</a></li>
</ul>
</body>
</html>
Попробовать »
При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса :hover
Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:
#navbar a:hover {
background-color: #666;
border-left: 5px solid #3333FF;
}
Попробовать »
Команды в AutoCAD
Раздвижное меню-аккордеон
×
Несколько слов вступления
В данном примере рассмотрена технология создания аккордеон-меню, раскрывающегося по .
Я бы не рекомендовал без необходимости использовать такое меню на сайте. Элементы страницы не должны жить своей жизнью (хлопающие как простыни на ветру подменю, раскрывающиеся аккордеоны, если его не аккуратно задеть мышкой …
Аккордеон должен раскрываться по , а это уже JS. А рассмотрение javascript выходит за рамки раздела HTML/CSS…
Попробуем создать аккордеон-меню из простого выпадающего меню, внеся минимальные изменения в код разметки и стили.
Добавлен класс к классу родительского контейнера, а класс заменен на . Можно было бы не заменять, а просто переопределить, но это усложнит пример для понимания.
<nav class="menu_color">
<ul class="my_menu my_accordion">
<li><a href="#/">пункт 1<a><li>
<li class="parent"><a href="#/">родительский пункт 2<a>
<ul class="sub-accordion-menu>
<li><a href="#/">дочерний подпункт 1<a><li>
<li><a href="#/">дочерний подпункт 2<a><li>
<ul>
<li>
<li><a href="#/">пункт 3<a><li>
<li class="active"><a href="#/">пункт 4<a><li>
<li><a href="#/">пункт 5<a><li>
<ul>
<nav>
Стили для выпадающего меню были привязаны к классу .sub-menu, который мы заменили на . Чтобы не дублировать стилевые правила — группируем классы.
Группирование позволяет установить группу свойств сразу для нескольких селекторов и классов, что делает код более читабельным.
Изменения кода — минимальные! Мы просто через запятую дописали новые классы к предыдущему примеру:
/* === Группировка классов === */
/* Убираем маркеры и отступы */
.my_menu, .sub-menu,
.sub-accordion-menu {
list-stylenone;
margin;
padding;
}
/* Подсветка пункта при наведении */
.menu_color > ul > li > a:hover,
.my_menu .parent .sub-accordion-menu li a:hover {
color #bbb;
background rgba(, , , 0.1);
}
/* Разделитель пунктов меню */
.menu_color > ul > li + li > a,
.menu_color .sub-accordion-menu li > a {
border-top 1px solid rgba(255, 255, 255, 0.1);
box-shadow -1px rgba(, , , 0.15);
}
После этого добавим стили, для закрытого и раскрытого аккордеона:
/* === Закрытый ===*/
.sub-accordion-menu {
display block;
position static;
width auto;
overflow hidden;
border none;
margin !important;
max-height ; /* Скрываем выпадающее подменю */
transition max-height 1s; /* Задержка раскрытия */
}
/* === Открытый ===*/
.sub-accordion-menu {
max-height 1000px;
}
.sub-accordion-menu > li > a {
padding-left 40px; /* Добавляем отступ для подпунктов */
}
Примечание.Почему было использовано свойство , а не ? Потому что мы не знаем высоту раскрывающегося подменю, а при использовании значения — анимация не срабатывает.
Формы
Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соцсетьФорма регистрацииФорма с иконкамиНовостная рассылкаСложенная формаАдаптивная формаPopup формаВстроенная формаОчистить поле вводаКопировать текст в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в навбареФорма входа в навбареПользовательский Checkbox/RadioВыбор пользователяКнопка — переключательВыбрать CheckboxОбнаружение Caps LockТриггер-кнопка нв вводеПроверка пароляПереключить видимость пароляМногошаговая формаАвтозаполнение
Максимальное масштабирование размера¶
Когда свойство background-size установлено в значение «contain», фоновое изображение будет масштабировано таким образом, чтобы оно заполняло область контента. Но пропорции изображения (отношение высоты и ширины) будут сохранены.
Значение «contain» указывает, что фоновое изображение будет масштабировано независимо от размера контейнера таким образом, что каждая сторона была максимально больше, не переходя длину контейнера с соответствующей стороны.
Другими словами, изображение будет увеличиваться или уменьшаться пропорционально, но размеры контейнера не могут быть больше ширины и высоты.
Что собой представляет меню сайта
Основная роль меню главной страницы сайта – навигационная, оно упрощает и ускоряет ориентацию пользователя в контенте, помогает мгновенно найти необходимую информацию, не тратя время на изучение страниц, которые в данный момент ему не нужны.
Чтобы создать красивое меню для сайта, веб-мастера прибегают к помощи CSS. Можно воспользоваться готовыми шаблонами, скачав их со специализированных ресурсов. Генерирование скрипта на базе пользовательских параметров осуществляется в соответствующих онлайн-сервисах.
Правильное меню сайта должно отвечать нескольким важным требованиям:
Горизонтальное меню
В предыдущем примере мы рассмотрели вертикальную панель навигации, которую чаще всего можно встретить на сайтах слева или справа от области с основным контентом. Однако меню с навигационными ссылками также часто располагается и по горизонтали в верхней части веб-страницы.
Горизонтальное меню можно создать путем стилизации обычного списка. Свойству display для элементов <li> нужно присвоить значение inline, чтобы пункты списка располагались друг за другом.
Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:
<ul id="navbar"> <li><a href="#">Главная</a></li> <li><a href="#">Новости</a></li> <li><a href="#">Контакты</a></li> <li><a href="#">О нас</a></li> </ul>
Напишем для нашего списка пару правил, сбрасывающих стиль используемый для списков по умолчанию, и переопределим пункты списка с блочных на строчные:
#navbar {
margin: 0;
padding: 0;
list-style-type: none;
}
#navbar li { display: inline; }
Попробовать »
Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:
#navbar {
margin: 0;
padding: 0;
list-style-type: none;
border: 2px solid #0066FF;
border-radius: 20px 5px;
width: 550px;
text-align: center;
background-color: #33ADFF;
}
#navbar a {
color: #fff;
padding: 5px 10px;
text-decoration: none;
font-weight: bold;
display: inline-block;
width: 100px;
}
#navbar a:hover {
border-radius: 20px 5px;
background-color: #0066FF;
}
Попробовать »
Горизонтальное выпадающее меню на всю ширину
Большинство из вас могут меня упрекнуть, мол такие менюшки, как я показал выше, это привет из прошлого и от части вы правы, хотя я встречал свежие верстки с такими менюшками.
Далее я напишу стили для создания выпадающего меню на всю ширину рабочей области. Назвать такое меню адаптивным будет сложно, но динамическим оно будет 100%.
Надеюсь вы скачали пример выше. Html у нас остается прежним, а вот CSS мы поменяем полностью. Вы можете просто взять от сюда код CSS и вставить в скачанный пример, или же посмотреть в режиме демо как он работает.
Я добавил в хтмл випадашку для последнего пункта меню, чтобы показать как она будет работать и прижиматься к правому краю.
Также этот пример отличается от первого тем, что выпадающее меню, сама выпадашка, тянется в зависимости от ширины всех пунктов меню.
Для очень длинных пунктов меню, такой вариант может быть не сильно удобным, так как они будут вылазить за пределы. Чтобы отключить это свойство, достаточно найти свойство «white-space:nowrap;» у селектора #menu1 ul li ul, и удалить его.
Ниже вы можете посмотреть демо или скачать исходники горизонтального выпадающего меню:
Скачать пример
Без разделителей это меню смотрится так себе. Разделители можно добавить в хтмл руками, но если у вас CMS, например WordPress, – то руками там добавлять не сильно удобно.
Далее я покажу вам как можно добавить разделители в меню.
Просмотр сеансов посещений ВК
Изначально довольно важно сделать оговорку на то, что процесс просмотра хроники переходов по ВКонтакте напрямую связан с базовым функционалом используемого интернет-обозревателя. По ходу статьи мы затронем исключительно популярные браузеры, так как именно ими пользуется подавляющее большинство людей
Обратите внимание на то, что в рамках статьи мы коснемся также еще одной темы связанной, со специальным функционалом «Истории ВКонтакте»
Просмотр посещений VK в Google Chrome
Интернет-обозреватель Google Chrome является самым популярным браузером на сегодняшний день, поэтому чаще всего у пользователей возникают проблемы именно с ним. Более того, на движке Chromium были разработаны и многие другие аналогичные программы, имеющие схожий интерфейс.
- Откройте веб-браузер и кликните по иконке с тремя вертикально расположенными точками в правой части панели инструментов.
Среди представленного списка разделов наведите курсор мыши на строчку с пунктом «История».
В качестве следующего действия из появившегося списка выберите одноименный раздел.
Оказавшись на странице со списком посещений, найдите строчку «Искать в истории».
В указанное текстовое поле введите полный URL-адрес сайта соц. сети ВКонтакте.
Теперь вместо обычной хроники посещений в порядке возрастания, будут отображаться исключительно зафиксированные переходы в рамках сайта ВК.
Вдобавок к сказанному, обратите внимание, что если вы авторизованы через аккаунты Гугл и у вас активирована синхронизация, то копия хроники посещений будет автоматически сохраняться на серверах. При этом не забывайте о том, что данные в разделе могут быть удалены
Просмотр посещений VK в Opera
В случае интернет-обозревателя Opera процесс просмотра хроники активности происходит несколько иным методом, но по тому же принципу, что и в Хроме. Кроме того, данные в Опере также без проблем синхронизируются с серверами.
- Запустите веб-браузер Опера и в левом верхнем углу кликните по кнопке «Меню».
Из списка разделов выберите пункт «История», кликнув по нему.
Среди элементов браузера найдите поисковое поле.
Заполните графу, используя в качестве содержимого полную версию адреса сайта ВКонтакте.
Для выхода из режима поиска материала по истории воспользуйтесь кнопкой «Выйти из поиска».
После розыска по ключевому слову вы сможете наблюдать список всех переходов по сайту VK.
На этом можно завершить процесс просмотра последних действий на сайте ВКонтакте с использованием браузера Опера.
Просмотр посещений VK в Яндекс.Браузере
Касаясь того, как в Яндекс.Браузере расположены компоненты, можно заметить, что он является неким гибридом между Оперой и Хромом. Отсюда же появляются уникальные нюансы, касательно месторасположения разыскиваемых данных.
- Открыв интернет-обозреватель от Яндекс, раскройте главное меню в правом верхнем углу окна программы.
Из предоставленного списка вам необходимо навести курсор мыши на строчку «История».
Теперь следует выбрать одноименный пункт, располагающийся вверху списка.
В правом верхнем углу открывшейся страницы найдите текстовое поле для поиска.
В указанную графу вставьте URL-адрес сайта ВКонтакте и нажмите клавишу «Enter».
Среди основного содержимого страницы вы сможете наблюдать каждый переход к социальной сети.
Если по каким-либо причинам вам потребуется очистить всю хронику обозревателя, воспользуйтесь соответствующей статьей.
Просмотр посещений VK в Mozilla Firefox
Интернет-обозреватель Мазила Фаерфокс в рамках данной статьи является самым уникальным, так как разработан на другом движке. Вследствие этой особенности проблемы зачастую возникают в тех случаях, когда пользователь решается перейти с Хрома на Firefox.
- Запустив веб-обозреватель, откройте главное меню программы в правом верхнем углу.
Среди представленных разделов выберите значок с подписью «Журнал».
Внизу дополнительного блока кликните по кнопке «Показать весь журнал».
В новом дочернем окне интернет-обозревателя «Библиотека» разыщите графу «Поиск в журнале».
Заполните строку в соответствии с полной версий адреса сайта ВКонтакте и воспользуйтесь клавишей «Enter».
В окне, расположенном ниже поля для розыска, вы можете видеть каждое посещение сайта ВК.
На этом с поиском хроники в интернет-обозревателях можно закончить.
Блочное горизонтальное меню (float)
В этом меню ссылки представляют собой блоки, у которых можно изменять ширину и высоту, если это необходимо.
Пример HTML и CSS: блочное горизонтальное меню с float
Описание примера
- С помощью свойства CSS float:left выстраиваем элементы списка по горизонтали и добавляем каждому из них правое поле (CSS margin-right), чтобы они не прилегали друг к другу.
- Делаем из ссылок встроенные блоки (CSS display:inline-block), чтобы при необходимости у них можно было изменять размеры. В конце задаем всем элементам горизонтального меню необходимое оформление.
Так как пункты меню у нас всплывают влево, то HTML-элементы, которые будут находиться ниже навигации, смогут также ее обтечь. Чтобы этого не произошло, можно сделать прерывание обтекания с помощью свойства CSS clear или установить у блока с class=»menu» такую высоту, которая гарантированно будет больше высоты ссылок.
Горизонтальное выпадающее меню с разделителями
Существует несколько десятков вариантов, как на чистом CSS добавить полоску (разделитель) между пунктами меню. Варианты, которые используют ::before или ::after , или куда проще border-left, border-right я дублировать не буду.
Бывают ситуации, когда верстка построена так чудесненько, что без jquery не обойтись.
Html код у нас остается прежним, мы только подключаем в самом начале библиотеку jQuery и файл, который ее использует:
Сразу после </title>.
Как вы поняли, нужно создать файл script-menu-3.js и туда закинуть вот такой маленький код:
Стили CSS для такого меню нужно оставить те что есть, + забросить вот этот кусок в конец:
Можно просмотреть в режиме демо или скачать шаблон горизонтального меню ниже:
Скачать пример
Преимуществами такого решения является:
- меню будет тянутся динамически;
- отступы от разделителя до пункта везде одинаковые;
- более красивое и гибкое оформление.
Простое горизонтальное меню
Самое простое горизонтальное меню без каких-либо изысков.
Пример HTML и CSS: простое горизонтальное меню
Описание примера
- Создаем маркированный список (тег <UL>), в который помещаем HTML-ссылки (тег <A>). Убираем у этого списка и у его пунктов маркеры (CSS list-style), а также внешние поля (CSS margin) и внутренние отступы (CSS padding).
- Чтобы теги <LI> выстроились по горизонтали — делаем их встроенными (inline) с помощью свойства CSS display:inline.
- Так как элементы списка у нас теперь уровня строки, то мы легко их можем выравнивать по левому или правому краю блока, используя CSS text-align.
Расположить элементы меню в одну строку и выровнять их можно и другим способом — заменив последние два пункта описания на свойство CSS float со значением left или right. Но здесь надо понимать, что при значении left элементы примут правильный порядок, а вот при right (как надо в нашем примере) они примут обратный порядок и придется менять местами ссылки.
Доработка горизонтального меню
Это все, что касается основ создания горизонтальных меню на CSS. Далее мы придадим красивый вид нашему меню. Для этого мы присвоим для a элемента background:url(background.png) repeat-x; для a:hover другой фон background:url(hover.png) repeat-x; Ниже предоставлены исходные картинки.
background.png —
hover.png —
Теперь меню имеет немного иной вид:
Это самое простое горизонтальное меню на CSS, которое вы можете использовать как основу для разработки меню для своего сайта. Также можете посмотреть как создать выпадающее горизонтальное меню на css. Надеюсь, статья была полезной и понятной. Если остались вопросы или недопонимания по поводу горизонтальных меню, смело пишите в комментарии.
Дальше: Заработок на контекстной рекламе, идеи для эффективного заработка
Меню для сайта на CSS в онлайн сервисе
Щелкните по любому из шаблонов и вы увидите в области «Preview», как будет выглядеть меню, созданное на его основе с использованием одного лишь CSS (таблиц каскадных стилей).
Посмотрите как оно работают и прикиньте, какой шаблон, на ваш взгляд, наилучшим образом подойдет к дизайну вашего сайта. Учтите, что цветовое оформление, а так же размер, тип и начертание шрифта можно будет поменять на вкладке «Parameters»:
Нужный цвет для шрифтов или фона вы можете ввести непосредственно в виде Html кода цвета (, где, например, FFFFFF означает белый) либо выбрать из выпадающей палитры при щелчке по прямоугольнику с настраиваемым цветом.
Итак, вы выбрали наиболее подходящий вам шаблон для будущего шедевра навигации, настроили его цветовое оформление и выбрали нужный тип, размер и начертание шрифта. Некоторые нюансы отображения вы сможете поменять уже непосредственно в коде выпадающего меню (в свойствах CSS), который скачаете после завершения работы с мастером.
Создание горизонтального или вертикального меню
Теперь можно переходить к созданию структуры, перейдя на вкладку «Items». В открывшемся окне мастера вам представится возможность:
- создавать новые пункты (как вложенные, так и не вложенные)
- удалять уже существующие пункты выпадающего меню
- удалить все пункты одновременно (очистка)
- задать надпись для каждого пункта
- повесить ссылку на каждый пункт
- прописать для этой ссылки атрибут Title (может пригодится, если в качестве анкора используется изображение)
- настроить способ открытия страницы при переходе по данному пункту (в этом же окне или в новом окне браузера)
Для того, чтобы удалить все демонстрационные пункты меню, вы можете нажать на кнопку под названием «Clear» с изображением мусорного бака.
Для создания нового пункта служит кнопка «Add Item» с изображение большого плюса. В этом случае новый пункт выпадающего меню будет добавлен в самый конец списка уже имеющихся. Если вы нажмете на следующую кнопку под названием «Add Next Item», то новый пункт будет добавлен сразу после выделенного в текущий момент.
Для добавления вложенного пункта нажмите на кнопку под названием «Add Subitem», при этом должен быть выбран в окне мастера тот пункт меню, в котором вы хотите создать вложенный. Ну, а кнопка под названием «Remove Item» служит для удаления выбранного в текущий момент.
Для каждого созданного пункта вы должны заполнить поля в области «Item Parameters».
- в поле «Text» должны вписать текст
- в поле «Link» должны вписать Урл страницы, на которую должен будет осуществиться переход
- в поле «Tip» можете, при желании, указать . Содержимое тега TITLE будет видно, если подвести указатель мыши к ссылке
- в поле «Target» из выпадающего списка вы можете выбрать способ открытия страницы, ссылку на которую вы прописали для данного пункта горизонтального или вертикального меню. Если вы оставите значение по умолчанию «_self», то при его выборе посетителем вашего сайта, страница откроется в этом же окне браузера. Если вы хотите, чтобы страница открывалась в новом окне браузера, то нужно будет выбрать из выпадающего списка вариант «_blank»
1 комментарий для “VBA Excel. Автоматическая запись текущей даты и времени”
Создадим-ка горизонтальную навигационную модель
Такой вид навигации наиболее популярен. При горизонтальном оформлении панели все пункты меню расположены в шапке страницы или в «подвале» (иногда навигационные элементы дублируются, отображаясь одновременно и сверху, и снизу).
В качестве примера мы создадим горизонтальную панель, пункты меню которого будут оформлены при помощи css (каскадных таблиц стилей), а точнее трансформированы. Так, каждый отдельный элемент будет находится в скошенном прямоугольнике. Заинтриговал?
К сожалению, каждый браузер работает с данным свойством по-своему, не смотря на прописанные стандарты. Поэтому для обозначения того или иного браузера были созданы специальные префиксы:
- -ms- (Internet Explorer)
- -o- (Opera)
- -webkit- (Chrome, Safari)
- -moz- (Firefox)
А теперь полученные знания применим к написанию примера.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Горизонтальная панель</title>
<style>
li {
display: inline-block;
margin-right: 6px;
background: #FF8C00;
transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
-o-transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-moz-transform: skewX(-45deg);
}
a {
display: block;
padding: 18px 35px;
color: #fff;
transform: skewX(40deg);
-webkit-transform: skewX(40deg);
-o-transform: skewX(40deg);
-ms-transform: skewX(40deg);
-moz-transform: skewX(40deg);
}
li:hover {
background: #1C1C1C;
}
</style>
</head>
<body>
<menu>
<li>Главная</li>
<li>О компании</li>
<li><a href="3.html">Продукция</a></li>
<li><a href="4.html">Контакты</a></li>
</menu>
</body>
</html>
|
Сценарий JavaScript, с помощью которого можно изменить способ открытия выпадающих списков в десктопной версии меню Navbar (при наведении):
$(function() {
function onNavbar() {
if (window.innerWidth >= 768) {
$('.navbar-default .dropdown').on('mouseover', function(){
$('.dropdown-toggle', this).next('.dropdown-menu').show();
}).on('mouseout', function(){
$('.dropdown-toggle', this).next('.dropdown-menu').hide();
});
$('.dropdown-toggle').click(function() {
if ($(this).next('.dropdown-menu').is(':visible')) {
window.location = $(this).attr('href');
}
});
} else {
$('.navbar-default .dropdown').off('mouseover').off('mouseout');
}
}
$(window).resize(function() {
onNavbar();
});
onNavbar();
});
Основные виды меню сайта + примеры
Вариант, который встречается чаще остальных, и на это есть веские причины. Горизонтальное меню для сайта – самый простой способ информировать пользователя о содержании страниц ресурса. Это наиболее привычное расположение элементов навигации. Оно не доставляет проблем при поиске нужного раздела и демонстрирует заботу веб-мастера о посетителях.
Для сайтов с развернутой структурой размещение по горизонтали считается лучшим решением.
Вертикальное.
Альтернативой самому распространенному варианту является вертикальное меню для сайта, которое размещается по левому краю экрана. Расположение названий разделов ресурса сверху вниз не менее удобно, особенно для блогов, где основную часть страницы занимают фото и текст.
Вертикальное, или боковое меню для сайта, требовательно с точки зрения длины входящих в него элементов: предпочтение следует отдавать коротким наименованиям, чтобы перечень не выглядел слишком широким.
Фиксированный хедер.
Шапка меню сайта, которая отображается в неизменном виде на любой странице, – оптимальный выбор для ресурсов с длинной прокруткой, содержащих пространные статьи. Такой список пунктов доступен пользователю постоянно, в каждом просматриваемом разделе.
Добавление в фиксированный хедер контактной информации и логотипа сделает навигацию еще более комфортной для посетителей.
«Плавающее».
Похожими свойствами обладает «плавающее» меню, с которым пользователи сталкиваются все чаще и уже успели оценить удобство доступа к страницам ресурса с любого места на сайте. Наименования разделов не двигаются при прокрутке и всегда остаются перед глазами.
Иконки.
Пиктограммы вместо слов или в сочетании с ними – хороший способ донести информацию до посетителей веб-сайта. Используя понятные всем графические обозначения, создатели добиваются эффекта новизны и необычности, проявляют нестандартный подход к оформлению и упрощают взаимодействие с гостями ресурса.
Конечно, существует опасность, что не все смогут правильно расшифровать значение иконок, поэтому такой способ лучше применять на тематических сайтах для продвинутых пользователей Сети.
Нижнее меню сайта.
Для тех, кто не боится экспериментов и готов на смелые шаги, чтобы привлечь внимание к своему проекту, есть неожиданное решение – поместить список пунктов внизу. Для сайтов, где главная страница оформлена при помощи фоновой фотографии, это лучший вариант, поскольку не мешает воспринимать изображение.. Чтобы посетители не испытывали затруднений с поиском названий разделов, необходимо продумать визуальное выделение этого блока.
Чтобы посетители не испытывали затруднений с поиском названий разделов, необходимо продумать визуальное выделение этого блока.
Разметка HTML
Меню основано на типовой структуре с неупорядоченным списком. Перед меню вставим элементы для переключения цвета.
index.html
<div class="container">
<span id="clr1"></span>
<span id="clr2"></span>
<span id="clr3"></span>
<span id="clr4"></span>
<span id="clr5"></span>
<span id="clr6"></span>
<div class="colorScheme">
<a href="#clr1" class="clr1"></a>
<a href="#clr2" class="clr2"></a>
<a href="#clr3" class="clr3"></a>
<a href="#clr4" class="clr4"></a>
<a href="#clr5" class="clr5"></a>
<a href="#clr6" class="clr6"></a>
</div>
<ul id="nav">
<li><a href="http://www.script-tutorials.com/">Главная</a></li>
<li><a href="#">Меню 1</a>
<ul class="subs">
<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="#">Меню 2</a>
<ul class="subs">
<li><a href="#">Подпункт 2-1</a></li>
<li><a href="#">Подпункт 2-2</a></li>
<li><a href="#">Подпункт 2-3</a></li>
<li><a href="#">Подпункт 2-4</a></li>
<li><a href="#">Подпункт 2-5</a></li>
<li><a href="#">Подпункт 2-6</a></li>
<li><a href="#">Подпункт 2-7</a></li>
<li><a href="#">Подпункт 2-8</a></li>
</ul>
</li>
<li><a href="#">Меню 3</a>
<ul class="subs">
<li><a href="#">Подпункт 3-1</a></li>
<li><a href="#">Подпункт 3-2</a></li>
<li><a href="#">Подпункт 3-3</a></li>
<li><a href="#">Подпункт 3-4</a></li>
<li><a href="#">Подпункт 3-5</a></li>
</ul>
</li>
<li><a href="#">Меню 4</a></li>
<li><a href="#">Меню 5</a></li>
<li><a href="#">Меню 6</a></li>
<li><a href="http://ruseller.com/lessons.php?rub=2&id=1405">К уроку</a></li>
</ul>
</div>
