私はこのガイドを使用してhtmlファイルを作成しています-1つのファイルに作成するだけです
スライドしないという問題があります。
Htmlコード-私はこれではありませんhtmlコードにエラーがあります:
<ul>
<li class="green" id="dropper">
<p><a href="#">Home</a></p>
<p class="subtext">The front page</p>
</li>
<li class="yellow" id="dropper">
<p><a href="#">About</a></p>
<p class="subtext">More info</p>
</li>
<li class="red" id="dropper">
<p><a href="#">Contact</a></p>
<p class="subtext">Get in touch</p>
</li>
<li class="blue" id="dropper">
<p><a href="#">Submit</a></p>
<p class="subtext">Send us your stuff!</p>
</li>
<li class="purple" id="dropper">
<p><a href="#">Terms</a></p>
<p class="subtext">Legal things</p>
</li>
</ul>
Jqueryコード-問題はここにある可能性があります:
$(document).ready(function(){
//Remove outline from links
$("a").click(function(){
$(this).blur();
});
//When mouse rolls over
$("#dropper").mouseover(function(){
$(this).stop().animate({height:'300px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
//When mouse is removed
$("#dropper").mouseout(function(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
CSSコード-問題はここにある可能性があります:
body{
font-family:"Lucida Grande", arial, sans-serif;
background:#F3F3F3;
}
ul{
margin:0;
padding:0;
}
li{
width:100px;
height:50px;
float:left;
color:#191919;
text-align:center;
overflow:hidden;
}
a{
color:#FFF;
text-decoration:none;
}
p{
padding:0px 5px;
}
.subtext{
padding-top:15px;
}
/*Menu Color Classes*/
.green{background:#6AA63B url('http://buildinternet.com/live/smoothmenu/images/green-item-bg.jpg') top left no-repeat;}
.yellow{background:#FBC700 url('http://buildinternet.com/live/smoothmenu/images/yellow-item-bg.jpg') top left no-repeat;}
.red{background:#D52100 url('http://buildinternet.com/live/smoothmenu/images/red-item-bg.jpg') top left no-repeat;}
.purple{background:#5122B4 url('http://buildinternet.com/live/smoothmenu/images/purple-item-bg.jpg') top left no-repeat;}
.blue{background:#0292C0 url('http://buildinternet.com/live/smoothmenu/images/blue-item-bg.jpg') top left no-repeat;}