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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

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

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

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

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

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

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

Pack кнопок #2 на CSS3Pack кнопок #2 на CSS3

Pack кнопок 2, в паке представлены 20 кнопок на css3 с разными иконками....

Шаблон Desire Night ClubШаблон Desire Night Club

HTML шаблон ночного клуба, на главной странице располагается привлекательный слайдер, есть галерея, видео проигрыватель, заготовлена контактная форма ...

Социальное меню с подписью на css3Социальное меню с подписью на css3

Стильное социальное меню на css3, при наведении на иконку, она плавно прокручивается, одновременно с анимацией иконки, плавно появляется подпись....

Прокручивающиеся картинкиПрокручивающиеся картинки

Если вы ищите способ как плавно прокрутить картинку, или что-то в этом роде, воспользуйтесь представленным способом....

Слайд эффект с помощью JavaScriptСлайд эффект с помощью JavaScript

Эффект в виде слайда, реализован с помощью javascript...

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

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

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

Оригинальные кнопки на css3, вам дано на выбор несколько кнопок, каждая по своему привлекательна, без сомнения посетители вашего сайта не останутся ра...
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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