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

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

ОБСУЖДЕНИЕ

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

Горизонтальное меню в виде куба «Boxes Menu»
Просмотров: 1096  Скачан: 283 раз  Комментариев в теме: 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>
Материалы по теме:

Многоуровневое горизонтальное меню на css3Многоуровневое горизонтальное меню ...

Отличное горизонтальное выпадающее многоуровневое меню на css3....

Горизонтальное меню на jQuery «Slick Menu»Горизонтальное меню на jQuery «Slic...

Меню в довольно интересном стиле, меню раскидано в виде картинок, при наведении курсора мыши на картинку......

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

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

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

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

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

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

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

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

4Images 1.7.11 RUS4Images 1.7.11 RUS

Это отличная фото-галерея с довольно сильным функционалом....

Кнопка с анимацией на css3Кнопка с анимацией на css3

Красивая анимационная кнопка на css3, при наведении курсора на кнопку, с левой стороны......

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

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

Галерея в сетку с помощью jQueryГалерея в сетку с помощью jQuery

Картинки расположены в ряд по сетке с наложенным на них затемнением, при наведении курсора на картинку, затемнение......

Горизонтальное прокручивающиеся меню «Scrollable Menu»Горизонтальное прокручивающиеся меню «Sc...

Прокручивающиеся меню в виде картинок, меню фиксируется внизу страницы, при наведении курсора мыши на......

Красивые кнопки на css3Красивые кнопки на css3

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

FlavorFlavor

Flavor - это мощная тема для wordpress которая укомплектована огромным функционалом и включает в себя все возможности для организации полноценного ин...
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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