本節教程介紹一個jQuery和CSS3創建絢麗的菜單，當你在瀏覽一些網站的時候，是不是看到過很絢麗的菜單，當你在菜單上移動鼠標的時候會有一個圓角高亮具有透明度的氣泡隨着鼠標很酷滴動來動去。今天我們就來介紹一下這個效果是怎麼實現的, Enjoy it.
這裏只介紹第一種風格的jQuery和CSS3菜單，其他的風格樣式你可以在源碼中找到，html的結構都是一樣的。菜單在firefox和chrom下效果最好
HTML標籤結構：
和上一個菜單一樣還是使用簡單的有序列表ul，這裏發現外面有一個帶有class=”fancy”的div，這個是必須的因爲我們後面需要使用.fancy做選擇器用jQuery爲菜單加上絢麗的效果。
class爲floatr的div是菜單中隨着鼠標來回移動的透明氣泡，後面會列出樣式。同時使用active類來標識當前激活的菜單項。
1 <div class="fancy"> 2 <ul> 3 <li class="active"><a href="">首頁</a></li> 4 <li><a href="">前端開發</a></li> 5 <li><a href="">CSS3</a></li> 6 <li><a href="">JavaScript</a></li> 7 <li><a href="">HTML5</a></li> 8 <li><a href="">DotNet</a></li> 9 <li><a href="">tystudio.net</a></li> 10 <li><a href="">論壇</a></li> 11 </ul> 12 <div class="floatr"></div> 13 </div>
CSS樣式：
ul基礎樣式：
移除ul的瀏覽器默認樣式，去除鏈接的下滑線，同時制定菜單項hover和激活時使用相同的顏色，這樣做的目的時當用戶在各個菜單之間切換能夠清晰的分辨處當前激活的是哪個菜單項，一個小細節~
1 ul 2 { 3 margin: 0; 4 padding: 0; 5 z-index: 300; 6 position: absolute; 7 } 8 9 ul li 10 { 11 list-style: none; 12 float: left; 13 text-align: center; 14 } 15 16 ul li a 17 { 18 padding: 0 20px; 19 color: #413E4A; 20 text-align: center; 21 font-weight: bold; 22 text-decoration: none; 23 } 24 25 ul li a:hover 26 { /***指定hover時菜單項顏色****/ 27 color: #7A6A53; 28 text-decoration: none; 29 } 30 31 32 .active a 33 { /***指定激活的菜單項顏色****/ 34 color: #7A6A53; 35 }
ul外層div的樣式：
設置了一些css3效果，具體請看代碼中的註釋：
1 .fancy 2 { 3 position: relative; /***注意這裏的相對定位****/ 4 border: 1px solid #d6d6d6; 5 background: #fff; 6 padding: 15px; 7 height: 18px; 8 /***下面是一些css3的美化效果，圓角盒陰影，背景漸變****/ 9 -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); 10 -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); 11 border-radius: 10px; 12 -moz-border-radius: 10px; 13 -webkit-border-radius: 10px; 14 background: -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204))); 15 background: -moz-linear-gradient(top, rgb(240,240,240), rgb(204,204,204)); 16 }
隨鼠標滑動氣泡div的樣式：
同樣是也是css3的美化效果，透明背景，圓角等。
1 .floatr 2 { 3 position: absolute; /***注意這裏的絕對定位****/ 4 top: 10px; 5 z-index: 50; 6 width: 70px; 7 height: 30px; 8 border-radius: 8px; 9 -moz-border-radius: 8px; 10 -webkit-border-radius: 8px; 11 background: rgba(255,255,255,.8); 12 transition: all .4s ease-in-out; 13 -webkit-transition: all .4s ease-in-out; 14 -moz-transition: all .4s ease-in-out; 15 }
注意移動的氣泡是絕對定位，外層div是相對定位，因爲我們在js中會計算氣泡相對外層url的絕對位置，來設置滑動的位置。
最後是jQuery代碼：
具體的解釋我都放在了代碼的註釋裏，請閱讀代碼中的註釋：
1 $(document).ready(function () { 2 3 //獲得當前激活菜單項的left，計算出li在ul中的位置 4 var dleft = $('.fancy li.active').offset().left - $('.fancy').offset().left; 5 6 //獲得菜單項li的寬度 7 var dwidth = $('.fancy li.active').width() + "px"; 8 9 //設置當前滑動氣泡位置和寬度 10 $('.floatr').css({ 11 "left": dleft + "px", 12 "width": dwidth 13 }); 14 15 //綁定hover事件 16 $('.fancy li').hover(function () { 17 18 //hover in 事件，這裏加上15是氣泡div的padding的值 19 //計算hover到的菜單項的left和width 20 var left = $(this).offset().left - ($(this).parents('.fancy').offset().left + 15); 21 var width = $(this).width() + "px"; 22 23 //設置氣泡水平移動動畫，垂直移動爲0 24 var sictranslate = "translate(" + left + "px, 0px)"; 25 26 $(this).parent('ul').next('div.floatr').css({ 27 "width": width, 28 "-webkit-transform": sictranslate, 29 "-moz-transform": sictranslate, 30 "-ms-transform": sictranslate, 31 "-o-transform": sictranslate 32 }); 33 34 }, 35 36 //hover out事件 37 function () { 38 39 //找到同胞元素中的激活的菜單項li，計算出left和width 40 var left = $(this).siblings('li.active').offset().left - ($(this).parents('.fancy').offset().left + 15); 41 var width = $(this).siblings('li.active').width() + "px"; 42 43 //設置氣泡水平移動動畫，垂直移動爲0 44 var sictranslate = "translate(" + left + "px, 0px)"; 45 $(this).parent('ul').next('div.floatr').css({ 46 "width": width, 47 "-webkit-transform": sictranslate, 48 "-moz-transform": sictranslate, 49 "-ms-transform": sictranslate, 50 "-o-transform": sictranslate 51 }); 52 53 }).click(function () { 54 55 //點擊之後爲當前點擊菜單加上active類，同時移除其它菜單上的active類。 56 $(this).siblings('li').removeClass('active'); 57 58 $(this).addClass('active'); 59 60 return false; 61 62 }); 63 64 });
ok全部教程到此結束，查看演示