如果用傳統(tǒng)的方法制作這個翻轉(zhuǎn)菜單,至少需要把圖片切成10椋掛由螶S代碼,在圖片按鈕上再加行為,現(xiàn)在完全用CSS來實現(xiàn),圖片只要一張,見下圖。

CSS代碼:
#imgmenu{
width: 450px;
height: 25px; /*高度是背景圖片的一半*/
background: url(../images/navbg.gif);
list-style-type: none;
padding: 0px;
margin: 0px;
}
#imgmenu li{
float: left;
}
#imgmenu li a{
display: block;
width: 90px;
height: 25px;
}
#imgmenu li#home a:hover,#activeh{
background: url(../images/navbg.gif) 0 -25px;
/*翻轉(zhuǎn)時背景圖的位置,左邊0px,頂部-25px,
背景圖的下半部分,下同*/
}
#imgmenu li#about a:hover,#activea{
background: url(../images/navbg.gif) -90px -25px;
/*第二個菜單的位置距左邊90px,
每個菜單的寬度是90px*/
}
#imgmenu li#pro a:hover,#activep{
background: url(../images/navbg.gif) -180px -25px;
}
#imgmenu li#faq a:hover,#activef{
background: url(../images/navbg.gif) -270px -25px;
}
#imgmenu li#contact a:hover,#activec{
background: url(../images/navbg.gif) -360px -25px;
}
設計的更體貼,照顧純文本瀏覽的朋友:
可以在LI內(nèi)套入SPAN元素,加入文本鏈接,在風格中設SPAN不可見。
您可能感興趣的文章:- 調(diào)整CSS類型的順序改變鏈接翻滾效果
- 代碼實例之純CSS代碼實現(xiàn)翻頁效果
- 7款吸引人眼球的jQuery/CSS3特效實例分享
- wap手機圖片滑動切換特效無css3元素js腳本編寫
- 2014 HTML5/CSS3熱門動畫特效TOP10
- jQuery+CSS3實現(xiàn)樹葉飄落特效
- jquery+css3實現(xiàn)網(wǎng)頁背景花瓣隨機飄落特效
- js+css實現(xiàn)上下翻頁相冊代碼分享
- JS+CSS實現(xiàn)鼠標滑過時動態(tài)翻滾的導航條效果
- CSS3實現(xiàn)動態(tài)翻牌效果 仿百度貼吧3D翻牌一次動畫特效