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

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

ОБСУЖДЕНИЕ

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

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

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

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

Горизонтальное меню в виде куба «Boxes Menu»Горизонтальное меню в виде куба «Bo...

Меню в виде куба с красивым эффектом трансформации....

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

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

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

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

Оригинальное меню в виде клочка бумагиОригинальное меню в виде клочка бум...

Меню в оригинальном стиле, в виде потёртого клочка бумаги....

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

Выпадающее меню в темном стиле, реализованное полностью на css...

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

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

Мульти слайдер с подпунктами «Multi-Item Slider»Мульти слайдер с подпунктами «Multi-Item...

Стильный мульти слайдер с красивым эффектом, отлично подойдёт для интернет магазина, несомненно идея при создании этого слайдера, была взята в Aplle.....

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

Представлено 12 кнопок с разной анимацией, так как кнопки на css3, в старых браузерах полноценно они работать не будут....

Оригинальное меню в виде клочка бумагиОригинальное меню в виде клочка бумаги

Меню в оригинальном стиле, в виде потёртого клочка бумаги....

Горизонтальное меню в виде куба «Boxes Menu»Горизонтальное меню в виде куба «Boxes M...

Меню в виде куба с красивым эффектом трансформации....

Радиоактивные кнопкиРадиоактивные кнопки

Красивые кнопки с эффектом радиации. Так, как на данный момент не все браузеры поддерживают свойство webkit, то такой эффект будет работать только......

Mazaya v1.0Mazaya v1.0

Mazaya - это современная универсальная новостная тема с оригинальным дизайном и предусмотренным тёмным и светлым стилем....

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

Универсальная форма обратной связи написанная на PHP, JS, CSS, MySQL, AJAX. Форма довольно гибкая в возможностях, с помощью админки......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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