Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создаем меню со случайным поворотом пунктов с помощью 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
Перевод — Дежурка

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




Комментарии

  1. Саша
    Thumb up Thumb down 0

    нерегулярное? збс из вас переводчики

    Ответить

  2. Merziuz
    Thumb up Thumb down 0

    DdAeDg pills2sale.com viagra online

    Ответить

  3. Trinidad
    Thumb up Thumb down 0

    I'm a partner in orlistat prices uk The Miami Herald is pleased to provide this opportunity to share information, experiences and observations about what's in the news. Some of the comments may be reprinted elsewhere on the site or in the newspaper. We encourage lively, open debate on the issues of the day, and ask that you refrain from profanity, hate speech, personal comments and remarks that are off point. Thank you for taking the time to offer your thoughts.

    Ответить

  4. Devon
    Thumb up Thumb down 0

    How would you like the money? mts machine whey protein uk The company also said that it’s worked to give the G2 a long battery life even though the new buttons occupy space traditionally used to house a battery. In fact, the company claims that the G2’s battery will hold a charge longer than previous LG models, and should easily last a full day on a single charge.

    Ответить

  5. Brian
    Thumb up Thumb down 0

    I've got a part-time job keflex good for mrsa Members of Congress from high-risk flood states want to delay the higher rates coming into effect so they can gather more information on the impact on property owners, but with next Tuesday's deadline, time is running out.

    Ответить

  6. Edwardo
    Thumb up Thumb down 0

    Will I get travelling expenses? coupon for generic cymbalta In London, Scotland Yard said the Portuguese prosecutor's decision «follows the discovery of new lines of enquiry as a result of an internal review of their original investigation» by the Portuguese police.

    Ответить

  7. Corey
    Thumb up Thumb down 0

    I've just graduated celecoxib 200 mg 30 cpsulas precio He had an impact on the young Cubs, especially those from his homeland, the Dominican Republic. Soriano took Starlin Castro into his home when the shortstop was called up in 2010 because that's what the Yankees did for him. There were more than a few players in tears in the Cubs clubhouse when Soriano said goodbye.

    Ответить

  8. Mckinley
    Thumb up Thumb down 0

    What company are you calling from? buy cialis generic india This poster campaign is unlikely, in itself, to solve the problem that expanded so massively under the last Labour government. But you surely can’t blame the Coalition for trying to enforce the law.

    Ответить

  9. Tristan
    Thumb up Thumb down 0

    An envelope levoit air purifier coupon code A second person familiar with the situation said ChiefOperating Officer Marco Patuano could take up Bernabe's powersto ensure management continuity and that its core shareholderswould name a new chairman with a broadly representation role.

    Ответить

  10. Anderson
    Thumb up Thumb down 0

    Photography jean pierre gagick instagram The OFT said it is considering whether to take action. In a statement, the watchdog said: “Over the next month we will be holding discussions about these concerns with the industry, the Government and regulators.

    Ответить

  11. Monroe
    Thumb up Thumb down 0

    What part of do you come from? famciclovir 125 mg coupon Often, it is a parking lot of strollers, a basic part of life for homeless families: these rolling mini-worlds are the single unchanging point of reference that many homeless kids know. The strollers proceed awkwardly through the security scanners, they queue up in a caravan going back and forth in lines in front of the admission desk, they occupy the middle of the floor of the building’s elevators while standees press themselves against the walls. Plastic bags of possessions drape the stroller handles, sippy cups of juice fill the cup-holders, Burger King paper crowns ride in the carrying racks beneath. Kids sleep peacefully while consultations and long waits go on around them. Some lean back and watch with a numbed, listless patience that suggests how much of their childhood has already been spent like this. Others hunch and squirm and scream their heads off.

    Ответить

  12. Rueben
    Thumb up Thumb down 0

    The line's engaged cost of metoprolol What's particularly disturbing about the Times article is how it details the way freshmen congressmen buy in — willingly, but with instruction from their elders — to the system of legal corruption: "After the elections in November, Democratic Party leaders gave a PowerPoint presentation urging their freshman members to spend as much as four hours a day making fund-raising calls while in Washington, " which "adds up to more time than these first-term lawmakers were advised to spend on Congressional business, " the article notes.

    Ответить

  13. Lazaro
    Thumb up Thumb down 0

    I've only just arrived primavie shilajit In July, Motorola forecast revenue to be flat to up 1 percent this year. That was the second time it cut its forecast, both times blaming delayed purchases by its enterprise, rather than government, customers.

    Ответить

Оставить ответ


семь − 3 =

Вставить изображение