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

Меню

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

8

Раскрывающиеся блоки при клике на ссылку

Jemand 33262 ,
JavaScript

1. CSS


.hide {
	display: none;
	}
.show {
	padding: 5px;
	background: #fff;
	border: 1px solid #ccc;
	box-shadow: #ccc 0 0 10px;
	border-radius: 5px;
	width: 320px;
	}

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

3. JavaScript

<script type="text/javascript">
	(function($) {
		$.fn.dropDownBlock = function(block, options) {
			var defaults = {
				speed: 'fast',
				top: $(this).height(),
				left: 0
			},
			opts 	= $.extend(defaults, options),
			toggler = $(this),
			block 	= $(block);
			toggler.css({'outline': 'none'})

			toggler.click(function(e) {
				e.preventDefault();
				$(block).css({
					'position' 	: 'absolute',
					'top' 		: (toggler.offset().top + opts['top']) + 'px',
					'left' 		: (toggler.offset().left + opts['left']) + 'px'
				});
				if($(block).is(':visible')) $(block).fadeOut(opts['speed']);
				else $(block).fadeIn(opts['speed']);
				this.focus();
			});
			toggler.blur(function() {
				$(block).fadeOut(opts['speed']);
			});
		};
	})(jQuery);
	// на каждую ссылку своя строка с link и block
	$('#link').dropDownBlock($('#block'));
</script>

JS вставляем перед закрывающим тэгом </body>
4. HTML

<!-- Ссылка -->
<a href="#" id="link">активное ядро галактики</a> 

<!-- Блок -->
<div class="hide show" id="block">
<b>Активные ядра галактик</b> — ядра галактик, наблюдаемые процессы в которых нельзя объяснить свойствами находящихся в них звезд и газово-пылевых комплексов.
</div>

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

» 8 комментариев

  1. Что то не получается, посмотрите md-blog.ru – справа, что такое?

  2. Спасибо большое за толковый урок, вот только вначале скрипт вставил в head, и разумеется ничего не получилось. Перечитав второй раз сделал как надо и всё заработало. Ещё раз большое спасибо.

  3. Можно ли сочетать это скрипт с “http://jemand.ru/examples/mega-menyu-na-css-jquery.html”!?

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


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