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

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

ОБСУЖДЕНИЕ

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

Горизонтальное меню в виде куба «Boxes Menu»
Просмотров: 1311  Скачан: 317 раз  Комментариев в теме: 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Фиксированная панель с навигацией н...

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

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

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

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

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

Меню с фоновым изображением «Tab Menu»Меню с фоновым изображением «Tab Me...

Меню с фоновым изображением, при переходе по разделам меню, выбранный вами раздел......

Jquery меню горизонтальноеJquery меню горизонтальное с анимир...

Оригинальное Jquery меню для вашего сайта с анимированным фоном, меню представлено в трёх вариантах на ваш выбор....

Выпадающее меню на css3Выпадающее меню на css3

Красивое выпадающее меню с применением иконического шрифта, меню полностью на css3......
Интересные публикации:

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

Красивое горизонтальное меню, используется изображения и анимация текста....

Шаблон Dual FlowШаблон Dual Flow

Отличный шаблон построенный на HTML5, на главной странице располагается слайдер, есть галерея, выпадающее меню, форма обратной связи с Google Maps......

Социальные иконки на css3Социальные иконки на css3

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

WebDesignWebDesign

Стильный шаблон построенный на HTML5, в шапке располагается слайдер, по всей ширине страницы, есть портфолио......

Контактная форма (дизайн)Контактная форма (дизайн)

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

4Images 1.7.11 RUS4Images 1.7.11 RUS

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

Полноэкранное меню на css и JQueryПолноэкранное меню на css и JQuery

Полно-экранное меню на css и Jquery с меняющимся фоном....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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