css给你灵感—div + css 弧形导航菜单

今天看到了一个利用css+div制作的弧形导航菜单，感觉很不错，这种菜单相对Flash制作的环形菜单来说，对搜索引擎更加友好！分享给大家制作的方法，希望这个css能带给你一些灵感。

学会了这种方法，你也可以，做成其他的样式的，半弧形，椭圆形，只要你有创意。有什么问题，希望大家留言。

下面是效果，鼠标放上去会有文字提示在弧形中间出来。

• Home
  自由人网站
  www.freeren.org
• Webdesign
  网页标准设计
• Contact
  联系我们
• JavaScript
  web标准程序
• DowmLoad
  web标准下载
• Search
  网站搜索
• Standard
  web标准规范
• Case
  我们的作品 经典网站欣赏

这里是需要的图片，我缩小显示了。

导航HTML代码结构：

<ul id="circularMenu">
    <li class="home"><a href="http://www.freeren.org/"><b>Home<br /><span>自由人网站<br />www.freeren.org</span></b></a></li>
    <li class="chat"><a href="#"><b>Webdesign<br /><span>网页标准设计</span></b></a></li>
    <li class="email"><a href="#"><b>Contact<br /><span>联系我们</span></b></a></li>
    <li class="shop"><a href="#"><b>JavaScript<br /><span>web标准程序</span></b></a></li>
    <li class="delivery"><a href="#"><b>DowmLoad<br /><span>web标准下载</span></b></a></li>
    <li class="search"><a href="#"><b>Search<br /><span>网站搜索</span></b></a></li>
    <li class="address"><a href="#"><b>Standard<br /><span>web标准规范</span></b></a></li>
    <li class="upload"><a href="#"><b>Case<br /><span>我们的作品 经典网站欣赏</span></b></a></li>
</ul>

样式表

<style type="text/css">
<!--
#circularMenu {
    padding:0;
    margin:0 auto;
    list-style:none;
    position:relative;
    width:300px;
    height:300px;
    background:#fff url(images/background.gif) no-repeat;
}
#circularMenu li {
    display:block;
    width:60px;
    height:60px;
    position:absolute;
    background:url(images/ico.gif) no-repeat;
}
#circularMenu li.home {
    left:120px;
    top:4px;
    background-position:4px 4px;
}
#circularMenu li.chat {
    left:200px;
    top:40px;
    background-position:-78px 4px;
}
#circularMenu li.upload {
    left:35px;
    top:40px;
    background-position:-588px 4px;
}
#circularMenu li.email {
    left:230px;
    top:115px;
    background-position:-164px 4px;
}
#circularMenu li.address {
    left:5px;
    top:115px;
    background-position:-502px 4px;
}
#circularMenu li.shop {
    left:200px;
    top:190px;
    background-position:-244px 4px;
}
#circularMenu li.search {
    left:35px;
    top:190px;
    background-position:-420px 4px;
}
#circularMenu li.delivery {
    left:120px;
    top:225px;
    background-position:-337px 4px;
}
#circularMenu li a b {
    display:none;
}
#circularMenu li a {
    display:block;
    width:60px;
    height:60px;
    text-align:center;
}
#circularMenu li a:hover {
    text-decoration:none;
}
#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>

采用了背景图片的滑动门技术，和鼠标的选择器的hover效果。

这里主要的变化地方是li的定位。