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

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

ОБСУЖДЕНИЕ

Слайд эффект для сайта

Слайд эффект с помощью JavaScript
Просмотров: 2666  Скачан: 190 раз  Комментариев в теме: 2

Красивый слайд эффект для сайта, который реализован с помощью javascript. Такая фишка довольно популярная, думаю каждый видел на каком нибудь ресурсе, что то в этом роде.

И так, что же это за эффект такой. Все очень просто, когда вы наводите на ссылку курсор мыши, она плавно сдвигаеться в сторону ( ну или куда именно будет сдвигаться, решать уже вам), такой эффект реализованый с помощью javascript, имеет преимущество перед популярным свойством -webkit-transition, с помощью которого можно тоже плавно сдвигать эллементы, но эффект реализований с помощью javascript, будет работать во всех браузерах включая IE, а свойство -webkit-transition только в соврименных браузерах с поддержкой css3.

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

 

HTML

<div id="navigation-block">
    <ul id="sliding-navigation">
    <li class="sliding-element"><h3>Навигация</h3></li>
        <li class="sliding-element"><a href="#">Link 1</a></li>
        <li class="sliding-element"><a href="#">Link 2</a></li>
        <li class="sliding-element"><a href="#">Link 3</a></li>
        <li class="sliding-element"><a href="#">Link 4</a></li>
        <li class="sliding-element"><a href="#">Link 5</a></li>
    </ul>
</div>

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

 

CSS

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

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

 

JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    slide("#sliding-navigation", 25, 15, 150, .8);
});
function slide(navigation_id, pad_out, pad_in, time, multiplier){
    var list_elements = navigation_id + " li.sliding-element";
    var link_elements = list_elements + " a";
    var timer = 0;
    $(list_elements).each(function(i){
        $(this).css("margin-left","-180px");
        timer = (timer*multiplier + time);
        $(this).animate({ marginLeft: "0" }, timer);
        $(this).animate({ marginLeft: "15px" }, timer);
        $(this).animate({ marginLeft: "0" }, timer);
    });
    $(link_elements).each(function(i){
        $(this).hover(
        function(){
            $(this).animate({ paddingLeft: pad_out }, 150);
        },
        function(){
            $(this).animate({ paddingLeft: pad_in }, 150);
        });
    });
}
</script>
Материалы по теме:

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

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

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

Меню довольно простое, весит очень мало, подойдёт сайту любой тематики......

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

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

Вертикальное меню аккордеон на css и JQueryВертикальное меню аккордеон на css и JQu...

Стильное вертикальное меню аккордеон.

Фиксированое меню (вертикальное и горизонтальное)Фиксированое меню (вертикальное и горизо...

Неплохое фиксированное меню для вашего сайта, меню может быть горизонтальным и вертикальным......

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

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

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

Красивое разноцветное меню (Аккордеон.
Интересные публикации:

AirlinesAirlines

Красивый шаблон Airlines на HTML5, хорошо подойдёт для корпоративного сайта....

Новостной слайдер «Lof JSliderNews 2.0»Новостной слайдер «Lof JSliderNews 2.0»

Неплохой новостной слайдер, отлично подойдёт для вывода последних новостей на сайте, в слайдере есть дополнительная панель с миниатюрами......

Набор градиентных кнопок на css3Набор градиентных кнопок на css3

Неплохой набор кнопок, в нем вы найдёте кнопки разного цвета, (округлённые, прямоугольные, маленькие)....

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

Красивое разноцветное меню (Аккордеон.

VIP кнопка на css3VIP кнопка на css3

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

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

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

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

Креативное раскрывающиеся меню, хорошо подойдёт к нестандартному дизайну......
  • Текущий 1.38/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

Комментариев в теме: (2)
↑ 0 ↓
Vladimir
Как добавить уровни и сохранение пункта после перезагрузки страницы?
Ответить Ответ с цитатой
↑ 0 ↓
ADMIN
Для добавления уровней изучайте html, для сохранения пункта после перезагрузки страницы изучайте PHP.
В данном примере, показано как можно наложить данный эффект методом JS.
Если вас не устраивает, ни один из предложенных вариантов, тогда попросту обратитесь за помощью на форумы данной тематики, знающие люди вам обязательно помогу (возможно за копейку).

Ответить Ответ с цитатой

Страницы: 1

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


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