純CSS實現圖標圍成的圓環菜單

2024-09-05 12:19:58

字體：大中小

來源：轉載

供稿：網友

純CSS實現由美麗的圖標圍成的圓環狀菜單，菜單的任一項都會有鏈接提示，你最好是給此菜單加個合適的背景，這樣它就更完美了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>純CSS圓環菜單</title><style type="text/css">#circularMenu {padding:0; margin:0 auto; list-style:none; position:relative; width:300px; height:300px; background:#fff url(/jscss/demoimg/200906/background.gif) no-repeat;}#circularMenu li {display:block; width:60px; height:60px; position:absolute;}#circularMenu li.home {left:120px; top:4px; background:url(/jscss/demoimg/200906/home.gif) no-repeat center center;}#circularMenu li.chat {left:200px; top:40px; background:url(/jscss/demoimg/200906/chat.gif) no-repeat center center;}#circularMenu li.upload {left:35px; top:40px; background:url(/jscss/demoimg/200906/photo.gif) no-repeat center center;}#circularMenu li.email {left:230px; top:115px; background:url(/jscss/demoimg/200906/email.gif) no-repeat center center;}#circularMenu li.address {left:5px; top:115px; background:url(/jscss/demoimg/200906/address.gif) no-repeat center center;}#circularMenu li.shop {left:200px; top:190px; background:url(/jscss/demoimg/200906/shop.gif) no-repeat center center;}#circularMenu li.search {left:35px; top:190px; background:url(/jscss/demoimg/200906/search.gif) no-repeat center center;}#circularMenu li.delivery {left:120px; top:225px; background:url(/jscss/demoimg/200906/delivery.gif) no-repeat center center;}#circularMenu li a b {display:none;}#circularMenu li a {display:block; width:60px; height:60px; text-align:center;}#circularMenu li a:hover {background:url(/jscss/demoimg/200906/circle.gif); text-decoration:none; font-family:georgia, serif;}#circularMenu li a:hover b {position:absolute; display:block; width:100px; height:100px; font-size:16px; color:#63352c; background:#fff;}#circularMenu li a:hover b span {display:block; font-size:12px; color:#888; font-weight:normal; margin-top:15px;}#circularMenu li.home a:hover b {left:-22px; top:100px;}#circularMenu li.chat a:hover b {left:-102px; top:64px;}#circularMenu li.upload a:hover b {left:63px; top:64px;}#circularMenu li.email a:hover b {left:-132px; top:-11px;}#circularMenu li.address a:hover b {left:93px; top:-11px;}#circularMenu li.shop a:hover b {left:-102px; top:-87px;}#circularMenu li.search a:hover b {left:63px; top:-87px;}#circularMenu li.delivery a:hover b {left:-22px; top:-121px;}</style></head><body><ul id="circularMenu">	<li id="trvbhfd" class="home">源碼愛好者 回到首頁哦</li>	<li id="dbdlrtr" class="chat">網頁特效 精品CSS/JavaScript代碼</li>	<li id="v5pjbnx" class="email">EMAIL 給我發Email</li>	<li id="5djbv5n" class="shop">最新更新 最新更新的內容</li>	<li id="frvp55b" class="delivery">下載排行榜 熱門的源代碼資源</li>	<li id="db35zzj" class="search">SEARCH 搜索源代碼</li>	<li id="nlbdftf" class="address">Books 留言本</li>	<li id="nlfhz3b" class="upload">UPLOAD 發布你的源代碼</li></ul></body></html>

上一篇：CSS實現多彩的六邊形蜂窩菜單

下一篇：展開、折疊的垂直兩級菜單，可用到后臺左側