Интерактивное меню на CSS3 и jQuery

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

 

Идея

На экране аккуратно выстроены блоки, а при нажатии на блок выводится скрытое содержание. Вывод экрана с содержанием начинается с текущего блока.

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

 

 

Разметка HTML

Сложного ничего нет. Каждый блок имеет заголовок, который скрывается при выводе содержания соседнего блока. А атрибут tabindex будет обсуждаться ниже по тексту урока.

  <ul class="menu">
    <li tabindex="1">
      <span class="title">Один</span> 
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
    </li>

    . . .

    <li tabindex="1"> 
      <span class="title">Девять</span>
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
    </li>     
  </ul>

 

CSS

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

Основной контейнер

Сначала нужно определить стили для основного контейнера, в том числе и отмену обтекания текстом. Также обратите внимание на свойство counter-reset: li;, которое будет использоваться для получения отличного эффекта со счетчиком.

.menu{
  width: 620px;
  margin: 100px auto; padding: 15px;
  list-style: none;
  counter-reset: li;
  background: #eee;
  box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
  border-radius: 10px;
}

.menu:before,
.menu:after {
  content: "";
  display: table;
}

.menu:after {
  clear: both;
}

.menu {
  zoom:1;
}

Элемент списка

Ниже приводятся свойства CSS? которые формируют элемент списка.

Следует обратить внимание на:

  • Для :focus используются такие же стили как и для :hover, потому что будет использоваться клавиша табуляции для переключения между элементами меню.
  • Класс .cover добавляется динамически (с помощью jQuery) к элементу li, когда тот выбирается пользователем.
  • Если выбор был осуществлен с помощью клавиши ENTER , использование свойства outline: 0; помогает удалить стили фокусирования.
  • Используется автоматическая нумерация элементов списка. Значение счетчика выводится как содержание псевдо-элемента ::after.
.menu li {
  position: relative;
  float: left;
  cursor: pointer;
  height: 120px; width: 200px;
  margin: 10px 0 0 10px;
  color: #fff;
} 

.menu li:hover, .menu li:focus{
  background-image: linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
}

.menu .cover{
  z-index: 2;
}

.menu .cover:focus{
  outline: 0;
}

/* -------------------------------- */

.menu li::after{
  content: counter(li);
  counter-increment: li;
  font: italic bold 10px serif, georgia;
  position: absolute;
  color: rgba(255,255,255,.1);
  opacity: 0;
  transition: all .2s ease-out;
}      

.menu li:hover::after, .menu li:focus::after{
  font-size: 100px;
  opacity: 1;
}

.menu .cover::after{
  z-index: -1;
}

Устанавливаем поля и цвета для элементов li

Выше мы использовали свойство margin: 10px 0 0 10px; для добавления пространства между элементами, а теперь надо подправить значения поле для некоторых элементов. Также зададим цвета для элементов li и соответствующих им кнопок закрытия и окон содержания.

В данном случае, для задания цвета классов .content и .close для каждого элемента li, было бы хорошо использовать декларацию  background: inherit;. Но по причине плохой поддержки в браузерах придется идти сложным путем.

.menu li:nth-child(1),
.menu li:nth-child(2),
.menu li:nth-child(3){
  margin-top: 0;
}

.menu li:nth-child(1),
.menu li:nth-child(4),
.menu li:nth-child(7){
  margin-left: 0;
}

/* -------------------------------- */       

.menu li:nth-child(1),
.menu li:nth-child(1) .content,
.menu li:nth-child(1) .close{
  background-color: #2c618f;
}         

.menu li:nth-child(2),
.menu li:nth-child(2) .content,
.menu li:nth-child(2) .close{
  background-color: #91ab31;
}   

.menu li:nth-child(3),
.menu li:nth-child(3) .content,
.menu li:nth-child(3) .close{
  background-color: #714a28;
}

.menu li:nth-child(4),
.menu li:nth-child(4) .content,
.menu li:nth-child(4) .close{
  background-color: #e58600;
}

.menu li:nth-child(5),
.menu li:nth-child(5) .content,
.menu li:nth-child(5) .close{
  background-color: #c33a00;
}

.menu li:nth-child(6),
.menu li:nth-child(6) .content,
.menu li:nth-child(6) .close{
  background-color: #7f5dac;
}

.menu li:nth-child(7),
.menu li:nth-child(7) .content,
.menu li:nth-child(7) .close{
  background-color: #5672b7;
}

.menu li:nth-child(8),
.menu li:nth-child(8) .content,
.menu li:nth-child(8) .close{
  background-color: #69003f;
}

.menu li:nth-child(9),
.menu li:nth-child(9) .content,
.menu li:nth-child(9) .close{
  background-color: #393043;
}

Вот такой вид будет у нашего меню на текущий момент:

 

Заголовок, содержание и кнопка закрытия

Обратите внимание на стили для окна с классом .content:

  • Когда к нему добавляется класс .expanded, его высота и ширина растягиваются, чтобы накрыть весь список.
  • Смотрите на комментарии в коде, чтобы определить реакцию элементов в сетке при включении.
/* -------------------------------- */

.menu .content{
  opacity: 0; display: none\9;
  overflow: hidden;
  font: 12px Arial, Helvetica;
  position: absolute;
  height: 120px; width: 200px; /* В идеале: height: 100%; width: 100%; , но будет работать только в FF */
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out; 
  -o-transition: all .3s ease-out;  
  transition: all .3s ease-out;      
}  

.menu .expanded{
  opacity: .95; display: block\9;
  overflow: visible;
  padding: 40px;
  height: 300px; width: 540px; /* Покрываем всю область */
}

.menu li:nth-child(3n) .content{ /* 3,6,9 */
  right: 0;
}

.menu li:nth-child(3n-1) .expanded{ /* 2,5,8 */
  left: 50%;
  margin-left: -310px;
}

.menu li:nth-child(7) .content, /* 7,8,9 */
.menu li:nth-child(8) .content,
.menu li:nth-child(9) .content{
  bottom: 0;
}                      

.menu li:nth-child(4) .expanded, /* 4,5,6 */
.menu li:nth-child(5) .expanded,
.menu li:nth-child(6) .expanded{
  margin-top: -190px;
  top: 50%;
} 

/* -------------------------------- */    

.menu .title{
  position: absolute;
  height: 100%; width: 100%;
  text-align: center;
  font: italic bold 1em/120px 'trebuchet MS', Arial, helvetica;
  opacity: .2;
}

.menu li:hover .title{
  opacity: .7;
}    

/* -------------------------------- */

.menu .close {
  display: none;
  border: 5px solid #fff;
  color: #fff;
  cursor: pointer;
  height: 40px; width: 40px;
  font: bold 20px/40px arial, helvetica;
  position: absolute;
  text-align: center;
  top: -20px; right: -20px;
  -moz-border-radius: 40px;
  -webkit-border-radius: 40px;
  border-radius: 40px;      
}

.menu .cover .close{
  display: block;
}

Вот так будет выглядеть наше меню после применения всех стилей:

 

jQuery

А вот такой код используется для "оживления" нашего меню:

	  (function(){
	  
		// Добавялем кнопку закрытия каждому блоку
		$('.menu .content').append('<span class="close">x</span>');		
		// Выводим окно
		function showContent(elem){
			hideContent();
			elem.find('.content').addClass('expanded');
			elem.addClass('cover');	
		}
		// Сбрасываем все
		function hideContent(){
			$('.menu .content').removeClass('expanded');
			$('.menu li').removeClass('cover');		
		}
		
		// Когда элемент li нажат, выводим окно с его содержанием и позиционируем поверх всего
		$('.menu li').click(function() {
			showContent($(this));
		});		
		// Содержание будет также выводиться с помощью нажатия клавиши ENTER
		$('.menu li').keypress(function(e) {
			if (e.keyCode == 13) { 
				showContent($(this));
			}
		});

		// Когда нажат верхний правый элемент, сбрасываем все
		$('.menu .close').click(function(e) {
			e.stopPropagation();
			hideContent();
		});		
		// Также сброс происходит по нахатию клавиши ESC
		$(document).keyup(function(e) {
			if (e.keyCode == 27) { 
			  hideContent();
			}
		});
		
	  })();

Содержание будет растягиваться поверх всего меню:

 

Обратная совместимость

Так как свойство opacity плохо поддерживается в старых браузерах, для них нужно использовать display:

opacity: 0; display: none\9;      /* Изначально скрыто */
opacity: .95; display: block\9;   /* Выводим */

Другие особенности CSS3 (трансформации и градиенты) не требуют дополнительных действий.

Также мы используем несколько селекторов CSS3, которые не поддерживаются в старых браузерах. Поэтому, для решения проблемы используется библиотека Selectivizr, так как jQuery включается в наш проект (Selectivzr для работы требует одну из библиотек JavaScript: jQuery, MooTools, Prototype ).

<!--[if (gte IE 6)&(lte IE 8)]>
        <script src="/selectivizr.js"></script>
<![endif]-->

 

Доступность

В HTML5 имеется одна прекрасная особенность - атрибут tabindex можно использовать для любого элемента HTML. Мы применяем его для добавления перехода между пунктами с помощью клавиатуры: <li tabindex="1">.

Нажатие клавиши табуляции будет переключать фокус ввода между элементами, а открывание блоков осуществляется нажатием клавиши ENTER, и закрытие - клавиши ESC:

// ENTER
$('.menu li').keypress(function(e) {
        if (e.keyCode == 13) {
                showContent($(this));
        }
});

// ESC
$(document).keyup(function(e) {
        if (e.keyCode == 27) {
          hideContent();
        }
});

 

Готово!

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/46CdZSDwEdA/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Интерактивное меню на CSS3 и jQuery | | 2012-06-19 11:58:19 | | Статьи Web-мастеру | | В данном уроке мы сделаем интерактивное оригинальное меню с использованием CSS3 и jQuery. ИдеяНа экране аккуратно выстроены блоки, а при нажатии на блок выводится скрытое содержание. Вывод экрана с | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: