Result
jQuery
$(document).ready(function() { //ホバーイベントでアニメーションしながらサイズを変更 $("#nav a").hover(function() { $(this).animate({width: 225}, 300); }, function() { $(this).animate({width: 200}, 300); }); //ネスとされた要素を表示させる $("#nav li").hover( function() { $(this).find("ul:first").show(300); }, function() { $(this).find("ul:first").hide(300); });}); |
css
#nav ul{ list-style-type: none; margin: 0px; padding: 0px;}#nav a { background-color: #395f2d; border: 0; color: #ffffff; display: block; line-height: 1; margin: 0px 0 5px -15px; padding: 4px 0px 5px 20px; width: 200px;}#nav .current_page_item>a{ width: 225px !important;}#nav li:hover>a,#nav .current_page_item>a{ color: #dcbe87;}#nav .children{ display: none; margin-left: 35px;} |
