私はサイト (lowrateadvisor.com) を持っています。ページの上部に展開可能な div を機能させることに取り組んでいます。サイトではなく、jsfiddle.net/3shEE/95/で動作させることができます。どんな助けでも大歓迎です。
CSS
#expandable a{
color:#fff;
text-decoration:underline;
}
#expandable a:hover{
color:#fff;
text-decoration:none;
}
#expandable {
width: 100%;
height:35px;
background: transparent;
overflow: hidden;
background:#000;
color:#fff;
font-size:11px;
text-align:center;
}
#expandable.dropped {
background: #666;
color: white;
border-bottom: 1px solid #111 }
#expandable span {
display: block;
width: 100%; height: 50px;
line-height: 50px; text-align: center;
cursor: pointer;
}
#expandable ul {
width: 100%;
}
HTML
<div id="expandable">
<span> Get the lowest possible rates on pre approved home loans, mortgages and refinancing your home.</span>
<ul>
<li>We will never...<br /></li>
<li>» Ask for your SSN.</li>
<li>» Ask for a credit card.</li>
<li>» Store your information.</li>
<li>» Hassle or Pressure any applicant.</li>
<li> <a href="http://lowrateadvisor.com/apply-now/">Get Pre Approved</a> | <a href="http://lowrateadvisor.com/get-pre-approved/">Get A Quote</a></li>
</ul>
</div>
Jクエリ
$("#expandable").hover(function() {
$(this).stop().animate({"height":"200px"},1000).addClass("dropped");
}, function() {
$(this).stop().animate({"height":"35px"},1000).removeClass("dropped");
});