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

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

ОБСУЖДЕНИЕ

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

Оригинальное меню в виде клочка бумаги
Просмотров: 954  Скачан: 185 раз  Комментариев в теме: 0

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

Шаг 1 - создание разметки

 

HTML

<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>
<div id="content">
    <div id="home" class="text">
        <h1>Amazing grungy slide out stuff</h1>
        <p>This is an example of some text!</p>
        <p>If anybody looks at a picture by Claude Monet from the point of view of
        a Raphael, he will see nothing but a meaningless jargon of wild
        paint-strokes. And if anybody looks at a Raphael from the point of view
        of a Claude Monet, he will, no doubt...</p>
    </div>
    <div id="about" class="text" style="display:none;">
        <h1>Some amazing about section</h1>
        <p>This is an example of some text!</p>
        <p>In tone drawing there is not only the shape of the masses to be
        considered, but their values--that is, their position in an imagined
        scale from dark to light. The relation of the different tones in this
        way--the values, as it is called--is an extremely important matter in
        painting.</p> 
    </div>
    <div id="search" class="text" style="display:none;">
        <h1>Search the world!</h1>
        <p>This is an example of some text!</p>
        <p><label for="searchinput">Search for:</label><input type="text"/></p>
    </div>
    <div id="photos" class="text" style="display:none;">
        <h1>Some awesome photos</h1>
        <p>This is an example of some text!</p>
        <p>
            <img alt="img" src="images/img1.png" width="170" height="120"/>
            <img alt="img" src="images/img1.png" width="170" height="120"/>
            <img alt="img" src="images/img1.png" width="170" height="120"/>
        </p>
    </div>
    <div id="contact" class="text" style="display:none;">
        <h1>Get in touch</h1>
        <p>This is an example of some text!</p>
        <p>Some contact details...</p>
    </div>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-2.0.1.js"></script>
<script type="text/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); 
        }) 
    });
});
</script>
Материалы по теме:

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

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

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

Стильное горизонтальное меню с ползунком, который следует за курсором мыши....

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

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

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

Красивое раскрывающиеся горизонтальное меню, реализованное на css и jquery. Меню отлично подойдёт для сайта дизайнера или фотографа....

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

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

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

Меню в стиле Apple, созданное полностью на css3.

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

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

AirlinesAirlines

Красивый шаблон Airlines на HTML5, хорошо подойдёт для корпоративного сайта....

Набор элементов дизайна «CSS3 Responsive Forms Pack»Набор элементов дизайна «CSS3 Responsive...

Это профессиональный набор элементов дизайна ( кнопки, формы, Checkbox и многое другое)....

Black and WhiteBlack and White

Black and White - современная премиум тема для wordpress в стиле минимализм и мощным функционалом....

Форма обратной связи на PHP, AJAX, JSФорма обратной связи на PHP, AJAX, JS

Красивая форма обратной связи для вашего сайта на php, ajax и js. Форма может похвастаться капчей, проверкой полей формы на валидность и сообщениях об...

Скрипт комментариев на PHPСкрипт комментариев на PHP

Скрипт комментариев написанный на php и работает в связке с MYSQL....

Cлайдер КарусельCлайдер Карусель

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

Набор плоских форм «Formicon Flat Forms Pack»Набор плоских форм «Formicon Flat Forms ...

Formicon Flat Forms Pack - это набор плоских форм, построенных на Bootstrap 3.0. Набор содержит в себе различные формы и все они имеют разные стили...
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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