JavaScript+CSS仿Mootools竖排动画菜单

2024-09-05 12:20:07

字体：大中小

来源：转载

供稿：网友

JavaScript+CSS仿Mootools竖排黑色动画菜单，并非使用了Mootools，但效果却和使用了Mootools差不多，动画效果平滑，操作舒服，给菜单增色不少。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>竖排黑色动画菜单</title><style type="text/css">#menu { height: auto; width: 350px; float: left;}body { overflow: auto; background: #333; color: #FFF; font: 12px Arial, Helvetica, sans-serif;}#menu li { display: block; list-style-type: none;}#menu a { font-size: 11px; color: #FFF; padding-right: 10px; padding-left: 10px; line-height: 30px; text-decoration: none; background: #000 url(/jscss/demoimg/200907/bg.jpg) no-repeat left; height: 30px; width: 180px; display: block; outline:0; margin-bottom: 5px;}#menu a:hover { color: #CCFF00; background: #000 url(/jscss/demoimg/200907/bg1.jpg) no-repeat left;}</style></head><body> <div id="menu">  <ul>   <li>JQuery插件</li>   <li>Ext 皮肤</li>   <li>CSS特效</li>   <li>Ajax技巧集</li>  </ul> </div><script type="text/javascript">var $ = function(_sId){return typeof _sId == 'string' ? document.getElementById(_sId) : _sId;}var Each=function (a,fn){for(var i=0;i</body></html>

上一篇：简单明了的CSS导航条

下一篇：最简Table选项卡