Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
 
Octaus
0 / 0 / 0
Регистрация: 03.05.2015
Сообщений: 4
1

Меню со слайдером на jQuery

03.05.2015, 10:53. Просмотров 352. Ответов 6
Метки нет (Все метки)

Здравствуйте! Подскажите, пожалуйста, как можно сделать меню со слайдером как на сайте creativaplus.ru. Нужно чтобы при клике по ссылке слева всплывала соответствующая картинка с описанием. Есть ли какие готовые решения с уже написанными скриптами?
0
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
03.05.2015, 10:53
Ответы с готовыми решениями:

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

Выпадающее меню прячется после скорла под слайдером
Всю голову сломал. На сайте https://wood-glass.com/ есть выпадающее меню (раздел Услуги)....

Меню на jquery 1.3.2
Нашёл симпотичное меню...

Меню jquery
Добрый, Задача: - при загрузке старницы меню должно свернуться через 10с. - Если на меню фокус...

6
Lazy_Den
3144 / 2756 / 1389
Регистрация: 15.01.2014
Сообщений: 6,065
03.05.2015, 11:23 2
Цитата Сообщение от Octaus Посмотреть сообщение
как можно сделать
Именно самому сделать? Просто можно взять практически любой слайдер, где есть навигация по слайдам. Только там обычно ссылки представлены в виде маленьких превьюшек или "точек", а вы можете стилями преобразовать это в меню ссылок.
1
Octaus
0 / 0 / 0
Регистрация: 03.05.2015
Сообщений: 4
03.05.2015, 11:51  [ТС] 3
Цитата Сообщение от Lazy_Den Посмотреть сообщение
Именно самому сделать? Просто можно взять практически любой слайдер, где есть навигация по слайдам. Только там обычно ссылки представлены в виде маленьких превьюшек или "точек", а вы можете стилями преобразовать это в меню ссылок.
Есть слайдер с переключающимися превьюшками, но вот в меню ссылок преобразовать никак не получается.
0
Lazy_Den
3144 / 2756 / 1389
Регистрация: 15.01.2014
Сообщений: 6,065
03.05.2015, 11:55 4
P.S. Вот вам пара примеров, как можно сделать без сторонних плагинов:
Вариант первый. Пути к изображениям привязываем атрибутом data-* к каждой ссылке меню.
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
<ul class="slide_nav">
    <li><a href="" data-img="http://lorempixel.com/200/200/sports/1/">Slide 1</a></li>
    <li><a href="" data-img="http://lorempixel.com/200/200/sports/2/">Slide 2</a></li>
    <li><a href="" data-img="http://lorempixel.com/200/200/sports/3/">Slide 3</a></li>
</ul>
<div class="slide_output">
    <img src="" alt="" />
</div>
Javascript
1
2
3
4
5
6
7
var slideLink = $('.slide_nav a'),
    outputImg = $('.slide_output img');
slideLink.on('click', changeSlide).eq(0).click();
function changeSlide(e){
    e.preventDefault();
    outputImg.attr('src', $(this).data('img'));
}
Вариант второй. Связываем изображения и ссылки по индексу.
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
<ul class="slide_nav">
    <li><a href="">Slide 1</a></li>
    <li><a href="">Slide 2</a></li>
    <li><a href="">Slide 3</a></li>
</ul>
<div class="slide_output">
    <img src="http://lorempixel.com/200/200/sports/1/" alt="" />
    <img src="http://lorempixel.com/200/200/sports/2/" alt="" />
    <img src="http://lorempixel.com/200/200/sports/3/" alt="" />
</div>
Javascript
1
2
3
4
5
6
7
8
var slideLink = $('.slide_nav a'),
    outputImg = $('.slide_output img');
outputImg.eq(0).addClass('active');
slideLink.on('click', function(e){
    e.preventDefault();
    outputImg.removeClass('active');
    outputImg.eq($(this).index('.slide_nav a')).addClass('active');
});
0
Octaus
0 / 0 / 0
Регистрация: 03.05.2015
Сообщений: 4
03.05.2015, 12:07  [ТС] 5
Цитата Сообщение от Lazy_Den Посмотреть сообщение
P.S. Вот вам пара примеров, как можно сделать без сторонних плагинов:
Вариант первый. Пути к изображениям привязываем атрибутом data-* к каждой ссылке меню.
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
<ul class="slide_nav">
    <li><a href="" data-img="http://lorempixel.com/200/200/sports/1/">Slide 1</a></li>
    <li><a href="" data-img="http://lorempixel.com/200/200/sports/2/">Slide 2</a></li>
    <li><a href="" data-img="http://lorempixel.com/200/200/sports/3/">Slide 3</a></li>
</ul>
<div class="slide_output">
    <img src="" alt="" />
</div>
Javascript
1
2
3
4
5
6
7
var slideLink = $('.slide_nav a'),
    outputImg = $('.slide_output img');
slideLink.on('click', changeSlide).eq(0).click();
function changeSlide(e){
    e.preventDefault();
    outputImg.attr('src', $(this).data('img'));
}
Вариант второй. Связываем изображения и ссылки по индексу.
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
<ul class="slide_nav">
    <li><a href="">Slide 1</a></li>
    <li><a href="">Slide 2</a></li>
    <li><a href="">Slide 3</a></li>
</ul>
<div class="slide_output">
    <img src="http://lorempixel.com/200/200/sports/1/" alt="" />
    <img src="http://lorempixel.com/200/200/sports/2/" alt="" />
    <img src="http://lorempixel.com/200/200/sports/3/" alt="" />
</div>
Javascript
1
2
3
4
5
6
7
8
var slideLink = $('.slide_nav a'),
    outputImg = $('.slide_output img');
outputImg.eq(0).addClass('active');
slideLink.on('click', function(e){
    e.preventDefault();
    outputImg.removeClass('active');
    outputImg.eq($(this).index('.slide_nav a')).addClass('active');
});
Спасибо за ответ. А можно ли в этот слайдер http://www.jssor.com/demos/tab-slider.html вставить что-то вроде меню вместо превьюшек слева?
0
Lazy_Den
3144 / 2756 / 1389
Регистрация: 15.01.2014
Сообщений: 6,065
03.05.2015, 12:13 6
Цитата Сообщение от Octaus Посмотреть сообщение
что-то вроде меню вместо превьюшек слева
Вы разве не видете, что там как раз меню, а не превью. Третий пример - это уже практически готовое решение для вашей задачи. Внешний вид этого меню дорабатывается стилями.
0
Octaus
0 / 0 / 0
Регистрация: 03.05.2015
Сообщений: 4
03.05.2015, 12:17  [ТС] 7
Цитата Сообщение от Lazy_Den Посмотреть сообщение
Вы разве не видете, что там как раз меню, а не превью. Третий пример - это уже практически готовое решение для вашей задачи. Внешний вид этого меню дорабатывается стилями.
Понял, спасибо большое.
0
03.05.2015, 12:17
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
03.05.2015, 12:17

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

Консультация по меню на jQuery
Здравствуйте, уважаемые Форумчане! В поиске сейчас разобраться сложно, по этому не нашел подходящую...

Мега меню на Jquery
Всем привет думаю быть может поможете с отличным вопросом.Дело в том что у меня на странице здесь...

Выпадающее меню на JQuery
Ребята, чувствую себя идиотом, но уже перестал что-либо понимать. Есть такой простенький...

трабл в меню на jQuery
есть такое меню: http://playground.adambecker.info/sweet-menu/ ну почти такое, текст и картинки...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.