.animate вопрос/помощь

Итак, я до сих пор строил эту навигационную панель, и мне любопытно, можно ли даже достичь того, о чем я думаю. В настоящее время, когда вы наводите курсор на каждую из ссылок, которые они выпадают (добавление увеличивается)..animate вопрос/помощь

Теперь, что мне интересно, если вы наведите указатель на «test1», test2-4 также упадет вместе с ним, но в дополнении, которое было создано из раскрывающегося списка, появляется информация «test1». Позволяя пользователю щелкнуть или прочитать любую информацию. Кроме того, если пользователь хотел бы, они могут переместить свою мышь в test2, и все будет оживлять (прозрачность, это я могу сделать, я думаю), что бы ни было в поле test2, test3 делает то же самое и так далее.

У меня не было большого успеха с этим, я создал полностью отдельную панель раньше, но это не помогло, или я не делал это правильно.

Вот что я работаю, ЛЮБАЯ помощь будет оценена! Благодаря!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(function() { 
$("#nav li > a").hover(function() { 
$(this).stop().animate({paddingTop: "100px"}, 100); 
}, 
function() { 
$(this).stop().animate({paddingTop: "10px"}, 200); 
}); 
}); 
</script> 

<style type="text/css"> 
#nav 
{ 
position: absolute; 
top: 0; 
left: 60px; 
padding: 0; 
margin: 0; 
list-style: none; 
} 

#nav li 
{ 
display: inline; 
} 

#nav li a 
{ 
float: left; 
display: block; 
color: #555; 
text-decoration: none; 
padding: 10px 30px; 
background-color: #d1d1d1; 
border-top: none; 
} 
</style> 

</head> 

<body> 

<div id="wrap"> 

<ul id="nav"> 
    <li><a href="">test1</a></li> 
    <li><a href="">test2</a></li> 
    <li><a href="">test3</a></li> 
    <li><a href="">test4</a></li> 

</ul> 
</div> 
</body> 
</html>

источник

2010-03-29 Josh

Я испортил код, но не получил полного ответа, но решил, что я опубликую то, что у меня есть. Этот код добавит div над меню и использует его для отображения конкретного контента <a>. Я добавил идентификаторы в ваши теги <a>, так как вам нужно будет определить их при определении того, какой контент показывать. Я не думаю, что вы действительно должен положить div тег в ul, так что это не идеально.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $('#content').height(0); 
    $("#nav li > a").hover(function() { 
      var id = $(this)[0].id; 
      var content = 'Default content'; 
      if (id == '1') 
       content = 'Test 1 content'; 
      else if (id == '2') 
       content = 'Test 2 content'; 
      else if (id == '3') 
       content = 'Test 3 content'; 
      else if (id == '4') 
       content = 'Test 4 content'; 

      $('#content').html(content); 
     }, 
     function() { } 
    ); 

    $("#nav").hover(function() { 
      $('#content').stop().animate({height: "100px"}, 100); 
     }, 
     function() { 
      $('#content').html('').stop().animate({height: "0"}, 200); 
     } 
    ); 

}); 

</script> 

<style type="text/css"> 
#nav 
{ 
position: absolute; 
top: 0; 
left: 60px; 
padding: 0; 
margin: 0; 
list-style: none; 
} 

#nav li 
{ 
display: inline; 
} 

#nav li a 
{ 
float: left; 
display: block; 
color: #555; 
text-decoration: none; 
padding: 10px 30px; 
background-color: #d1d1d1; 
border-top: none; 
} 

div#content 
{ 
    border: 1px solid red; 
    background-color: #d1d1d1; 
    width: 355px; 
} 
</style> 

</head> 

<body> 

<div id="wrap"> 
<ul id="nav"> 
    <div id="content"></div> 
    <li><a id="1" href="">test1</a></li> 
    <li><a id="2" href="">test2</a></li> 
    <li><a id="3" href="">test3</a></li> 
    <li><a id="4" href="">test4</a></li> 
</ul> 
</div> 
</body> 
</html>

Я тогда подумал, что вы имели в виду вы хотели свою ссылку конкретного содержания, чтобы показать непосредственно над вашей ссылкой при наведении курсора, и придумали что-то другое. Вы можете использовать jQuery's prepend, чтобы добавить конкретный контент в область «padding». С помощью этого решения вам не нужны идентификаторы в тегах a, но все меню не выпадает при наведении (но это может как-то быть, я застрял там и могу вернуться к нему позже). Чтобы увидеть это, просто измените код jQuery на это:

$(function() { 
    $("#nav li > a").hover(function() { 
     $(this).stop().animate({paddingTop: "100px"}, 100); 
     $(this).prepend('<div id="paddingMenu"><p>test1 link</p><p>test1 link2</p></div>'); 
    }, 
    function() { 
     $(this).stop().animate({paddingTop: "10px"}, 200); 
     $('#paddingMenu').remove(); 
    }); 

});

Надеюсь, это поможет. Удачи!

Редактировать: Конечно, метод html jQuery будет устанавливать внутреннийHTML элемента (ов), возвращаемого из его селектора. Поэтому в первом примере переменная content может содержать теги a, которые вы хотите использовать в качестве ссылок. Ниже приведен пример создания пары ссылок для содержимого test1:

$("#nav li > a").hover(function() { 
     var id = $(this)[0].id; 
     var content = 'Default content'; 
     if (id == '1') 
      content = '<a href="http://google.com">Google<a><br />' + 
       '<a href="http://stackoverflow.com/">Stackoverflow</a>'; 
     else if (id == '2') 
      content = 'Test 2 content'; 
     else if (id == '3') 
      content = 'Test 3 content'; 
     else if (id == '4') 
      content = 'Test 4 content'; 

     $('#content').html(content); 
    }, 
    function() { } 
);

источник

2010-03-29 21:19:46 rosscj2533

Омг да! Первый пример - это именно то, что я пытался сделать! Я достиг этого с помощью зависания/бока, как я уже упоминал ранее, но это просто не разрезало его, и я чувствовал, что я очень близок к тому, чтобы понять это через живое, но просто не смог полностью его завершить. Большое спасибо! Спасибо Спасибо! – Josh

На самом деле, у меня есть следующий вопрос (который, я надеюсь, вы посмотрели). Скажем, я хотел, чтобы содержимое этих выпадающих списков содержало в них ссылки. Как я мог это достичь? Является ли это возможным? Не каждая выпадающая сторона имела бы ссылки, куда будет идти контент, но я предполагаю, что по крайней мере два из них будут просто быть ссылками. – Josh

@Josh - Обновлен с помощью ссылок. – rosscj2533

.animate вопрос/помощь

ответ

Смежные вопросы