滑动导航条设计

在滑动导航条的css代码编写过程中，学到的一个新的css选择器就是

navigation li:last-child{},这个实例是我上周写的，今天上班时刚好遇到需要用到这个选择器的情况，但是我只记得li:last,把后面的那个child给忘了，所以效果不出来，但是用jQuery的过滤选择器时是不用加child的，特地写下来记住这个差异。下面先看看滑动导航条的效果，由于主要目的是学会用jQuery实现一个功能，至于视觉效果上就没有加过多修饰了。

lavaLamp.png

大致效果就是，首先默认选中第一个导航菜单，当鼠标移动到其他导航上面时深灰色的背景颜色会跟着移动，这个效果用css就能实现。另一个动态的效果是移动鼠标时，在背景颜色移动的同时会有一个浅灰色的背景跟着弹性移动，这个移动较背景颜色的移动时间要推迟0.4S。这个效果就用jQuery实现的。
下面看看jQuery代码（js的自运行函数就不写了，直接写内容）：
为了方便后期维护，首先定义一个命名空间，将一些需要经常修改的值放里面
options = {
gap:18,
speed:400,
easing:'easeInOutElastic',
reset:500
}
第一步：声明变量并找到页面需要引用的文档对象
var nav = $('#navigation'),
current_item = nav.find('.focus'),
$lava = $('

');
第三行是动态生成一个导航菜单，接着需要将导航菜单加入到指定位置，并为其定义css样式：
$lava.appendTo(nav.find('ul'));
$lava.css({
width:current_item.outerWidth(),
height:current_item.outerHeight() + options.gap,
background:'#eee',
position:'absolute',
top:current_item.position().top - options.gap/2,
left:current_item.position().left
});
这里的appendTo方法是将刚刚动态生成的li元素加到ul元素之后。
下一步是对页面上的每一个导航菜单都加上事件监听，下面我们就为导航菜单（li）编写时间感知代码：
nav.find('li')
.bind('mouseover focusin',function(){
$lava.animate({
left:$(this).position().left,
width:$(this).outerWidth()
},{
duration:options.speed,
easing:options.easing,
queue:false
})
})
上面语义就是当li获取焦点时，就把我们动态加到页面上的浅色导航条以动画的方式跟着定位到当前获焦的li上面来。
写到这jQuery代码就写得差不多了，要的效果也基本实现，就差一个li失去焦点时的处理代码，根据实际情况，可写可不写。