В интернете сейчас довольно популярен Slide-эффект. Многие применяют его для создания меню, FAQ, переключения вкладок и т.д.

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

HTML

Итак, как обычно начнем с HTML-структуры.

<img src="img/menu_scroll.png" alt="" id="pointer" />
<ul id="menu">
	<li>
		<h3><span>01. <a href="#Orders">Orders</a></span></h3>
	</li>
	<li class="current">
		<h3 class="slide"><span>02. <a href="#Tools">Tools</a></span></h3>
		<ul>
			<li><a href="#Tools1">Tools 1</a></li>
			<li><a href="#Tools2">Tools 2</a></li>
			<li><a href="#Tools3">Tools 3</a></li>
			<li><a href="#Tools4">Tools 4</a></li>
		</ul>
	</li>
	<li>
		<h3 class="slide"><span>03. <a href="#Stats">Stats</a></span></h3>
		<ul>
			<li><a href="#Stats1">Stats 1</a></li>
			<li><a href="#Stats2">Stats 2</a></li>
			<li><a href="#Stats3">Stats 3</a></li>
			<li><a href="#Stats4">Stats 4</a></li>
		</ul>
	</li>
	<li>
		<h3 class="slide"><span>04. <a href="#Users">Users</a></span></h3>
		<ul>
			<li><a href="#Users1">Users 1</a></li>
			<li><a href="#Users2">Users 2</a></li>
			<li><a href="#Users3">Users 3</a></li>
			<li><a href="#Users4">Users 4</a></li>
		</ul>
	</li>
	<li>
		<h3><span>05. <a href="#Sync">Sync</a></span></h3>
	</li>
</ul>

Меню организовано на UL-списках, картинка перед ним - наш двигающийся ползунок. По умолчанию открыт элемент меню с классом current и ползунок указывает на него. Класс slide означает, что данный раздел разворачивается, переход по ссылке этого элемента не осуществляется.

CSS

#pointer {position: absolute;margin: 8px 0 0 -20px;}
#menu {list-style: none;color: #bbbbbb;margin-left: 10px;width: 200px;}
#menu h3 {font-weight: normal;padding: 3px 0;font-size: 14px;}
#menu a {font-size: 18px;}
#menu span {padding: 4px 14px;}
#menu li.current a {color: #e8d498;}
#menu li.current span {background-color: #322928;}
#menu ul {list-style: none;display: none;margin-left: 48px;}
#menu ul li {padding: 6px 0;}
#menu ul a {font-size: 14px;color:#888888 !important;}

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

JavaScript

(function($){

$.fn.pointer = function(options) {
	var defaults = {
		speed: 300,
		pointer: $('#pointer')
	};

	var options = $.extend(defaults, options);

	return this.each(function() {

		var menu = $(this);
		var pointer = options.pointer;

		var current = menu.children('li.current'), position;
		if (current.length) {
			position = current.position().top;
			current.children('ul').show();
		}
		else {
			position = menu.children('li:first').position().top;
		}

		if ($.browser.msie && $.browser.version < 8)
			position += 3;

		pointer.animate({top: position});

		menu.children('li').hover(function() {
			var pos = $(this).position().top;
			if ($.browser.msie && $.browser.version < 8)
				pos += 3;
			pointer.stop().animate({top: pos}, options.speed);
		}, function() {
			pointer.stop().animate({top: position}, options.speed);
		});

		menu.find("h3.slide a").click(function() {
			var h3 = $(this).parent().parent();
			h3.next().slideToggle(options.speed);
			var li = h3.parent();
			li.siblings().children('ul').slideUp(options.speed);

			setTimeout(function() { li.trigger('mouseover'); }, options.speed);
			return false;
		});

	});
};
})(jQuery);

jQuery(document).ready(function() {
	jQuery('#menu').pointer();
});

Здесь menu - идентификатор меню, в опциях можно задать скорость анимации speed и выбрать ползунок pointer.

Когда вы устанавливаете поля у элементов меню, браузеры IE6-7 неправильно вычисляют координату top пункта меню. Для этого я использую поправку. Ее величина зависит от отступов.

if ($.browser.msie && $.browser.version < 8)
	position += 3;

Браузеры

Работу скрипта проверял в браузерах: Intenet Explorer 6+, Mozilla Firefox 3.5, Opera 10, Chrome 4. Сообщите мне, если меню будет работать некорректно.

Пример

Пример
Скачать