Показать сообщение отдельно
  #9 (permalink)  
Старый 06.12.2010, 08:35
Интересующийся
Отправить личное сообщение для dr.5y51em Посмотреть профиль Найти все сообщения от dr.5y51em
 
Регистрация: 23.09.2010
Сообщений: 18

Сообщение от monolithed Посмотреть сообщение
dr.5y51em опишите проблему конкретней, какого результата вы хотите добиться?
Это меню, вот html код меню:
<div style="position:relative;">
    	<div id="menu">
        	<li class="menu_item" id="menu_item0"><a href="#">пункт0</a></li>
            <li class="menu_item" id="menu_item1"><a href="#">пункт1</a></li>
            <li class="menu_item" id="menu_item2"><a href="#">пункт2</a></li>
            <li class="menu_item" id="menu_item3"><a href="#">пункт3</a></li>
            <li class="menu_item" id="menu_item4"><a href="#">пункт4</a></li>
            <div style="position:relative;">
            	<div id="hover_menu"></div>
          </div>
        </div>
    </div>


Вот CSS
Код:
#menu {
	position: absolute;
	width: 700px;
	left: 271px;
	top: -29px;
	z-index:999;
	text-align: left;
	vertical-align: top;
}
#menu li {
	text-align: left;
	display: inline-block;
	list-style-type: none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #FFF;
	margin-left: 20px;
}
#hover_menu {
	background-color: #F00;
	position: absolute;
	height: 8px;
	left: 20px;
	top: -1px;
	z-index:-997;
}
#menu a {
	color: #FFF;
	text-decoration: none;
}
Вот JS:
$(document).ready(function(){
	$('#hover_menu').css('width', $('#menu_item0').css('width'));
	$('.menu_item').mousemove(function(event){
		$("#hover_menu").offset({left:$(this).offset().left});
		$('#hover_menu').css({width:  $(this).css('width')});
	});
});


Задача состоит в том, что бы див, который перемещается ниже пунктов меню, "знал" координаты пунктов и плавно перемещался, плавно меняя ширину в зависимости от ширины пункта меню.
Ответить с цитированием