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

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

ОБСУЖДЕНИЕ

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

Оригинальное меню в виде клочка бумаги
Просмотров: 834  Скачан: 171 раз  Комментариев в теме: 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>
Материалы по теме:

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

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

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

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

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

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

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

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

Горизонтальное меню на cssГоризонтальное меню на css

Горизонтальное меню реализованное на css, подпункты открываются при наведении курсора......

Горизонтальное анимированное меню на css3Горизонтальное анимированное меню н...

Горизонтальное меню на css3 с замечательным эффектом....

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

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

TanyaCMS 1.0TanyaCMS 1.0

TanyaCMS - это довольно не плохой скрипт вопросов - ответов, скрипт отвечает всем современным требованиям....

Галерея в сетку с помощью jQueryГалерея в сетку с помощью jQuery

Картинки расположены в ряд по сетке с наложенным на них затемнением, при наведении курсора на картинку, затемнение......

MinimoSity v1.1MinimoSity v1.1

Minimosity - стильная тема для wordpress, отлично подойдёт для сайта новостной и журнальной тематики....

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

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

Слайдер картинок на JqueryСлайдер картинок на Jquery

Отличный слайдер картинок для вашего сайта с поддержкой слайд-шоу, также в слайдере имеются две кнопки......

Вертикальное разноцветное меню на css3Вертикальное разноцветное меню на css3

Вертикальное меню в разноцветном стиле, полностью на css3, имеет два стиля (плавное раскрытие и с эффектом подёргивания)....

Прозрачная форма регистрации с прогресс баромПрозрачная форма регистрации с прогресс ...

Стильная прозрачная форма регистрации на css3 и JQuery. В форме имеется прогресс бар показывающий пользователю процесс заполнения формы....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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