CSS3车轮导航菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3车轮导航菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.htm):

<!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=utf-8" />
<title>分享一款漂亮的CSS3车轮菜单--W3Cfuns.com</title>
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" />
<!--[if lt IE 9]>
<link rel="stylesheet" href="styles/ie.css" media="screen" />
<![endif]-->
</head>

<body>
<div id="menu-wrap">
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<div class="wrap4"> 
<span class="img1"><img class="orbit orbit-frame" src="images/card18.jpg" alt="card08" /></span>

<div class="completer"></div>
<div class="completer2"></div>
<div class="wrap5">
<div class="nav-holder">

<!-- start menu !-->

<ul class="menuBuild">

  <li id="menu1"><a href="#">Menu Item 1</a>
    <ul class="submenu sub1">
      <li class="first"><a href="#">Submenu Item</a></li>

      <li class="second"><a href="#">Submenu Item</a></li>
      <li><a href="#">Submenu Item</a></li>
      <li class="third"><a href="#">Submenu Item</a></li>
      <li class="last"><a href="#">Submenu Item</a></li>
    </ul>
  </li>
  
  <li id="menu2"><a href="#">Menu Item 2</a>

    <ul class="submenu sub2">
      <li class="first"><a href="#">Submenu Item</a></li>
      <li class="second"><a href="#">Submenu Item</a></li>
    </ul>
  </li>
  
  <li id="menu3"><a href="#">Menu Item 3</a>
    <ul class="submenu sub3">

      <li class="first"><a href="#">Submenu Item</a></li>
      <li class="second"><a href="#">Submenu Item</a></li>
      <li><a href="#">Submenu Item</a></li>
    </ul>
  </li>
  
  <li id="menu4"><a href="#">Menu Item 4</a>
    <ul class="submenu sub4">

      <li class="first"><a href="#">Submenu Item</a></li>
      <li class="second"><a href="#">Submenu Item</a></li>
      <li><a href="#">Submenu Item</a></li>
    </ul>
  </li>
  
</ul>

<!-- end menu !-->

</div><!-- nav holder !-->
</div><!-- wrap5 !-->
</div><!-- wrap4 !-->
</div><!-- wrap3 !-->
</div><!-- wrap2 !-->
</div><!-- wrap1 !-->
</div><!-- menu-wrap !-->


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</body>
</html>

CSS代码(ie.css):

@charset "utf-8";/* CSS Document */
/***********************************************These styles are important to make sure everything displays properly in Internet Explorer***********************************************/
ul.menuBuild ul.submenu li,ul.menuBuild ul.submenu li.first,ul.menuBuild ul.submenu li.second,ul.menuBuild ul.submenu li.third,ul.menuBuild ul.submenu li.last,ul.menuBuild li > ul,ul.menuBuild li#menu1,ul.menuBuild li#menu2,ul.menuBuild li#menu3,ul.menuBuild li#menu4,ul.menuBuild li#menu1,ul.menuBuild li#menu2,ul.menuBuild li#menu3,ul.menuBuild li#menu4,ul.menuBuild li#menu2,ul.menuBuild li#menu3,ul.menuBuild li#menu4,ul.menuBuild li#menu2 > ul,ul.menuBuild li#menu3 > ul,ul.menuBuild li#menu4 > ul,.wrap1,.wrap2,.wrap3,.wrap4,.wrap5,.nav-holder,.completer,.completer2{behavior:url(styles/csspie/PIE.php);}
/* CSS3 IE fix - Supports 'border-radius','box-shadow','border-image',-pie-background',liinear-gradients','RGBA' */
ul.menuBuild ul.submenu li{filter:alpha(opacity=70);}
/* IE has too many problems for gradual opacity so we'll just use 70 for all submenus*/
.completer,.completer2{display:none;}
.nav-holder{border-bottom-style:none;height:0px;}

附件:下载该文件资源,减少时间成本(增值服务)