Автор

Слайдер с подпунктами для сайта на jQuery

Слайдер с подпунктами для сайта на jQuery


 

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

 

ДЕМО
ИСХОДНИКИ

 

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

Шаг 1. HTML

Для начала нам необходимо создать разметки, нам необходимо использовать элемент div, который содержит несколько неупорядоченных списков. Кроме этого каждый элемент будет содержать картинку и текст с заголовком.

<div id="mi-slider" class="mi-slider">
 <ul>
 <li><a href="#"><img src="images/1.jpg" alt="img01"><h4>Ботинки</h4></a></li>
 <li><a href="#"><img src="images/2.jpg" alt="img02"><h4>Туфли</h4></a></li>
 <li><a href="#"><img src="images/3.jpg" alt="img03"><h4>Мокасины</h4></a></li>
 <li><a href="#"><img src="images/4.jpg" alt="img04"><h4>Кроссовки</h4></a></li>
 </ul>
 <ul>
 <li><a href="#"><img src="images/5.jpg" alt="img05"><h4>Ремни</h4></a></li>
 <li><a href="#"><img src="images/6.jpg" alt="img06"><h4>Шляпы</h4></a></li>
 <li><a href="#"><img src="images/7.jpg" alt="img07"><h4>Очки</h4></a></li>
 <li><a href="#"><img src="images/8.jpg" alt="img08"><h4>Шарфы</h4></a></li>
 </ul>
 <ul>
 <li><a href="#"><img src="images/9.jpg" alt="img09"><h4>Свобода</h4></a></li>
 <li><a href="#"><img src="images/10.jpg" alt="img10"><h4>Роскошь</h4></a></li>
 <li><a href="#"><img src="images/11.jpg" alt="img11"><h4>Спорт</h4></a></li>
 </ul>
 <ul>
 <li><a href="#"><img src="images/12.jpg" alt="img12"><h4>Чемоданы</h4></a></li>
 <li><a href="#"><img src="images/13.jpg" alt="img13"><h4>Дорожные</h4></a></li>
 <li><a href="#"><img src="images/14.jpg" alt="img14"><h4>Для ноутбуков</h4></a></li>
 <li><a href="#"><img src="images/15.jpg" alt="img15"><h4>Портфели</h4></a></li>
 </ul>
 <nav>
 <a href="#">Обувь</a>
 <a href="#">Аксессуары</a>
 <a href="#">Часы</a>
 <a href="#">Сумки</a>
 </nav>
</div>

Следует заметить, что изначально нужно выводить первый список с пунктами, а остальные элементы li смещаем вправо за пределы области видимости.

Шаг 2. CSS

Нам необходимо определить общие стили для контейнера, который будет иметь класс mi-slider. Для него мы установим высоту, которая требуется для установки правильного положения элементов ul:

.mi-slider {
    position: relative;
    margin-top: 30px;
    height: 490px;
}

Нам необходимо перемещать пункты списка но при этом не сам список. Для этого установим для свойства pointer-events значение none, так как нам нужно чтобы на нажатие кнопки мыши реагировала ссылка текущего списка:

.mi-slider ul {
    list-style-type: none;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 140px;
    overflow: hidden;
    text-align: center;
    pointer-events: none;
}

Теперь рассмотрим свойство pointer-events для текущего списка нужно обновить, чтобы ссылки в содержании стали доступны для нажатия:

.mi-slider ul.mi-current {
    pointer-events: auto;
}

Заданные значения по умолчанию устанавливают, что все пункты смещаются вправо. Для этого нам необходимо использовать значение 600%, так как его будет достаточно, чтобы убрать все из поля видимости. Также необходимо добавить небольшую трансформацию для прозрачности:

.mi-slider ul li {
    display: inline-block;
    padding: 20px;
    width: 20%;
    max-width: 300px;
    transform: translateX(600%);
    transition: opacity 0.2s linear;
}

Теперь нам необходимо определить стили для содержимого пунктов списка. Следует заметить, что свойство max-width для изображений имеет значение 100%:

.mi-slider ul li a,
.mi-slider ul li img {
    display: block;
    margin: 0 auto;
}

.mi-slider ul li a {
    outline: none;
    cursor: pointer;
}

.mi-slider ul li img {
    max-width: 100%;
    border: none;
}

.mi-slider ul li h4 {
    display: inline-block;
    font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
    font-style: italic;
    font-weight: 400;
    font-size: 18px;
    padding: 20px 10px 0;
}

Создаем прозрачность при наведении курсора мыши:

.mi-slider ul li:hover {
    opacity: 0.7;
}

Наш шаблон имеет абсолютное позиционирование, по этому навигацию устанавливаем со значением свойства top.

.mi-slider nav {
    position: relative;
    top: 400px;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    border-top: 5px solid #333;
}

Если отключен JavaScript то выводить навигацию не требуется:

.no-js nav {
    display: none;
}

Анимация scaleUp также включает перемещение пунктов в координату 0, так как нам нужно вывести их в поле обзора:

.mi-slider ul:first-child li,
.no-js .mi-slider ul li {
    animation: scaleUp 350ms ease-in-out both;
}

@keyframes scaleUp {
    0% { transform: translateX(0) scale(0); }
    100% { transform: translateX(0) scale(1); }
}

Необходимо добавить каждому пункту различные задержки, чтобы они появлялись последовательно:

.mi-slider ul:first-child li:first-child {
    animation-delay: 90ms;
}

.mi-slider ul:first-child li:nth-child(2) {
    animation-delay: 180ms;
}

.mi-slider ul:first-child li:nth-child(3) {
    animation-delay: 270ms;
}

.mi-slider ul:first-child li:nth-child(4) {
    animation-delay: 360ms;
}

Теперь нужно установить задержки анимации в зависимости от направления движения.

.mi-slider ul.mi-moveToLeft li:first-child,
.mi-slider ul.mi-moveFromRight li:first-child,
.mi-slider ul.mi-moveToRight li:nth-child(4),
.mi-slider ul.mi-moveFromLeft li:nth-child(4) {
    animation-delay: 0ms;
}

Необходимо увеличивать задержки постепенно:

.mi-slider ul.mi-moveToLeft li:nth-child(2),
.mi-slider ul.mi-moveFromRight li:nth-child(2),
.mi-slider ul.mi-moveToRight li:nth-child(3),
.mi-slider ul.mi-moveFromLeft li:nth-child(3) {
    -webkit-animation-delay: 90ms;
    animation-delay: 90ms;
}

.mi-slider ul.mi-moveToLeft li:nth-child(3),
.mi-slider ul.mi-moveFromRight li:nth-child(3),
.mi-slider ul.mi-moveToRight li:nth-child(2),
.mi-slider ul.mi-moveFromLeft li:nth-child(2) {
    -webkit-animation-delay: 180ms;
    animation-delay: 180ms;
}

.mi-slider ul.mi-moveToLeft li:nth-child(4),
.mi-slider ul.mi-moveFromRight li:nth-child(4),
.mi-slider ul.mi-moveToRight li:first-child,
.mi-slider ul.mi-moveFromLeft li:first-child  {
    -webkit-animation-delay: 270ms;
    animation-delay: 270ms;
}

Обратите внимание, так как мы установили фиксированную высоту слайдера, то ее нужно адаптировать для просмотра на различных разрешениях:

@media screen and (max-width: 740px){
    .mi-slider {
        height: 300px;
    }

    .mi-slider nav {
        top: 220px;
    }
}

Последним подпунктом данного шага будет установка стилей так, чтобы ничего не скрывалось и все списки выводились один над другим:

@media screen and (max-width: 490px){
    .mi-slider {
        text-align: center;
        height: auto;
    }

    .mi-slider ul {
        position: relative;
        display: inline;
        bottom: auto;
        pointer-events: auto;
    }

    .mi-slider ul li {
        animation: none !important;
        transform: translateX(0) !important;
        padding: 10px 3px;
        min-width: 140px;
    }

    .mi-slider nav {
        display: none;
    }
}

С этим шагом закончили, перейдем к следующему.

Шаг 3. JavaScript

Мы будем использовать небольшой плагин jQuery. Данный плагин необходим для добавления и очистки классов, а также следить за текущей выводимой категорией. Для браузеров, которые не поддерживают анимации используется метод "показать или скрыть". Начнем с кэширования переменных:

_init : function( options ) {

	// Категории (ul)
	this.$categories = this.$el.children( 'ul' );
	// Навигация
	this.$navcategories = this.$el.find( 'nav > a' );
	var animEndEventNames = {
		'WebkitAnimation' : 'webkitAnimationEnd',
		'OAnimation' : 'oAnimationEnd',
		'msAnimation' : 'MSAnimationEnd',
		'animation' : 'animationend'
	};
	// Название анимации и события
	this.animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ];
	// Поддержка анимаций и событий
	this.support = Modernizr.csstransforms && Modernizr.cssanimations;
	// Если анимация проводится
	this.isAnimating = false;
	// Текущая категория
	this.current = 0;
	var $currcat = this.$categories.eq( 0 );
	if( !this.support ) {
		this.$categories.hide();
		$currcat.show();
	}
	else {
		$currcat.addClass( 'mi-current' );
	}
	// Текущая категория навигации
	this.$navcategories.eq( 0 ).addClass( 'mi-selected' );
	// Инициализация событий
	this._initEvents();

},

Теперь нам необходимо привязать событие click к ссылке категории под слайдером. Предполагаем, что индекс каждой ссылки соответствует индексу категории.

_initEvents : function() {

		var self = this;
		this.$navcategories.on( 'click.catslider', function() {
			self.showCategory( $( this ).index() );
			return false;
		} );

		// Сброс при измении размеров окна
		$( window ).on( 'resize', function() {
			self.$categories.removeClass().eq( 0 ).addClass( 'mi-current' );
			self.$navcategories.eq( self.current ).removeClass( 'mi-selected' ).end().eq( 0 ).addClass( 'mi-selected' );
			self.current = 0;
		} );

	},
	showCategory : function( catidx ) {

		if( catidx === this.current || this.isAnimating ) {
			return false;
		}
		this.isAnimating = true;
		// Обновляем выбранную навигацию
		this.$navcategories.eq( this.current ).removeClass( 'mi-selected' ).end().eq( catidx ).addClass( 'mi-selected' );

		var dir = catidx > this.current ? 'right' : 'left',
			toClass = dir === 'right' ? 'mi-moveToLeft' : 'mi-moveToRight',
			fromClass = dir === 'right' ? 'mi-moveFromRight' : 'mi-moveFromLeft',
			// Текущая категория
			$currcat = this.$categories.eq( this.current ),
			// Новая категория
			$newcat = this.$categories.eq( catidx ),
			$newcatchild = $newcat.children(),
			lastEnter = dir === 'right' ? $newcatchild.length - 1 : 0,
			self = this;

		if( this.support ) {

			$currcat.removeClass().addClass( toClass );

			setTimeout( function() {

				$newcat.removeClass().addClass( fromClass );
				$newcatchild.eq( lastEnter ).on( self.animEndEventName, function() {

					$( this ).off( self.animEndEventName );
					$newcat.addClass( 'mi-current' );
					self.current = catidx;
					var $this = $( this );
					// Решение для ошибки в Chrome
					self.forceRedraw( $this.get(0) );
					self.isAnimating = false;

				} );

			}, $newcatchild.length * 90 );

		}
		else {

			$currcat.hide();
			$newcat.show();
			this.current = catidx;
			this.isAnimating = false;

		}

	},
	// На основании http://stackoverflow.com/a/8840703/989439
	forceRedraw : function(element) {
		if (!element) { return; }
		var n = document.createTextNode(' '),
			position = element.style.position;
		element.appendChild(n);
		element.style.position = 'relative';
		setTimeout(function(){
			element.style.position = position;
			n.parentNode.removeChild(n);
		}, 25);
	}

}

$.fn.catslider = function( options ) {
	var instance = $.data( this, 'catslider' );
	if ( typeof options === 'string' ) {
		var args = Array.prototype.slice.call( arguments, 1 );
		this.each(function() {
			instance[ options ].apply( instance, args );
		});
	}
	else {
		this.each(function() {
			instance ? instance._init() : instance = $.data( this, 'catslider', new $.CatSlider( options, this ) );
		});
	}
	return instance;
};

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

Вот и все. Готово!

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


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

Слайдер с подпунктами для сайта на jQuery

Создавая сайт каждый веб мастер пытается сделать что бы его творение одинаково читалось во всех браузерах, и это, порой, доставляет хлопот. По этому в данном уроке речь пойдет о создании и стилизации такого элемента сайта как select или проще говоря кнопки выбора. Мы будем рассматривать несколько скриптов, которые будут преобразовывать обычный элемент select в более стильный и функциональный элемент управления сайта, который отображается корректно в различных браузерах. И так, давайте же посмотрим что у нас получилось..


Слайдер с подпунктами для сайта на jQuery

Если ваш сайт содержит множество информации, то это наверняка запутает пользователя, и ему потребуется некоторое объяснение происходящего. Отличным способом будет внедрение в структуру сайта ненавязчивых подсказок, которые отлично дополнят ваш сайт и будут выполнять свою миссию. В данном уроке мы рассмотрим процесс создания замечательных анимированных подсказок с помощью css3. В демонстрации будут приводиться различные варианты подсказок, с разными эффектами появления и затухания. Следует заметить, что такие подсказки смогут работать в браузерах..


Слайдер с подпунктами для сайта на jQuery

Выпадющие списки часто встречаются в структуре современного сайтостроения, это не удивительно, ведь это не только эффективно с точки зрения организации материала на сайте, сохранения места на сайте, но и эффектно выглядит. Зачастую списки стилизую достаточно просто. Они не радуют взор, и не привлекают внимание. В данном уроке мы рассмотрим как можно стилизовать выпадающие списки select с помощью небольшого плагина jquery. Данный плагин позволит вам разнообразить списки и креативно решить подход к их организации.


Слайдер с подпунктами для сайта на jQuery

Создатели своих веб-ресурсов часто любят устанавливать такие гаджеты как часы, честно я не понимаю смысл в этом, ведь я всегда посмотрю время на часы на руке или на ноуте, но все же такой урок имеет место быть, ведь на каждый товар есть свой покупатель. В данном уроке мы рассмотрим как создать замечательные на вид, на мой взгляд, стрелочные часы. Следует отметить, что данные часы являются экспериментом, и могут не поддерживаться некоторыми браузерами включая ранние версии старого ослика, и так, давайте приступим.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close