这是一款简单的Jquery滑动菜单,很适合横向导航的使用.

首先是html中一个简单的菜单结构,以图片和文字相结合的形式展现.

[sourcecode language='html']

• 
  
  Change your password
  
• 
  
  Suscribe to our RSS!
  
• 
  
  Choose your options!
  

[/sourcecode]

接下来是css样式
[sourcecode language='css']
#iconbar li {
float:left;
position:relative;
overflow: hidden;
margin-right:20px;
background:#E8E8F9;
border: 1px dashed #ffc0ff;
}
#iconbar a {
text-decoration: none;
outline: none;
color:#d00000;
display: block;
width: 24px;
padding: 10px;
cursor:pointer;
}
#iconbar span {
width: 100px;
height: 35px;
position: absolute;
display: none;
line-height:110%;
color:#409BED;
padding-left: 10px;
}
[/sourcecode]

嗯…

最后再加上Script脚本就完成了整个菜单的组成.
[sourcecode language='php']
jQuery.preloadImages = function()
{
for(var i = 0; i
jQuery(““).attr(“src”, arguments[i]);
}
jQuery.preloadImages(“key.gif”, “keyo.gif”, “rss.gif”, “rsso.gif”, “sel.gif”, “selo.gif”);
[/sourcecode]

[sourcecode language='php']
jQuery(document).ready(function(){

$(“#iconbar li a”).hover(
function(){
var iconName = $(this).children(“img”).attr(“src”);
var origen = iconName.split(“.gif”)[0];
$(this).children(“img”).attr({src: “” + origen + “o.gif”});
$(this).animate({ width: “140px” }, {queue:false, duration:”normal”} );
$(this).children(“span”).animate({opacity: “show”}, “fast”);
},
function(){
var iconName = $(this).children(“img”).attr(“src”);
var origen = iconName.split(“o.”)[0];
$(this).children(“img”).attr({src: “” + origen + “.gif”});
$(this).animate({ width: “24px” }, {queue:false, duration:”normal”} );
$(this).children(“span”).animate({opacity: “hide”}, “fast”);
});
});
[/sourcecode]

整个代码就包含了以上几个方阵 你可以在这个链接[ ilovecolors.com.ar ]预览效果

或者直接下载整个源码进行修改使用。

[ ilovecolors]