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

嘗試這個，

的CSS

ul.menu{
    height: 50px;
    list-style: none outside none;
    margin: 0 auto;
    width: 500px;
}

您可以短li-classes一樣，

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

/*Menu Color Classes*/
.green{
    background:#6AA63B url('images/green-item-bg.jpg') top left no-repeat;
}    
.yellow{
    background:#FBC700 url('images/yellow-item-bg.jpg') top left no-repeat;
}    
.red{
    background:#D52100 url('images/red-item-bg.jpg') top left no-repeat;
}    
.purple{
    background:#5122B4 url('images/purple-item-bg.jpg') top left no-repeat;
}    
.blue{
    background:#0292C0 url('images/blue-item-bg.jpg') top left no-repeat;
}

您的animation 也可以工作，並且所有js都已加載。

Answer 2

您以錯誤的順序加載腳本。

<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>

Answer 3

我把easing.js鏈接下載並放在您的head標簽中

https://github.com/ai/easings.net