Как реализовать табы в виде круга?

Question

[Shmatkov_Denis]

Добрый день!

Столкнулся с проблемой реализации табов в виде круга.
Как тут: matterofform.com/#!/about-us/process

Хотелось бы узнать, как реализовать подобное. Может, кто подкинет наброски или подобную реализацию.

Заранее спасибо!

Answer 1

[4NATIC]

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

Comments

[Shmatkov_Denis]

То есть нужно проверять координаты курсора, и тогда уже по нажатию подтягивать нужную информацию. Что то я не заметил там проверку координат, если это так то спасибо буду дальше копать.

Answer 2

[Евгений Низамиев]

tympanus.net/codrops/2013/08/09/building-a-circula...

Может такое подойдёт?

Comments

[Shmatkov_Denis]

начал рассматривать ранее. но немного не тот функционал.

[4NATIC]

В common.js вот этот код:

$('.progress').click(function (e) {
				var xPos = e.pageX - $(this).offset().left,
					yPos = e.pageY - $(this).offset().top;

				if (xPos < 55)
				{
					if (yPos > 135 && yPos < 335)
					{
						self.nextStep = 'delivery';
					}
				}
				else if (xPos < 220)
				{
					if (yPos < 135)
					{
						self.nextStep = 'marketing';
					}
					else if (yPos > 335)
					{
						self.nextStep = 'development';
					}
				}
				else if (xPos < 395)
				{
					if (yPos < 135)
					{
						self.nextStep = 'discovery';
					}
					else if (yPos > 335)
					{
						self.nextStep = 'design';
					}
				}
				else
				{
					if (yPos > 135 && yPos < 335)
					{
						self.nextStep = 'strategy';
					}
				}

				self.currentStepElem = $('.step[data-step="' + self.currentStep + '"]');
				self.nextStepElem = $('.step[data-step="' + self.nextStep + '"]');

				self.currentStepElem.fadeOut(300, function () {
					self.nextStepElem.delay(0).fadeIn(300);
				});

				$('.progress').find('[data-step="' + self.currentStep + '"]').fadeOut(300);
				$('.progress').find('[data-step="' + self.nextStep + '"]').fadeIn(300);

				$('.bg img:visible').fadeOut(300);
				$('.bg img[data-step="' + self.nextStep + '"]').fadeIn(300);

				self.currentStep = self.nextStep;

				return false;
			})

[Shmatkov_Denis]

понял, спасибо!