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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

Горизонтальное меню с меняющимся фономГоризонтальное меню с меняющимся фо...

Красивое меню, с меняющимся фоном, когда вы переходите по категориям, фон автоматически......

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

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

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

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

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

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

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

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

BuddyBuddy

Buddy - это современный, отвечающий всем требованиям шаблон для WordPress с полной интеграцией и поддержкой BuddyPress....

Magic BoxMagic Box

Лёгкий html шаблон в тёмных тонах сделанный в виде блога, в шапке встроенный довольно привлекательный слайдер......

Шаблон Desire Night ClubШаблон Desire Night Club

HTML шаблон ночного клуба, на главной странице располагается привлекательный слайдер, есть галерея, видео проигрыватель, заготовлена контактная форма ...

Вкладки контента css3Вкладки контента css3

Красивые вкладки контента реализованные с помощью css3...

Softdate Pro v1.3Softdate Pro v1.3

Softdate pro - это социальная платформа знакомств, которая предоставляет возможность общаться с людьми......

Admin PanelAdmin Panel

Шаблон для панели администратора созданный на HTML5, в наличии имеются все необходимые элементы: кнопки, закладки, меню и прочее....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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