Css3 горизонтальное меню – Горизонтальное меню для сайта. Создание горизонтального анимированного меню с фиксированной позицией на странице средствами CSS и jQuery

alexxlab

Создание горизонтального меню с использованием только CSS3

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

 

 

Для этого урока Вам нужно только знание основ HTML и CSS. 

Подготовка кода HTML для меню 

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

Ниже расположен пример типичной структуры HTML для меню:

<ul id=nav>
     <li><a href="">Home</a></li>
     <li><a href="">About</a></li>
     <li><a href="">Portfolio</a>
     <ul>
          <li><a href="">Website 1</a></li>
          <li><a href="">Website 2</a></li>
          <li><a href="">Website 3</a></li>
          <li><a href="">Website 4</a></li>
          <li><a href="">Website 5</a></li>
     </ul>
     </li>
     <li><a href="">Services</a>
     <ul>
          <li><a href="">Website Design</a>
          <ul>
               <li><a href="">HTML</a></li>
               <li><a href="">CSS</a></li>
          </ul>
          </li>
          <li><a href="">Website Development</a>
          <ul>
               <li><a href="">PHP</a></li>
               <li><a href="">.Net</a></li>
               <li><a href="">JavaScript</a></li>
               <li><a href="">jQuery</a></li>
          </ul>
          </li>
          <li><a href="">SEO</a></li>
          <li><a href="">Advertising</a></li>
          <li><a href="">Marketing</a></li>
     </ul>
     </li>
     <li><a href="">Contact</a></li>
</ul>

В этом меню есть 5 основных пунктов: Home (Главная), About (О нас), Portfolio (Примеры работ), Services (Услуги) и Contact (Контакты). У пункта «Примеры работ» есть подпункты, это сделано с помощью списка, который вложен в список:

<li><a href="">Portfolio</a>
     <ul>
          <li><a href="">Website 1</a></li>
          <li><a href="">Website 2</a></li>
          <li><a href="">Website 3</a></li>
          <li><a href="">Website 4</a></li>
          <li><a href="">Website 5</a></li>
     </ul>
</li>

У пункта «Услуги» есть подподпункт, это сделано с помощью списка, который вложен в список, который в свою очередь вложен в список:

<li><a href="">Services</a>
     <ul>
          <li><a href="">Website Design</a>
          <ul>
               <li><a href="">HTML</a></li>
               <li><a href="">CSS</a></li>
          </ul>
          </li>
          <li><a href="">Website Development</a>
          <ul>
               <li><a href="">PHP</a></li>
               <li><a href="">.Net</a></li>
               <li><a href="">JavaScript</a></li>
               <li><a href="">jQuery</a></li>
          </ul>
          </li>
          <li><a href="">SEO</a></li>
          <li><a href="">Advertising</a></li>
          <li><a href="">Marketing</a></li>
     </ul>
</li>

 

Задаем стили полосе меню 

Теперь, когда готов код HTML для списка, можно начинать добавлять код CSS, чтобы список превратился в меню.

Для начала зададим стили основному списку, удалив стили маркеров списка и добавив цвет фона и высоту списку:

ul {
     padding:0;
     margin:0;
     list-style: none;
     background:#000;
     height:36px;
}

После этого зададим стили для элементов списка и добавим всплывание влево, чтобы список стал горизонтальным:

ul li {
     float:left;
     position:relative;
}

Так как элементы списка — это ссылки, зададим им стили, используя селектор ссылок, отключим подчеркивание и изменим цвет ссылок:

a:link, a:visited {
     text-decoration: none;
     color: #FFF;
     font-weight:bold;
}

Теперь убедимся, что область ссылок занимает весь элемент списка и применим следующие стили:

ul li a, ul li a:visited {
     display:block;
     color:#fff;
     width:104px;
     height:auto;
     line-height:20px;
     padding:10px;
     text-align:center;
}

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

ul li a:hover {
     display:block;
     color:#000;
     background:#FFF;
     line-height:20px;
     padding:10px;
}

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

Начнем со скрытия вложенных списков первого и второго уровней:

ul li ul, ul li:hover ul li ul {
     display: none;
}

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

ul li:hover ul {
     display:block;
     position:absolute;
     top:36px;
     left:0;
     height:auto;
}

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

Далее применим стили к элементам списка, чтобы отделить их линией:

ul li:hover ul li a {
     display:block;
     text-align:left;
     border-bottom:1px solid #FFF;
}

И, наконец, покажем подподпункты, когда пользователь наводит указатель мыши на элемент вложенного списка первого уровня, применив такие стили:

ul li:hover ul li:hover ul {
     display:block;
     position:absolute;
     left:124px;
     top:0;
}

Посмотрите окончательный результат в демонстрации работы меню на чистом CSS.

Автор урока Paul Underwood

Перевод — Дежурка

Смотрите также:

Меню и навигация » Страница 2

3 695 Menu & Nav

CSS3 меню с overlay эффектом

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

CSS3 меню с overlay эффектом 4 934 Menu & Nav

Адаптивное многоуровневое меню

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

Адаптивное многоуровневое меню
3 274 Menu & Nav

Адаптивное Retina меню

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

Адаптивное Retina меню 2 045 Menu & Nav

Горизонтальное меню на CSS3

Симпатичное горизонтальное CSS3 меню с всплывающими пунктами при наведении.

Горизонтальное меню на CSS3 3 685 Menu & Nav

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

Горизонтальное меню с выпадющими подпунктами с использованием css3.

Выпадающее меню на CSS3 2 162 Menu & Nav

Размытое меню на CSS3

Простое горизонтальное меню с эффектом размытия и с элементом адаптивности. Используется CSS3 и HTML5.

Размытое меню на CSS3 4 207 Menu & Nav

Дерево меню на jQuery

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

Дерево меню на jQuery 2 088 Menu & Nav

HorizontalNav — горизонтальная навигация

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

HorizontalNav - горизонтальная навигация 3 024 Menu & Nav

Горизонтальное меню с выпадающими подпунктами

Горизонтальное меню с выпадающими подпунктами. Выпадающие элементы используют jQuery, все остальное оформлено на CSS. В демо включен практически макет сайта, осталось только заполнить центральную часть контентом и нарисовать красивую шапку. Но можно использовать и только саму идею меню.

Горизонтальное меню с выпадающими подпунктами 1 535 Menu & Nav

Меню с эффектом подпрыгивания

Интересное подпрыгивающее меню (bounce), сделанное с помощью псевдо элементов и пользовательских атрибутов на CSS3. В примере простое горизонтальное и горизонтальное с выпадающими под пунктами меню.

Меню с эффектом подпрыгивания 3 451 Menu & Nav

Выпадающее адаптивное меню

Адаптивное выпадающее CSS3 меню, которое при уменьшении окна браузера превращается в меню вида аккордеон. Проверено в Chrome, Opera, FireFox, IE9, iPad, iPhone. В IE7 и IE8 работает только выпадающее подменю, адаптивность теряется.

Выпадающее адаптивное меню 2 122 Menu & Nav

Многоуровневое выпадающее меню

Многоуровневое выпадающее меню на CSS2. При этом работает оно в IE5.5, IE6, IE7, IE8, Firefox, Opera, Safari(PC) и Google Chrome.

Многоуровневое выпадающее меню

Эластичное горизонтальное меню на CSS3 и jQuery

.menu {

position: relative;

display: flex;

flex-direction: row;

justify-content: space-between;

align-items: center;

box-sizing: border-box;

height: 70px;

width: 70px;

padding: 15px 20px;

border-radius: 5px;

background: #ffffff;

box-shadow: 0 4px 64px rgba(0, 0, 0, 0.15);

transition: 1.3s cubic-bezier(0.53, 0, 0.15, 1.3);

z-index: 2;

}

.menu.expanded {

height: 80px;

width: 600px;

}

.menu span {

white-space: nowrap;

visibility: visible;

opacity: 1;

transition: .3s;

transform: rotateY(0deg);

}

.menu span:nth-of-type(1) {

transition-delay: .4s;

}

.menu span:nth-of-type(2) {

transition-delay: .5s;

}

.menu span:nth-of-type(3) {

transition-delay: .6s;

}

.menu span:nth-of-type(4) {

transition-delay: .7s;

}

.menu span.hidden {

width: 0;

visibility: hidden;

opacity: 0;

transform: rotateY(90deg);

}

.menu span.hidden:nth-of-type(1) {

transition-delay: .3s;

}

.menu span.hidden:nth-of-type(2) {

transition-delay: .2s;

}

.menu span.hidden:nth-of-type(3) {

transition-delay: .1s;

}

.menu span.hidden:nth-of-type(4) {

transition-delay: 0s;

}

.menu a {

text-decoration: none;

text-transform: uppercase;

font-weight: bold;

color: #333333;

padding: 5px;

transition: .3s;

}

.menu a:hover {

color: #D84315;

}

.container {

order: 1;

width: 20px;

height: 24px;

padding: 5px;

display: flex;

flex-direction: row;

justify-content: space-between;

align-items: center;

cursor: pointer;

}

.container:hover .toggle:before {

top: -9px;

}

.container:hover .toggle:after {

bottom: -7px;

}

.container .toggle {

position: relative;

width: 100%;

height: 2px;

background: #aaaaaa;

}

.container .toggle:before {

position: relative;

display: flex;

top: -7px;

height: 2px;

width: 100%;

background: #aaaaaa;

content: «»;

transition: top .25s ease, bottom .25s ease, transform .5s ease;

}

.container .toggle:after {

position: relative;

display: flex;

bottom: -5px;

height: 2px;

width: 100%;

background: #aaaaaa;

content: «»;

transition: top .25s ease, bottom .25s ease, transform .25s ease;

}

.container .toggle.close {

height: 0;

}

.container .toggle.close:before {

transform: rotate(45deg);

top: 0;

}

.container .toggle.close:after {

transform: rotate(-45deg);

bottom: 2px;

}

@keyframes respiration {

0% {

min-height: 100vh;

border: 0vh solid #ffffff;

}

75% {

min-height: 95vh;

border: 2.5vh solid #ffffff;

}

100% {

min-height: 100vh;

border: 0vh solid #ffffff;

}

}

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

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