Главная » 2014 » Январь » 1 » Слайдер - Меню для Интернет магазина
19:37
Слайдер - Меню для Интернет магазина
Слайдер - Меню для Интернет магазина на jQuery с эффектом. Такой слайдер станет отличным дополнением для любого сайта, особенно такая задумка пригодится для интернет магазина





Установка слайдера на сайт


В шаблоне HTML, где будет стоять слайдер , между тегами

Код
1<head> и </head>
Пoдcвeткa oт АDИсходный код | Переносить строки


устанавливаем слейдущие скрипты


Код
1<link rel="stylesheet" type="text/css" href="http://all-skripts.com/zarybezka/menu/slayderstyle.css" />
2  <script src="http://all-skripts.com/zarybezka/menu/modernizr.custom.63321.js"></script>
3<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
4  <script src="http://all-skripts.com/zarybezka/menu/jquery.catslider.js"></script>
5
6
Пoдcвeткa oт АDИсходный код | Переносить строки


Разметка HTML


Код
1<div class="main">
2  <div id="mi-slider" class="mi-slider">
3  <ul>
4  <li><a href="#"><img src="http://all-skripts.com/zarybezka/menu/1.jpg" alt="img01"><h4>Ботинки</h4></a></li>
5  <li><a href="#"><img src="http://all-skripts.com/zarybezka/menu/2.jpg" alt="img02"><h4>Туфли</h4></a></li>
6  <li><a href="#"><img src="http://all-skripts.com/zarybezka/menu/3.jpg" alt="img03"><h4>Мокасины</h4></a></li>
7  <li><a href="#"><img src="http://all-skripts.com/zarybezka/menu/4.jpg" alt="img04"><h4>Кроссовки</h4></a></li>
8  </ul>
9  <ul>
10  <li><a href="#"><img src="http://all-skripts.com/zarybezka/menu/5.jpg" alt="img05"><h4>Ремни</h4></a></li>
11  <li><a href="#"><img src="http://all-skripts.com/zarybezka/menu/6.jpg" alt="img06"><h4>Шляпы</h4></a></li>
12  <li><a href="#"><img src="http://all-skripts.com/zarybezka/menu/7.jpg" alt="img07"><h4>Очки</h4></a></li>
13  <li><a href="#"><img src="http://all-skripts.com/zarybezka/menu/8.jpg" alt="img08"><h4>Шарфы</h4></a></li>
14  </ul>
15  <ul>
16  <li><a href="#"><img src="http://all-skripts.com/zarybezka/menu/9.jpg" alt="img09"><h4>Туризм</h4></a></li>
17  <li><a href="#"><img src="http://all-skripts.com/zarybezka/menu/10.jpg" alt="img10"><h4>Шикарные</h4></a></li>
18  <li><a href="#"><img src="http://all-skripts.com/zarybezka/menu/11.jpg" alt="img11"><h4>Спорт</h4></a></li>
19  </ul>
20  <ul>
21  <li><a href="#"><img src="http://all-skripts.com/zarybezka/menu/12.jpg" alt="img12"><h4>Чемоданы</h4></a></li>
22  <li><a href="#"><img src="http://all-skripts.com/zarybezka/menu/13.jpg" alt="img13"><h4>Для турне</h4></a></li>
23  <li><a href="#"><img src="http://all-skripts.com/zarybezka/menu/14.jpg" alt="img14"><h4>Для ноутбуков</h4></a></li>
24  <li><a href="#"><img src="http://all-skripts.com/zarybezka/menu/15.jpg" alt="img15"><h4>Портфели</h4></a></li>
25  </ul>
26  <nav>
27  <a href="#">Обувь</a>
28  <a href="#">Аксессуары</a>
29  <a href="#">Часы</a>
30  <a href="#">Сумки</a>
31  </nav>
32  </div>
33
Пoдcвeткa oт АDИсходный код | Переносить строки


Картинки естевственно можете заменить на свои. Пример вставки ссылки и картинки
Категория: Для сайтов | Просмотров: 1366 | Добавил: Лаврентий5932 | Рейтинг: 5.0/1
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]