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

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

ОБСУЖДЕНИЕ

Слайд меню для сайта

Слайд меню с помощью css3 и JQuery
Просмотров: 1085  Скачан: 217 раз  Комментариев в теме: 0

Красивое слайд меню для сайта - это довольно креативная идея создания такого меню с помощью css3 и jquery, суть в том, когда вы наводите курсор мыши на любой пункт меню, с левой стороны выскакивает подсказка к этому пункту. Изначально меню довольно крупное, это можно исправить путём изминения параметров в css.

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

 

HTML

<div id="slidingMenuDesc" class="slidingMenuDesc">
    <div><span>Maybe that's what life is... a wink of the eye and winking stars.</span></div>
    <div><span>Every man dies. Not every man really lives.</span></div>
    <div><span>It is your work in life that is the ultimate seduction.</span></div>
    <div><span>It's the friends you can call up at 4 a.m. that matter. </span></div>
    <div><span>We are time's subjects, and time bids be gone. </span></div>
</div>
<ul id="slidingMenu" class="slidingMenu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Get a quote</a></li>
</ul>

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

 

CSS

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

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

 

JS

<script type="text/javascript" src="js/jquery-2.0.1.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/BabelSans_500.font.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
    Cufon.replace('a, span').CSS.ready(function() {
        var $menu = $("#slidingMenu");
        var $selected= $menu.find('li:first');
        var $moving= $('<li />',{
            className: 'move',
                top: $selected[0].offsetTop + 'px',
                width: $selected[0].offsetWidth + 'px'
            });
        $('#slidingMenuDesc > div').each(function(i){
            var $this = $(this);
            $this.css('top',$menu.find('li:nth-child('+parseInt(i+2)+')')[0].offsetTop + 'px');
        });
        $menu.bind('mouseleave',function(){
            moveTo($selected,400);
        })
        .append($moving)
        .find('li')
        .not('.move')
        .bind('mouseenter',function(){
            var $this = $(this);
            var offsetLeft = $this.offset().left - 20;
            $('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':offsetLeft+'px'},400, 'easeOutExpo');
            moveTo($this,400);
        })
        .bind('mouseleave',function(){
            var $this = $(this);
            var offsetLeft = $this.offset().left - 20;
            $('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':'0px'},400, 'easeOutExpo');
        });;
        function moveTo($elem,speed){
            $moving.stop(true).animate({
                top: $elem[0].offsetTop + 'px',
                width: $elem[0].offsetWidth + 'px'
            }, speed, 'easeOutExpo');
        }
    }) ;
});
</script>
Материалы по теме:

Вертикальное меню на css (Аккордеон)Вертикальное меню на css (Аккордеон)

Вертикальное меню аккордеон на css, хорошо подойдёт сайту информационного характера......

Вертикальное мульти менюВертикальное мульти меню

Вертикальное мульти-меню неплохое решение если вам нужно вывести на сайте огромного количества пунктов......

Слайд эффект с помощью JavaScriptСлайд эффект с помощью JavaScript

Эффект в виде слайда, реализован с помощью javascript...

Вертикальное меню с плавным увеличением значковВертикальное меню с плавным увеличением ...

Красивое вертикальное меню, реализованное с помощью JavaScript...

Функциональное вертикальное меню «Tab Menu»Функциональное вертикальное меню «Tab Me...

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

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

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

Вертикальное меню с прокруткой на JQueryВертикальное меню с прокруткой на JQuery

Меню с прокруткой, реализованое с помощью jquery, главная особенность такого меню......
Интересные публикации:

Слайдер с элементом HTML5 СаnvasСлайдер с элементом HTML5 Саnvas

Слайдер построенный с применением элемента HTML5 Саnvas, этот элемент позволяет создавать и изменять некоторую графику, так же его можно......

Rotator на css и jQueryRotator на css и jQuery

Стильный Rotator для вашего сайта, ротатор довольно информативный, имеются миниатюры, слайд-шоу, при клике по......

Круглая кнопка с анимационным фоном на css3Круглая кнопка с анимационным фоном на c...

Красивая кнопка на css3, анимация фона происходит при наведении курсора на кнопку....

Horse ClubHorse Club

Лёгкий html шаблон в тёмных тонах, посвящённый верховой езде и всему что с этим связано. В шаблоне имеется красивый слайдер и галерея......

Фиксированная форма обратной связи на PHP и jQueryФиксированная форма обратной связи на PH...

Довольно простая форма обратной связи без капчи, проверки полей, сообщений об ошибке и всего прочего......

Good Inc v1.2.1Good Inc v1.2.1

Стильный журнальный шаблон для WordPress в светлом минималистском стиле....

ClockerClocker

Универсальный html шаблон Clocker, на главной странице располагается слайдер, есть портфолио, выпадающее меню, заготовка контактной формы......
  • Текущий 1.44/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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