qiwi
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Горизонтальное меню в виде куба

Горизонтальное меню в виде куба «Boxes Menu»
Просмотров: 1209  Скачан: 299 раз  Комментариев в теме: 0

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

Шаг 1 - создание разметки

 

HTML

<div class="container">
    <div id="littleBoxes" class="littleBoxes">
        <div class="boxlink bg1" style="top:0px;left:0px;">
            <a href="">About</a>
            <div class="boxcontent">
                <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 class="bg5" style="background-position:-90px 0;top:0px;left:95px;"></div>
        <div class="bg5" style="background-position:-180px 0;top:0px;left:190px;"></div>
        <div class="bg5" style="background-position:-270px 0;top:0px;left:285px;"></div>
        <div class="bg5" style="background-position:0 -90px;top:95px;left:0px;"></div>
        <div class="boxlink bg2" style="top:95px;left:95px;">
            <a href="">Menu</a>
            <div class="boxcontent">
                <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 class="bg5" style="background-position:-180px -90px;top:95px;left:190px;"></div>
        <div class="bg5" style="background-position:-270px -90px;top:95px;left:285px;"></div>
        <div class="bg5" style="background-position:0 -180px;top:190px;left:0px;"></div>
        <div class="bg5" style="background-position:-90px -180px;top:190px;left:95px;"></div>
        <div class="boxlink bg3" style="top:190px;left:190px;">
            <a href="">Chef</a>
            <div class="boxcontent">
                <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 class="bg5" style="background-position:-270px -180px;top:190px;left:285px;"></div>
        <div class="bg5" style="background-position:0 -270px;top:285px;left:0px;"></div>
        <div class="bg5" style="background-position:-90px -270px;top:285px;left:95px;"></div>
        <div class="bg5" style="background-position:-180px -270px;top:285px;left:190px;"></div>
        <div class="boxlink bg4" style="top:285px;left:285px;">
            <a href="">Contact</a>
            <div class="boxcontent">
                <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>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(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();
        $currentBox.css('z-index','1');
        if(current == $currentBox.index()){
            $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{
            $('#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();
                });
            });
            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();
    });
});
</script>
Материалы по теме:

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

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

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

Отличное горизонтальное меню с большое количество пунктов....

Многоуровневое фиксированное меню на cssМногоуровневое фиксированное меню н...

Горизонтальное многоуровневое фиксированного меню в темном стиле...

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

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

Горизонтальное выпадающее меню на cssГоризонтальное выпадающее меню на c...

Меню с выпадающими пунктами на css

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

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

Горизонтальное меню в стиле AppleГоризонтальное меню в стиле Apple

Меню в стиле Apple, созданное полностью на css3.
Интересные публикации:

Оригинальные кнопки с помощью css3Оригинальные кнопки с помощью css3

Оригинальные кнопки на css3, при наведении курсора на кнопку, она изменяет свой вид (растягивается, округляется, перекручивается)....

Аккордеон изображенийАккордеон изображений с помощью css3

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

Горизонтальное анимированное меню на css3Горизонтальное анимированное меню на css...

Горизонтальное меню на css3 с замечательным эффектом....

GridoGrido

Много функциональный шаблон Grido, шаблон обладает огромным набором возможностей его настройки....

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

Неплохое горизонтальное меню с выдвигающимися иконками. Когда вы переходите по навигации, иконки......

Форма обратной связи с админкой PHP, JS, CSS, MySQL, AJAXФорма обратной связи с админкой PHP, JS,...

Универсальная форма обратной связи написанная на PHP, JS, CSS, MySQL, AJAX. Форма довольно гибкая в возможностях, с помощью админки......

Набор градиентных кнопок на css3Набор градиентных кнопок на css3

Неплохой набор кнопок, в нем вы найдёте кнопки разного цвета, (округлённые, прямоугольные, маленькие)....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.0/5( Голосов 8 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить