Вертикальное меню css для сайта: Как сделать вертикальное меню

CSS-трюк: двойные бордюры-разделители вертикального меню

Когда при верстке требуется создать меню с разделителем, я использую замечательную технику, которую когда-то давно предложил Юрий «akella» Артюх.

Недавно я столкнулся с очень похожей, но более сложной задачей — мне нужно было сверстать вертикальное меню, разделителем которого является двойная линия, состоящая из двух разных цветов (синий и белый):

Возможные способы решения задачи:

  • использовать изображение;
  • использовать только CSS.

В решении необходимо предусмотреть, что:

  • высота пункта списка может меняться, т.е. текст может быть в несколько строк;
  • часть текста может быть за пределами тега ссылки.

Проблемы при использовании изображения

Объясню, почему решение в виде использования изображения в качестве бордюра не подходит в данном случае.

Структура HTML-кода нашего меню максимально проста:

<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">О компании</a></li>
	<li><a href="#">Статьи</a></li>
	<li><a href="#">Отзывы</a></li>
	<li><a href="#">Фотографии</a></li>
	<li><a href="#">Вопросы</a></li>
	<li><a href="#">Контакты</a></li>
</ul>

По идее, используя технику Юры Артюха, можно было бы разделитель сделать изображением и поставить его фоном к элементу <li>. Но дело в том, что в списке у каждого пункта еще используется изображение-маркер, и если это изображение ставить фоном тега <a>, тогда возникают следующие проблемы:

  1. Если в меню появится многострочный пункт, тогда меню станет некрасивым (не хватает одинакового отступа слева у текста в каждой строке):

  2. Первую проблему можно было бы решить, сделав ссылку блочный элементом (a {display:block}), однако при этом возникнет другая проблема — если после ссылки добавить текст, то он перенесется на новую строку, а этого также необходимо избежать:

Решение с помощью CSS

Мое решение с использованием чистого CSS позволяет избежать вышеописанных проблем.

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

ul {
	width: 150px;
	padding: 0 6px;
	background: #F2F7FD url(bg.gif) 0 100% repeat-x;
  border: 1px solid #C0D7FB;
  font-weight: bold;
	overflow: hidden; /* необходимо для того, чтобы
	спрятать верхний бордюр у первого пункта и
	нижний бордюр у последнего пункта */
}
li {
	list-style: none;
  background: url(bullet.
gif) 4px 8px no-repeat; padding: 5px 0 8px 22px; border-top: 1px solid #C0D7FB; /* синяя линия */ border-bottom: 1px solid #FFF; /* белая линия */ margin: -1px 0 -2px; /* "нахлестываем" на предыдущий и следующий пункт, в результате чего и достигается нужный эффект */ height: 1%; /* для устранения бага в IE6 и IE7 */ }

Для наглядности вы можете посмотреть на живой пример.

Вот, собственно, и все. Решение кроссбраузерное, надеюсь, кому-нибудь пригодится.

* * *

Для качественного сайта с большой аудиторией лучше использовать VPS хостинг (VPS или VDS — это виртуальный выделенный сервер), который, по сравнению с обычным виртуальным хостингом, имеет большие преимущества в плане ресурсов и программной части.

верникальное меню

Используется css и изображения

HTML Код:

<ul id =»menu» >
<li > <a href =»#» > <span > Главная</span > </a > </li >

<li > <a href =»#» > <span > Поиск</span > </a > </li >
<li > <a href =»#» > <span > Регистрация</span > </a > </li >
<li > <a href =»#» > <span > Карта сайта</span > </a > </li >
<li > <a href =»#» > <span > О сайте</span > </a > </li >
</ul >


CSS Код:

ul#menu {list-style-type :none ; margin :0 ; padding :0 ; }
ul#menu li a
            { color :#909090 ;
            background : url(/images/vert_menu. png ) no-repeat 0 0 ;

            text-decoration :none ;
            width : 200 px ;
            height : 55 px ;
            display :block ;
            border :none ;
            text-shadow: #ddd 2 px 2 px 0 ; }
ul#menu li a:hover
            { background-position : 50 % 100 % ;
            width : 200 px ;
            height : 55 px ;
            display :block ;
            color :#fff ;
            text-shadow: #027219 2 px 2 px 0 ; }
ul#menu li a span
            { font-family :sans-serif ;
            font-size :18 px ;
            padding :17 px 0 0 20 px ;
            display :block ; }

Используется html и css

HTML Код:

<ul id =»vert_menu» >
<li > <a href =»#» > <span > Главная</span > </a > </li >
<li > <a href =»#» > <span > Поиск</span > </a > </li >
<li > <a href =»#» > <span > Регистрация</span > </a > </li >
<li > <a href =»#» > <span > Карта сайта</span > </a > </li >
<li > <a href =»#» > <span > О сайте</span > </a > </li >
</ul>

CSS Код:

ul {
           list-style : none ;
           margin : 0 ;
           padding : 0 ; }
img {

           border : none ; }
#vert_menu {
           font-weight : bold ;
           font-family : Verdana, Helvetica, sans-serif ;
           text-decoration : none ;
           font-size : 80 % ;
           width : 202 px ; }
#vert_menu li {
           height : 37 px ; }
#vert_menu li a:link , #vert_menu li a:visited {
            text-decoration : none ;
           color : #f0bd9a ;
           display : block ;
           background : url(images/vert_menu. png ) 0 0 no-repeat ;
            padding : 10 px 0 10 px 10 px ; }
#vert_menu li a:hover , #vert_menu li #current {
            color : #FFF ;
           background : url(/images/vert_menu.png ) 0 -37 px no-repeat ;
           padding : 10 px 0 10 px 15 px ; }

10 сайтов с вертикальной навигацией вправо

Большинство меню веб-навигации располагаются горизонтально по всей странице. Это происходит из истории традиционных мониторов, которые были шире, а не выше.

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

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

 

1. Питомники Petersham

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

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

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

 

2. Ресторан Arbor

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

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

 

3. Smokey Bones

У Smokey Bones есть две вещи: потрясающая еда и убойный веб-сайт.

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

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

 

4. Mammoth Media

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

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

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

 

5. Amazon

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

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

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

 

6. Corum

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

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

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

 

7. Nua Bikes

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

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

 

8. Michael Ngo

Еще один сайт, который следует одностраничной вертикальной навигации, — это портфолио Майкла Нго.

У него довольно привлекательная заглавная картинка, которая сразу привлекает ваше внимание и привлекает вас. Но самая интересная часть — это содержание, так как все работает через 3 разные ссылки: домашняя, рабочая и контактная.

Навигационные ссылки также имеют свои собственные субтитры, так что вы можете сразу увидеть, что они делают.

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

 

9. Medienstadt.koeln

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

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

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

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

 

10. The Metrick System

Рекламное агентство Metrick System делает навигацию простой и точной. Он следует вертикальному стилю, но также сильно отличается от всех остальных в этом посте.

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

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

 

Подведение итогов

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

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

Какой выбрать?

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

Исходное изображение: Studytonight

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

Что такое меню навигации веб-сайта?

Исходное изображение: uxdesign

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

Что такое горизонтальная панель навигации и как она работает?

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

Достоинства горизонтальной навигации

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

 Недостатки горизонтальной навигации

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

 Что такое вертикальная навигация и как она работает?

Исходное изображение: выпадающее меню

Вертикальная панель навигации представляет собой набор ссылок с левой или правой стороны каждой страницы.

Достоинства вертикальной навигации

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

Недостатки вертикальной навигации

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

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

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