Меню из маленьких блоков с использованием jQuery
3 июля 2014 | Опубликовано в css | Нет комментариев »
В этом уроке мы создадим меню из маленьких блоков, которое анимируются случайным образом, когда происходит нажатие на элемент меню. Нажатый элемент меню разворачивает и раскрывает область содержимого с описанием или ссылками. При следующем нажатии блоки вернутся, восстановив изначальное фоновое изображение.
Демонстрация работы – Скачать исходный код
Давайте начнем.
Разметка
Код HTML будет состоять из главного блока с блоками внутри. В некоторых из вложенных блоков также будет ссылка и блок содержимого. У всех элементов будет абсолютное позиционирование, так что мы обозначим их изначальное позиционирование как inline-style. Еще мы определим расположение фонового изображения для всех элементов, у которых оно есть, чтобы все вместе выстраивало изображение.
<div id="littleBoxes"> <div style="top:0px;left:0px;"> <a href="">About</a> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> <div style="background-position:-90px 0;top:0px;left:95px;"></div> <div style="background-position:-180px 0;top:0px;left:190px;"></div> <div style="background-position:-270px 0;top:0px;left:285px;"></div> <div style="background-position:0 -90px;top:95px;left:0px;"></div> <div style="top:95px;left:95px;"> <a href="">Menu</a> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> <div style="background-position:-180px -90px;top:95px;left:190px;"></div> <div style="background-position:-270px -90px;top:95px;left:285px;"></div> <div style="background-position:0 -180px;top:190px;left:0px;"></div> <div style="background-position:-90px -180px;top:190px;left:95px;"></div> <div style="top:190px;left:190px;"> <a href="">Chef</a> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> <div style="background-position:-270px -180px;top:190px;left:285px;"></div> <div style="background-position:0 -270px;top:285px;left:0px;"></div> <div style="background-position:-90px -270px;top:285px;left:95px;"></div> <div style="background-position:-180px -270px;top:285px;left:190px;"></div> <div style="top:285px;left:285px;"> <a href="">Contact</a> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> </div>
Значения отступов вычисляются из ширины и высоты блоков, которые равны 90px, плюс рамка 2px и внешний отступ 1px.
Давайте рассмотрим стили.
CSS
Наш основной блок будет расположен относительно и отцентрован по вертикали на странице:
.littleBoxes{ width:350px; height:350px; margin:0 auto; position:relative; }
Маленькие блоки будут абсолютно позиционированы, и мы добавим им приятную тень блока:
.littleBoxes > div{ position:absolute; width:90px; height:90px; text-align:center; border:2px solid white; overflow:hidden; background-color:#f7f7f7; -moz-box-shadow:0px 0px 3px #555; -webkit-box-shadow:0px 0px 3px #555; box-shadow:0px 0px 3px #555; background-position:center center; z-index:999; }
У элементов ссылок будут повторяющиеся фоновые изображения. Мы задаем значение высоты строки равным высоте блока и добавляем приятную тень блока, которая появится, только когда элемент развернется:
.littleBoxes div a{ text-transform:uppercase; font-size: 18px; font-weight:bold; letter-spacing:-1px; display:block; line-height:90px; text-decoration:none; color:#fff; background:#91EF4A url(../bgItem.png) repeat-x top left; outline:none; text-shadow:1px 1px 1px #888; -moz-box-shadow:1px 1px 3px #777; -webkit-box-shadow:1px 1px 3px #777; box-shadow:1px 1px 3px #777; }
У блока с описанием будет такой стиль:
.littleBoxes div.boxcontent{ width:334px; height:246px; text-align:left; padding:10px; font-size:16px; background-color:#f0f0f0; border:2px solid #fff; margin:10px 0px 0px 10px; text-shadow:1px 1px 1px #fff; -moz-box-shadow:1px 1px 3px #777; -webkit-box-shadow:1px 1px 3px #777; box-shadow:1px 1px 3px #777; opacity:0.8; display:none; }
Нам нужно установить свойство display:none, так как мы хотим, чтобы блок появлялся только после того, как развернется соответствующий блок ссылки.
И, наконец, мы определим фоновые изображения в отдельных классах:
.bg1, .bg2, .bg3, .bg4{ background-repeat:no-repeat; } .bg1{ background-image:url(../images/1.jpg); } .bg2{ background-image:url(../images/2.jpg); } .bg3{ background-image:url(../images/3.jpg); } .bg4{ background-image:url(../images/4.jpg); } .bg5{ background-image:url(../images/5.jpg); }
Нам только останется переключать классы в соответствии с тем, на какой элемент ссылки мы нажали.
Теперь давайте добавим магию.
JavaScript
Для случайно выбираемого эффекта разлетания нам нужно сохранить изначальное расположение каждого блока, чтобы можно было вернуть их на места, когда мы снова нажмем на элемент меню.
Когда мы нажимаем на элемент меню, случайным образом анимируется расположение блоков и текущий нажатый блок развернется и на полные ширину и высоту главного блока, или на любой другой размер. Также появится блок с описанием.
Если мы нажимаем на развернутый элемент меню, мы снова свернем блок и вернем другие разбросанные блоки.
Мы используем jQuery easing plugin для разворачивания и сворачивания блоков с элементами ссылок.
$(function() { /* Цель - сохранить изначальное расположение каждого блока */ var divinfo = {"initial": []}; /* порядковый номер выбранного / нажатого блока */ var current = -1; /* Мы сохраняем порядковый номер и значения верхнего и левого краев каждого блока */ $('#littleBoxes > div').each(function(){ var $this = $(this); var initial = { 'index' : $this.index(), 'top' : $this.css('top'), 'left' : $this.css('left') }; divinfo.initial.push(initial); }); /* событие нажатия для якорей в блоках */ $('#littleBoxes a').bind('click',function(e){ var $this = $(this); var $currentBox = $this.parent(); /* задаем значение z-index ниже, чем у всех других блоков, чтобы увидеть анимацию других блоков сверху */ $currentBox.css('z-index','1'); /* Если мы нажимаем на развернутый блок, */ if(current == $currentBox.index()){ /* то возвращаем его к изначальному расположению, сохраненному в divinfo obj: уменьшаем ширину и высоту и задаем значения верхнего и левого углов */ $currentBox.stop().animate({ 'top' : divinfo.initial[$currentBox.index()].top, 'left' : divinfo.initial[$currentBox.index()].left, 'width' : '90px', 'height' : '90px' },800,'easeOutBack').find('.boxcontent').fadeOut(); $('#littleBoxes > div').not($currentBox).each(function(){ var $ele = $(this); var elemTop = divinfo.initial[$ele.index()].top; var elemLeft = divinfo.initial[$ele.index()].left; $ele.stop().show().animate({ 'top' : elemTop, 'left' : elemLeft, 'opacity' : 1 },800); }); current = -1; } /* Если мы нажимаем на маленький блок, */ else{ /* то случайным образом анимируются другие блоки. Math.floor(Math.random()*601) - 150 создает случайное число между -150 и 450. Этот диапазон предполагает изначальные значения левых и верхних углов элементов. Это не точный диапазон, так как нам придется вычислять диапазон для каждого блока. В любом случае, он нам подходит. */ $('#littleBoxes > div').not($currentBox).each(function(){ var $ele = $(this); $ele.stop().animate({ 'top' : (Math.floor(Math.random()*601) - 150) +'px', 'left': (Math.floor(Math.random()*601) - 150) +'px', 'opacity':0 },800,function(){ $(this).hide(); }); }); /* развернуть нажатый блок, а также плавно показать содержимое (fadeIn boxcontent) */ var newwidth = 379; var newheight = 379; $currentBox.stop().animate({ 'top' : '0px', 'left' : '0px', 'width' : newwidth +'px', 'height': newheight+'px' },800,'easeOutBack',function(){ current = $currentBox.index(); $(this).find('.boxcontent').fadeIn(); }); } e.preventDefault(); }); });
Вот и все. Надеемся, вам понравился этот урок.
Демонстрация работы – Скачать исходный код
Автор урока Mary Lou
Перевод — Дежурка
Смотрите также:
549