CSS菜單不居中; JavaScript不適用？

我似乎無法得到這個動畫的CSS菜單工作... a）它不居中，我似乎無法得到它居中（可能是因爲在UL衝突的CSS元素？）和b）的JavaScript不是應用。CSS菜單不居中; JavaScript不適用？

，並在這裏爲它應該如何工作： 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; 
}

來源

2013-11-01 runelynx

兩個鏈接指向相同的JS和CSS所以即時猜測，唯一的區別必須以某種方式的問題 - 這是我已附加到主頁上的額外的CSS表:(但我真的不想調整所有隻是爲菜單 – runelynx

看看[JavaScript錯誤控制檯]（http://www.netmagazine.com/tutorials/javascript-debugging-beginners）並查看錯誤。 – JJJ

看起來像你在jquery中得到一個腳本錯誤，當頁面加載與緩動不是一個函數的引用。 – kinakuta

您按錯誤順序加載腳本。

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

來源

2013-11-01 07:45:51 JJJ

非常好的地方。一個問題。你爲什麼做出這個答案社區Wiki？ – MarsOne

因爲這個問題太本地化了，應該關閉，但是這個時間太長而無法評論。它不回答CSS問題。 – JJJ

這是什麼意思？我錯了嗎？ – runelynx

試試這個，

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已加載。

來源

2013-11-01 07:44:17

我把easing.js鏈接下載它，並把它放在你的head標籤

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

來源

2013-11-01 08:00:53

CSS菜單不居中; JavaScript不適用？

回答

相關問題