RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

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

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

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

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

Многоуровневое горизонтальное меню на css3Многоуровневое горизонтальное меню ...

Отличное горизонтальное выпадающее многоуровневое меню на css3....

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

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

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

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

Горизонтальное выпадающее меню на cssГоризонтальное выпадающее меню на c...

Меню с выпадающими пунктами на css

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

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

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

Меню в довольно интересном стиле, меню раскидано в виде картинок, при наведении курсора мыши на картинку......

Вертикальное многоуровневое меню на css и JQueryВертикальное многоуровневое меню на css ...

Вертикальное многоуровневое меню с неограниченной вложенностью на основе jQuery....

Форма обратной связи с админкой PHP, JS, CSS, MySQL, AJAXФорма обратной связи с админкой PHP, JS,...

Универсальная форма обратной связи написанная на PHP, JS, CSS, MySQL, AJAX. Форма довольно гибкая в возможностях, с помощью админки......

Аккордеон изображенийАккордеон изображений с помощью css3

Красивый горизонтальный аккордеон для вывода изображений на сайте....

3D галерея3D галерея

Красивая 3D галерея реализована с помощью JS, картинки хаотично раскиданы, при нажатии на картинку, происходит......

30 анимационных кнопок на CSS330 анимационных кнопок на CSS3

Неплохие анимационные кнопки на css3, имеются 30 кнопок, в том числе и 3D....

Адаптивная карусель, плагин jQuery «Elastislide»Адаптивная карусель, плагин jQuery «Elas...

Красивая адаптивная карусель для вашего сайта, а если быть точнее, то это плагин «Elastislide», особенности такого плагина, заключаются в умении адапт...
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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