CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 275   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

4

Горизонтальный аккордеон на MooTools

Jemand 8033 ,
JavaScript

Для себя я еще не придумал применений данной конструкции, возможно Вы мне подскажите.
1. CSS


* {
	margin: 0;
	padding: 0;
	}
#kwicks_container {
	margin-top: 100px;
	background-color: violet;
	height: 300px;
	width: 825px;
	}
#kwicks {
	position: relative;
	}
#kwicks .kwick {
	float: left;
	display: block;
	width: 117px;
	height: 300px;
	}
#kwick_red {
	background-color: red;
	}
#kwick_orange {
	background-color: orange;
	}
#kwick_yellow {
	background-color: yellow;
	}
#kwick_green {
	background-color: green;
	}
#kwick_blue {
	background-color: blue;
	}
#kwick_indigo {
	background-color: indigo;
	color: #fff;
	}
#kwick_violet {
	background-color: violet;
	}

2. Подключение MooTools

<script type="text/javascript" src="mootools.js"></script>

Как обычно данный код вставляем в раздел <head>.
Скачать фреймворк можно по этой ссылке.
3. JavaScript

<script type="text/javascript">
window.addEvent('domready', function(){
	var szNormal = 117, szSmall  = 100, szFull   = 219;
	var kwicks = $$("#kwicks .kwick");
	var fx = new Fx.Elements(kwicks, {wait: false, duration: 300, transition: Fx.Transitions.Back.easeOut});
	kwicks.each(function(kwick, i) {
		kwick.addEvent("mouseenter", function(event) {
			var o = {};
			o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
			kwicks.each(function(other, j) {
				if(i != j) {
					var w = other.getStyle("width").toInt();
					if(w != szSmall) o[j] = {width: [w, szSmall]};
				}
			});
			fx.start(o);
		});
	});
	$("kwicks").addEvent("mouseleave", function(event) {
		var o = {};
		kwicks.each(function(kwick, i) {
			o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
		});
		fx.start(o);
	})
});
</script>

JS код так же вставляем в раздел <head>, но после кода подключения MooTools.
4. HTML

<div id="kwicks_container">
	<ul id="kwicks">
		<li id="kwick_red" class="kwick"></li>
		<li id="kwick_orange" class="kwick"></li>
		<li id="kwick_yellow" class="kwick"></li>
		<li id="kwick_green" class="kwick"></li>
		<li id="kwick_blue" class="kwick"></li>
		<li id="kwick_indigo" class="kwick"></li>
		<li id="kwick_violet" class="kwick"></li>
	</ul>
</div>

Демо

Рекламная пауза

» 4 комментария

  1. А можно ли сделать один цикл при загрузке страницы, чтоб каждая из вкладок открылась самостоятельно, а не по действию пользователя?

  2. Здравствуйте! Спасибо за Аккордеон! Есть вопрос, может подскажете! Как сделать чтобы окна фиксировались??? Заранее спасибо!!!


Оставить комментарий