сайт с вертикальным меню
Вертикальное боковое меню на HTML/CSS
Принимая во внимание, что для простого бизнес-сайта или личного веб-сайта, только одна горизонтальная строка меню сделает эту работу. Независимо от того, с какой целью вы делаете дизайн меню, в этом списке вы найдете вдохновение для дизайна. Убедитесь, что вы проверите их все. Если вы любите использовать творческий и простые анимационные эффекты, полезно добавить эту страницу в закладки.
Все анимационные эффекты просты и аккуратны, так что вы можете использовать этот стиль меню линии на всех типах профессиональных веб-сайтов без каких-либо колебаний. Правильно структурированный кодовый скрипт поможет вам легко использовать код в вашем проекте.
Вашему вниманию 2 варианта навигаций, что по своей структуре они созданы аналогично по своим функциям, где то даже по дизайну можно найти сходство. Но вот функционально они совершенно разные, где у одного меню идут под категорий, у второго закреплены шрифтовые значки.
@charset «utf-8»;
html,
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
p,
blockquote,
th,
td,
textarea <
margin: 0;
padding: 0;
font-size: 14px;
line-height: 24px;
color: #000;
font-family: microsoft yahei, verdana, Tahoma;
>
ol,
ul,
li <
list-style: none;
line-height: 22px;
>
ol,
ul <
zoom: 1;
>
h1,
h2,
h3,
h4,
h5,
h6 <
font-size: 100%;
>
img <
border: 0;
max-width: 100%;
>
a,
a:link,
a:visited <
cursor: pointer;
text-decoration: none;
>
a:hover <
cursor: pointer;
>
.table <
border-collapse: collapse;
border-spacing: 0;
>
.table td <
border: solid 1px #666;
>
.clear <
clear: both;
float: none;
overflow: hidden;
height: 0;
font-size: 0;
>
.clearFix:after <
clear: both;
display: block;
visibility: hidden;
height: 0;
line-height: 0;
content: «.»;
>
.clearFix <
zoom: 1;
>
* <
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
>
:after,
:before <
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
>
.font <
font: 14px/24px «Comic Sans MS»;
>
:focus <
outline: 0;
>
.css3pie <
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
behavior: url(css3pie/PIE.htc);
>
body <
font-size: 14px;
font-family: 黑体-简, 黑体, 微软雅黑, Arial, Gotham, helvetica neue, Helvetica,
sans-serif;
width: 100%;
margin: 0 auto;
background-color: #313131;
overflow-x: hidden;
>
function thisMouseOut() <
$(‘.nav-slide’).removeClass(‘hover’);
>
$(‘.nav-slide’).mouseenter(function() <
clearTimeout(thisTime);
$(‘.nav-slide’).addClass(‘hover’);
>)
$(‘.nav-slide’).mouseleave(function() <
$(‘.nav-slide’).removeClass(‘hover’);
>)
>)
В зависимости от ваших потребностей, вы можете выбрать нужный эффект и настроить его под свой дизайн. В файле загрузки вы получите полный код сценария, чтобы вы могли легко работать с этим примером..
Создание и оформление меню
Основы верстки
Код простейшего меню будет выглядеть так:
Примечание
— Куда?
— В css-файл!
— В какой?
Хорошим тоном считается все стили сайта оформлять одним сжатым файлом. Но на время разработки гораздо удобнее иметь отдельные файлы для определенных элементов страницы, в данном случае для навигационного меню.
Позже код можно будет перенести в общий файл, а этот удалить (или отключить).
Как прописываются стилевые правила для меню
Необходимо создать классы, и прописывать стили уже для них. Потому что если задавать стили непосредственно для тегов, например:
то это правило будет распространяться и на все ссылки, включенные в списки за пределами меню! Кроме того, на сайте может быть несколько меню различного оформления.
Каким тегам нужно присваивать классы
Хороший вопрос. Для начала, неплохо создать дополнительный контейнер-обертку и присвоить класс ему.
При этом всегда надо держать в уме, что навигационный блок находится в определенном внешнем блоке сайта и его местоположение и некоторые свойства, например связанные с внешними отступами или направлением выпадения подменю (подробнее об этом в материале «Выпадающее меню») зависят от внешних классов глобальной разметки сайта.
Какие имена должны быть у классов
Первый отвечает за цветовое оформление всех элементов и, в тоже время, дает понять что относится к меню.
Второй идентифицирует список как собственно меню.
Внимание!
Старайтесь выбирать имена для классов не только внятные, но и уникальные. В противном случае они могут конфликтовать с уже существующими классами.
Группировка стилей по классам
На самом деле, все очень просто. Изначально, на этапе создания нужно группировать стили тематически и включать их в соответствующие классы.
Простое вертикальное меню
Исходный html-код меню будет выглядеть так:
Кроме основных классов, рассмотренных в предыдущем материале, добавлен класс li.active для активного пункта (ссылка на текущую страницу).
Сброс и установка стилей по умолчанию
Избавляемся от стилей для списков, назначенных браузером (или шаблоном) по умолчанию.
Здесь же можно задать размеры и другие свойства шрифта, если они отличаются от основных.
Цветовое оформление
Прежде чем прописывать стили, составляем список объектов к которым обычно применяется цветовое оформление:
Примечание
На практике не обязательно применять все стили, достаточно лишь некоторые. Например при наведении иногда достаточно изменение только цвета ссылки или добавить подчеркивание.
Замечание
Цвет фона меню задавать не обязательно, если он наследуется от родительского блока.
Разделители пунктов
Это универсальное режение для любого темного бэкграунда. Если вы решите изменить цвет фона, то цвет рамки и тени изменится автоматически!
Выпадающее меню (многоуровневое)
До этого момента рассматривалось простое одноуровневое меню. Как показывает практика, очень часто, через какое-то время возникает необходимость к одному или нескольким основным пунктам добавить подпункты. Поэтому:
Изначально любое меню нужно создавать как многоуровневое!
В многоуровневом меню один или несколько пунктов могут содержать вложенные меню с подпунктами, которое в исходном состоянии скрыто (не обязательно, но будем рассматривать именно этот вариант). При наведении на родительский пункт осуществляется вывод подменю.
За основу взят код предыдущего примера. К одному из пунтков добавлен вложенный список второго уровня.
HTML-код 2-х уровневого меню:
Разбиваем на несколько этапов:
Цветовое оформление
Чтобы не усложнять код, размеры и отступы оставлены те же, что и в основном меню.
Позиционирование и скрытие
Вывод
Информация
Подменю выпадающеее влево
Если навигационное меню расположено в правой колонке, то будет логично если подменю выпадает слева. В противном случаее оно может оказаться за пределами экрана.
Простая анимация
Что мы будем анимировать. В данном случае, эффекты довольно простые:
Я не стал добавлять специальный класс для эффектов анимации, потому что, как вы ниже сами увидите, все делается очень просто путем добавление нескольких строчек кода css к уже существующим классам.
Использован упрощенный синтаксис. Также добавлены нестандартные свойства для различных типов браузеров.
Переопределение существующих стилей:
Скрытие подменю. Вариант 2
Альтернативным способом является смещение меню в исходном состоянии за пределы экрана + полная прозрачность.
Раздвижное меню-аккордеон
Несколько слов вступления
Попробуем создать аккордеон-меню из простого выпадающего меню, внеся минимальные изменения в код разметки и стили.
Группирование позволяет установить группу свойств сразу для нескольких селекторов и классов, что делает код более читабельным.
После этого добавим стили, для закрытого и раскрытого аккордеона:
Горизонтальное меню
По структуре горизонтальное меню ни чем не отличается от вертикального, html-код одинаковый. Теоретически, получить горизонтальное меню из вертикального можно заменой/добавлением класса содержащего контейнера.
Чтобы не усложнять разметку и оформление, последовательно создадим горизонтальное выпадающее меню с нуля, со своими классами.
В итоге наше меню будет выглядеть так:
За основу возьмем код вертикального выпадающего меню и заменим классы:
Разметка
Что было сделано:
Пояснения:
Разметка выпадающего меню
Рассмотрим некоторые особенности:
Оформление
Перед тем как заняться цветовым оформлением, необходимо добавить еще несколько стилевых правил разметки. Я специально перенес их в офомление, чтобы был понятнее смысл.
Если основному контейнеру назанчить цвет фона, то мы его не увидим по одной простой причине:
Теперь контейнер будет вести себя более дружелюбно и можно его оформлять
Для выделения активного пункта меню была применена тень.
На этом цветовое оформление можно считать завершенным. Теперь с легкостью можно подкорректировать цветовую гамму, или создать несколько классов для разных вариантов оформления.
Дополнительно
Вертикальные навигационные меню: Тенденции, варианты и лучшие образцы
Вертикальные навигационные меню: Тенденции, варианты и лучшие образцы
Зайдите на любой сайт в сети и гарантируем вам, что везде вы встретите один и тот же элемент – меню навигации. Навигационные меню позволяют посетителям переходить по разделам сайта. Без них процесс исследования веб-сайта станет очень сложным и нудным. Именно поэтому веб-дизайнеры, исследователи в области удобства пользования веб-сайтов и прочие связанные с этим люди стараются совершенствовать технологии создания максимально удобных для пользователей систем навигации.
Меню навигации на любом из сайтов в основном представляются вам в двух вариантах: вертикальный вариант или горизонтальный. Горизонтальные меню навигации отображают разделы пункт за пунктом. В вертикальных меню пункты размещают пункт под пунктом. В этой статье мы постараемся выделить самые запоминающиеся вертикальные меню для вашего вдохновения.
Подборка красивых дизайнов с вертикальным меню навигации
Вертикальная навигация в этом портфолио очень проста и ясна на первый взгляд, но это не значит, что в меню страдает функциональная сторона, или уровень взаимосвязи. При кликах по разделам, меню автоматически переносится в правую сторону, делая удобным процесс ознакомления с содержимым раздела.
Здесь вы можете ознакомиться с одним из преимуществ вертикальных меню: они очень удобны своей структурой и их можно уместить практически в любую верстку. Меню размещается прямо под логотипом сайта, и посетитель может сразу его заметить (конечно, если он не из Израиля).
На этом портфолио вы можете встретить очень чистый и простенький дизайн, который акцентирует внимание посетителей на содержимом справа.
Очень характерное и нестандартное навигационное меню с 5-ю разными шрифтами. Немного необычное меню для такого сообщества.
Навигационное меню с правой стороны разметки: несмотря на то, что дизайн достаточно простой и не очень продуманный, вы все равно сможете с легкостью перемещаться по разделам. Навигационное меню, кстати, не особо выделяется.
Вертикальное меню навигации достаточно уточенное и функциональное. Наведя на пункты меню, вы увидите скромную анимацию.
Вертикальное меню навигации сидит где-то, как раз, в середине той области, на котором сконцентрировано внимание посетителя при первой загрузке страницы. Активные разделы помечаются пиктограммой в виде руки.
Дизайн сайта «Maryland Institute College of Arts» демонстрирует вам еще одно преимущество вертикальных меню навигации: здесь показана иерархия, за счет которой вам не придется каждый раз целиться в пункты меню, субкатегории которых отображаются только тогда, когда курсор мыши наведен на них.
Вертикальная навигация этого сайта расположена прямо под логотипом веб-сайта, что гарантирует привлечение внимания, несмотря даже на огромный баннер в правом верхнем углу.
Вертикальная навигация этого сайта отображает еще одно преимущество: есть возможность размещения большего числа разделов.
Портфолио арт-директора Ника Джонса тоже оснащено вертикальной навигацией. Меню включает в себя его работу, а также интерактивный компонент, который прокручивает меню вверх и вниз, в зависимости от движения мыши посетителя. Когда производится клик по разделу, меню отъезжает влево, освобождая пространство для содержимого.
Это черное меню навигации для «Noam Design» сохраняет пункт контактов постоянно открытым.
Вертикальная навигация этого веб-сайта разгруппирована на две части, что позволяет посетителям быстрее найти нужный им раздел.
Вертикальная навигация в этом портфолио отражает традиционный стиль содержимого печатных книг. Разделы меню делятся две группы.
Это простое меню навигации расположено прямо под логотипом веб-сайта, что гарантирует привлечение внимания посетителей. Темно-серый фон обозначает активные разделы в меню, а стрелка ведет к содержимому.
Вертикальная навигация на сайте «Mellasat Vineyard» представляет собой модулярный элемент дизайн, который также включает в себя логотип и название сайта. Меню здесь представляет собой основной элемент.
Навигация в этом утонченном минималистичном портфолио представляет собой центральный элемент и занимает почти всю разметку. Пункты меню повторяются справа, но уже в большем варианте.
Меню креативно «вплетается» в описание и направленность веб-сайта.
Интерактивное меню оснащено скользящими разделами, которые представляют под-ссылки и содержимое, когда посетитель наводит на основной пункт меню.
Несмотря на тусклые цвета этого меню, оно отлично привлекает внимание посетителей за счет своего расположения.
Навигация на сайте «Go Media Inc» представляет собой гормошку, в которой спрятаны под-разделы. Кликая на основной раздел, вы активируете анимацию, которая откроет вам остальные скрытые разделы.
На этом сайте меню навигации также привлекает внимание из-за своего расположения на странице.
Сайт «Glass Tiger Surfboards» оснащен вертикальным меню с низким уровнем плотности, и травянистый фон немного просвечивает.
Меню на этом сайте-портфолио в стиле минимализма представляет собой красный прозрачный блок, так что фотография все равно видна, даже если вы раскроете меню.
Креативное меню прозрачно, так что фоновая текстура все равно видна вам.
Меню выполнено с темно-серым полупрозрачным фоном, так что фоновое изображение просвечивает его.
Меню навигации раскрывается, как только посетитель наводить курсор на слово Меню. Простота в дизайне достигнута за счет высокой креативности, а фоновые изображения достойны внимания.
В меню есть иллюстрированные пиктограммы за пунктами меню, что очень дополняет общую тематику, а также помогает в процессе визуального распознавания.
Вертикальное меню на этом сайте представляет собой очень отличающийся элемент. Пиктограммы по правую сторону служат для привлечения внимания.
Меню здесь интересно, так как редко можно встретить меню в таком стиле на сайтах, связанных с системой образования.
Навигационное меню здесь установлено напротив древесного фона, а ссылки оформлены органическим небрежным шрифтом.
Портфолио Майлза также оснащено вертикальной навигацией, и оно представляет собой основной визуальный элемент. Меню выполнено в стиле клочка бумаги, прикрепленного скрепкой.
В этом меню применили цветные шрифты в стиле рукописного текста, что очень дополняет общую тематику.
Это вертикальное меню выровнено по центру разметки. В нем применили огромные шрифты с трехмерным эффектом.
На этом сайте вы увидите то, как огромные шрифты могут зарезервировать вам больше места.
Личный сайт Рика Монро оснащен навигационным ссылками поверх текстурного фона, прямо под логотипом сайта.
Этот большой шрифт очень подходит данному веб-сайту в стиле минимализма.
На этом сайте применили органические шрифты в рукописном стиле, которые соответствуют всей тематике.
Это меню предлагает вам интересное взаимодействие. Когда вы кликаете по пункту, меню отъезжает влево или вправо, что освобождает пространство для содержимого, а также привлекает внимание посетителей.
В этом навигационном меню использовались очень большие шрифты, за счет чего привлекается внимание посетителей. Если вы наведете курсор мыши на один из пунктов, то увидите интересный анимационный эффект.
В этой навигационной системе основные ссылки расположены в вертикальном порядке. А подразделы расположены горизонтально.
Простое текстовое меню привлекает внимание за счет расположения на странице.
Пункты в этом меню напоминают полоски из бумаги, что дополняет рисованную тему оформления.
Вертикальное меню на этом сайте занимает огромную часть разметки. При наведении курсора мыши на пункт, раскрывают меню за счет простой анимации на CSS, создавая ощущения продвижения по сайту.
Это нестандартно расположенное меню на самом деле дополняет «живой» внешний вид веб-сайта. Пиктограммы слева от каждого пункта помогают визуально отличить меню от остального дизайна.
На этом веб-сайте пункты меню расположены почти у середины окна просмотра. Простое навигационное меню придает ощущение утонченности, и не занимает много места.
Навигационное меню этого сайта уникально – оно выглядит как маленькая плетеная корзинка. К тому же, оно выделятся, так как расположено в правом верхнем углу.
Официальный сайт Билла Гейтса также оснащен уникальным меню, которое представляет собой инновацию за счет того, что меню на самом деле передает посетителям то, что владелец хочет до них донести.
Пункты меню отображены в виде полупрозрачных окружностей. При наведении, символы раскрывают пункт меню. Это меню наверняка вам запомнится.
Это меню слегка наклонено, и это наверняка привлечет внимание посетителей. Дизайн очень подходит для ресторанного веб-сайта.
Смелое, яркое, привлекательное. Все эти прилагательные истинно описывают вертикальное меню на сайте «Aussie BBQ Legends». Меню играет огромную роль в построении общей тематики сайта.
Агентство «Sid Lee» применило интерактивное меню навигации с левой стороны страницы. Некоторые разделы меню имеют подразделы, которые отображены прямо за основным пунктом.
На сайте «Harmony Republic» меню навигации расположено с левой стороны логотипа. Нетрадиционный вариант расположения навигации, но здесь все выполнено просто прекрасно. Активный раздел выделяется белым фоном.
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях: