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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

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

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

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

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

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

Социальные иконки на css3Социальные иконки на css3

Социальные иконки на css3, при наведении курсора на иконку, она делается полупрозрачной....

Mercina v3.4Mercina v3.4

Mercina - это современный шаблон для wordpress разработан специально для сайтов портфолио с многоцелевой тематикой....

4Images 1.7.11 RUS4Images 1.7.11 RUS

Это отличная фото-галерея с довольно сильным функционалом....

Кнопка вкл/выкл (checkbox) на CSS3Кнопка вкл/выкл (checkbox) на CSS3

Привлекательная кнопка с ряда (checkbox), как все вы наверное уже догадались, кнопка имитирует реалистично кнопку включения....

WebDesignWebDesign

Стильный шаблон построенный на HTML5, в шапке располагается слайдер, по всей ширине страницы, есть портфолио......

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

Меню в оригинальном стиле, в виде потёртого клочка бумаги....
  • Текущий 1.44/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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