javascript - CSS 菜单未居中； javascript 不适用？

Question

我似乎无法让这个动画 CSS 菜单正常工作...a) 它没有居中，我似乎无法让它居中(可能是因为 CSS 中的 UL 元素冲突？)和 b) javascript 不是'根本不适用。

请看这里出了什么问题: http://runic-paradise.com/

这里是它应该如何工作的: http://runic-paradise.com/animated-menu.html

HTML:

<ul class="menu">
    <li class="green">
        <p><a href="#">Home</a></p>
        <p class="subtext">The front page</p>
    </li>
    <li class="yellow">
        <p><a href="#">About</a></p>
        <p class="subtext">More info</p>
    </li>
    <li class="red">
        <p><a href="#">Contact</a></p>
        <p class="subtext">Get in touch</p>
    </li>
    <li class="blue">
        <p><a href="#">Submit</a></p>
        <p class="subtext">Send us your stuff!</p>
    </li>
    <li class="purple">
        <p><a href="#">Terms</a></p>
        <p class="subtext">Legal things</p>
    </li>
</ul>

Javascript:

$(document).ready(function(){

    //Fix Errors - http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/

    //Remove outline from links
    $("a").click(function(){
        $(this).blur();
    });

    //When mouse rolls over
    $("li").mouseover(function(){
        $(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

    //When mouse is removed
    $("li").mouseout(function(){
        $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

});

CSS:

ul.menu {
    margin: 0;
    padding: 0;
}

/*li{
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
}*/

a.menu{
    color:#FFF;
    text-decoration:none;
}

p.menu{
    padding: 0px 5px;
}

.subtext{
    padding-top:15px;
}

/*Menu Color Classes*/
.green{
    background:#6AA63B url('images/green-item-bg.jpg') top left no-repeat;
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
}

.yellow{
    background:#FBC700 url('images/yellow-item-bg.jpg') top left no-repeat;
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
}

.red{
    background:#D52100 url('images/red-item-bg.jpg') top left no-repeat;
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
}

.purple{
    background:#5122B4 url('images/purple-item-bg.jpg') top left no-repeat;
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
}

.blue{
    background:#0292C0 url('images/blue-item-bg.jpg') top left no-repeat;
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
}

Answer 1

您以错误的顺序加载脚本。

<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/animated-menu.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>

前两个脚本需要 jQuery 才能运行，但目前尚不可用。首先加载 jQuery。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/animated-menu.js" type="text/javascript"></script>