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

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

ОБСУЖДЕНИЕ

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

Слайд эффект с помощью JavaScript
Просмотров: 2632  Скачан: 186 раз  Комментариев в теме: 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>
Материалы по теме:

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

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

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

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

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

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

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

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

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

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

Креативное анимированое меню с помощью css3Креативное анимированое меню с помощью c...

Вертикальное меню на css3 с применением иконических шрифтов......

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

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

Paris ClarkParis Clark

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

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

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

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

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

PHP скрипт комментариевСкрипт комментариев

Commentics v2.4 - это превосходный скрипт комментариев написанный на языке PHP в связке с базой данных MYSQL....

Горизонтальное мульти менюГоризонтальное мульти меню

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

Exterior DesignExterior Design

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

Резиновые кнопки на css3 (Checkbox)Резиновые кнопки на css3 (Checkbox)

Ещё один красивый чекбокс, который реалистично имитирует резиновые кнопки, ну или мягкие как их ещё называют....
  • Текущий 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
Обновить