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

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

ОБСУЖДЕНИЕ

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

Слайд меню с помощью css3 и JQuery
Просмотров: 926  Скачан: 177 раз  Комментариев в теме: 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>
Материалы по теме:

Эффектное вертикальное менюЭффектное вертикальное меню

Креативное раскрывающиеся меню, хорошо подойдёт к нестандартному дизайну......

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

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

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

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

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

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

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

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

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

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

Вертикальное многоуровневое меню следующее за курсоромВертикальное многоуровневое меню следующ...

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

Мульти слайдер с подпунктами «Multi-Item Slider»Мульти слайдер с подпунктами «Multi-Item...

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

Слайдер на jQuery «Featured Content Slider»Слайдер на jQuery «Featured Content Slid...

Лёгкий слайдер с авто-листанием на jquery, в слайдере вы множите полноценно использовать текст, изображения....

Прозрачный аккордеон с помощью css и jqueryПрозрачный аккордеон с помощью css и jqu...

Прозрачный вертикальный аккордеон, с плавным эффектом раскрытия......

Чекбокс на css3Чекбокс на css3

Чекбокс имитирующий реалистично кнопку включения, идея в принципе неплохая, но......

Мега cборка социальных кнопок на css +300Мега cборка социальных кнопок на css +30...

Сборка +300 социальных кнопок , это 300 разных социальных кнопок созданных на css, которые без сомнения украсят любой сайт....

ChromeGTChromeGT

Оригинальный html шаблон ChromeGT имеющий 5 цветовых стилей, галерею с миниатюрами, красивый слайдер в трёх видах (изображения, контент, 3D (Flash), с...

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

Оригинальное Jquery меню для вашего сайта с анимированным фоном, меню представлено в трёх вариантах на ваш выбор....
  • Текущий 1.50/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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