在滑動導(dǎo)航條的css代碼編寫過程中，學(xué)到的一個新的css選擇器就是
navigation li:last-child{},這個實例是我上周寫的辜昵，今天上班時剛好遇到需要用到這個選擇器的情況，但是我只記得li:last,把后面的那個child給忘了玛追，所以效果不出來促煮，但是用jQuery的過濾選擇器時是不用加child的拨匆，特地寫下來記住這個差異讯检。下面先看看滑動導(dǎo)航條的效果琐鲁，由于主要目的是學(xué)會用jQuery實現(xiàn)一個功能，至于視覺效果上就沒有加過多修飾了人灼。
大致效果就是围段，首先默認選中第一個導(dǎo)航菜單，當鼠標移動到其他導(dǎo)航上面時深灰色的背景顏色會跟著移動挡毅，這個效果用css就能實現(xiàn)蒜撮。另一個動態(tài)的效果是移動鼠標時暴构，在背景顏色移動的同時會有一個淺灰色的背景跟著彈性移動跪呈，這個移動較背景顏色的移動時間要推遲0.4S。這個效果就用jQuery實現(xiàn)的取逾。
下面看看jQuery代碼（js的自運行函數(shù)就不寫了耗绿，直接寫內(nèi)容）：
為了方便后期維護，首先定義一個命名空間砾隅，將一些需要經(jīng)常修改的值放里面
options = {
gap:18,
speed:400,
easing:'easeInOutElastic',
reset:500
}
第一步：聲明變量并找到頁面需要引用的文檔對象
var nav = $('#navigation'),
current_item = nav.find('.focus'),
$lava = $('<li class="lava" />');
第三行是動態(tài)生成一個導(dǎo)航菜單误阻，接著需要將導(dǎo)航菜單加入到指定位置，并為其定義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方法是將剛剛動態(tài)生成的li元素加到ul元素之后晴埂。
下一步是對頁面上的每一個導(dǎo)航菜單都加上事件監(jiān)聽究反，下面我們就為導(dǎo)航菜單（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獲取焦點時，就把我們動態(tài)加到頁面上的淺色導(dǎo)航條以動畫的方式跟著定位到當前獲焦的li上面來儒洛。
寫到這jQuery代碼就寫得差不多了精耐，要的效果也基本實現(xiàn)，就差一個li失去焦點時的處理代碼琅锻，根據(jù)實際情況卦停，可寫可不寫。
