Создаем меню со случайным поворотом пунктов с помощью jQuery и CSS3

9 ноября 2013 | Опубликовано в css | 14 Комментариев »

В этом уроке мы создадим отличное меню с выезжающей областью содержимого. Мы используем неряшливый стиль, так как хотим, чтобы оно выглядело немного беспорядочно: мы сделаем пунктам меню случайный угол поворота, используя свойство CSS3 “transform”. Так что когда мы загрузим страницу, все пункты меню будут расположены по-разному, что придаст случайный и творческий вид этой нерегулярной странице.

Демо – Исходный код

Область содержимого видна изначально, но уезжает и выезжает обратно каждый раз, когда происходит нажатие на пункт меню. Так же мы сделаем случайным угол поворота области содержимого.

Пожалуйста, заметьте, что эффект поворота не будет работать в Internet Explorer, а так же в других браузерах, которые еще не поддерживают CSS3.

Ресурсы

Давайте начнем с изображений, которые нужны нам для этого урока. По ссылке ниже можно найти милые «бумажные» фоны. Пожалуйста, проверяйте права на каждый источник, из которого вы скачиваете.

http://www.creativecloseup.com/30-great-free-paper-backgrounds-and-textures

В этом уроке было использовано изображение, которое можно найти здесь:

http://www.flickr.com/photos/playingwithpsp/2583644089/sizes/o/

И фоновое изображение для пунктов меню можно найти здесь:

http://tympanus.net/Tutorials/GrungyRandomSlideOut/item.png

Разметка

Мы начнем с разметки области содержимого:

<div id="content">
    <div id="home" class="text">
        <!-- Write your content here -->
    </div>
    <div id="about" class="text" style="display:none;">
        <!-- Write your content here -->
    </div>
    <!-- Other content items -->
</div>

У меню будет такая разметка:

<ul id="navigation">
    <li class="home"><a title="Home">Home</a></li>
    <li class="about"><a title="About">About</a></li>
    <li class="search"><a title="Search">Search</a></li>
    <li class="photos"><a title="Photos">Photos</a></li>
    <li class="contact"><a title="Contact">Contact</a></li>
</ul>

CSS

У блока содержимого и внутреннего элемента будет такой стиль:

#content{
    width:824px;
    height:600px;
    margin:-200px auto 0px auto;
    background:transparent url(bg.gif) no-repeat bottom left;
}
#content h1{
    color:#7F6137;
    text-shadow:1px 1px 1px #fff;
}
#content p{
    margin:20px;
    width:600px;
}
#content .text{
    padding:300px 0px 0px 100px;
}

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

У меню будет такой стиль:

ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 200px;
    list-style: none;
    z-index:999999;
}
ul#navigation li {
    display:inline;
    float:left;
    width:100px;
    margin-left:1px;
}
ul#navigation li a {
    display: block;
    font-weight: bold;
    text-shadow: 1px 1px 1px #fff;
    float: left;
    width: 100px;
    height: 35px;
    color: #603d05;
    background: transparent url(item.png) no-repeat bottom right;
    text-decoration:none;
    text-align: center;
    padding-top: 80px;
    margin-top: -40px;
    cursor: pointer;
}

Так как пункты меню будут немного выезжать, когда мы наведем на них указатель, мы изначально установим верхнему внешнему отступу отрицательное значение. Само меню будет зафиксировано, что означает, даже если у Вас много содержимого, то при прокрутке меню все равно всегда будет на самом верху страницы.

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

Давайте добавим немного магии!

Javascript

Вот функция Javascript, которая добавит всю магию:

$(function() {
    var d=300;
    $('#navigation a').each(function(){
        var $this = $(this);
        var r=Math.floor(Math.random()*41)-20;
        $this.css({
            '-moz-transform':'rotate('+r+'deg)',
            '-webkit-transform':'rotate('+r+'deg)',
            'transform':'rotate('+r+'deg)'
            });
        $('#content').css({
            '-moz-transform':'rotate('+r+'deg)',
            '-webkit-transform':'rotate('+r+'deg)',
            'transform':'rotate('+r+'deg)'
            });
        $this.stop().animate({
            'marginTop':'-70px'
        },d+=150);
    });
    $('#navigation > li').hover(
        function () {
            var $this = $(this);
            $('a',$this).stop().animate({
                'marginTop':'-40px'
            },200);
        },
        function () {
            var $this = $(this);
            $('a',$this).stop().animate({
                'marginTop':'-70px'
            },200);
        }
    ).click(function(){
        var $this = $(this);
        var name = this.className;
        $('#content').animate({marginTop:-600}, 300,function(){
            var $this = $(this);
            var r=Math.floor(Math.random()*41)-20;
            $this.css({
                '-moz-transform':'rotate('+r+'deg)',
                '-webkit-transform':'rotate('+r+'deg)',
                'transform':'rotate('+r+'deg)'
                });
            $('#content div').hide();
            $('#'+name).show();
            $this.animate({marginTop:-200}, 300);
        })
    });
});

В начале мы создаем случайное число от -20 до 20, которое будет нашим углом поворота. Каждый пункт меню и содержимое будут изначально повернуты случайным образом. Когда мы наведем указатель на пункты меню, они будут немного выезжать, и уезжать назад, когда мышка отодвинута.

Каждый раз, когда мы нажимаем на одну из ссылок меню, показывается соответствующий элемент внутреннего содержания. К тому же область содержимого выезжает и въезжает назад, меняя свой угол поворота.

Кстати, это решение отлично выглядит в Chrome!

Наслаждайтесь!

Демо – Исходный код

Автор урока Mary Lou
Перевод — Дежурка

Смотрите также:

Опубликовано в css, ноября 9, 2013
Метки: css, Jquery, jquery выпадающее меню, верстка, меню css, меню css3, урок css, урок верстка

�

Создаем меню со случайным поворотом пунктов с помощью jQuery и CSS3

Ресурсы

Разметка

CSS

Javascript

Комментарии

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые