jquery css3实现的环形导航菜单

分享一段代码实例，它实现了环形导航菜单功能。

默认情况下，导航菜单是层叠的，点击就可以将它们展开。

代码实例如下:

 

  

   

    

        

         001
        
        

         002
        
        

         003
        
        

         004
        
        

         005
        
        

         006
        
        

         007
        
        

         008
        
        

         009
        
        

         010
        
        

         011
        
        

         012
        
        

         013
        
        

         014
        
        

         015
        
        

         016
        
        

         017
        
        

         018
        
        

         019
        
        

         020
        
        

         021
        
        

         022
        
        

         023
        
        

         024
        
        

         025
        
        

         026
        
        

         027
        
        

         028
        
        

         029
        
        

         030
        
        

         031
        
        

         032
        
        

         033
        
        

         034
        
        

         035
        
        

         036
        
        

         037
        
        

         038
        
        

         039
        
        

         040
        
        

         041
        
        

         042
        
        

         043
        
        

         044
        
        

         045
        
        

         046
        
        

         047
        
        

         048
        
        

         049
        
        

         050
        
        

         051
        
        

         052
        
        

         053
        
        

         054
        
        

         055
        
        

         056
        
        

         057
        
        

         058
        
        

         059
        
        

         060
        
        

         061
        
        

         062
        
        

         063
        
        

         064
        
        

         065
        
        

         066
        
        

         067
        
        

         068
        
        

         069
        
        

         070
        
        

         071
        
        

         072
        
        

         073
        
        

         074
        
        

         075
        
        

         076
        
        

         077
        
        

         078
        
        

         079
        
        

         080
        
        

         081
        
        

         082
        
        

         083
        
        

         084
        
        

         085
        
        

         086
        
        

         087
        
        

         088
        
        

         089
        
        

         090
        
        

         091
        
        

         092
        
        

         093
        
        

         094
        
        

         095
        
        

         096
        
        

         097
        
        

         098
        
        

         099
        
        

         100
        
        

         101
        
        

         102
        
        

         103
        
        

         104
        
        

         105
        
        

         106
        
        

         107
        
        

         108
        
        

         109
        
        

         110
        
        

         111
        
        

         112
        
        

         113
        
        

         114
        
        

         115
        
        

         116
        
        

         117
        
        

         118
        
        

         119
        
        

         120
        
        

         121
        
        

         122
        
        

         123
        
        

         124
        
        

         125
        
        

         126
        
        

         127
        
        

         128
        
        

         129
        
        

         130
        
        

         131
        
        

         132
        
        

         133
        
        

         134
        
        

         135
        
        

         136
        
        

         137
        

        

         

          <!doctype html>
         
         

          <
          html
          >
         
         

          <
          head
          >
         
         

          <
          meta 
          charset
          =
          "utf-8"
          >
         
         

          <
          title
          >环形导航菜单</
          title
          >
         
         

          <
          style 
          type
          =
          "text/css"
          >
         
         

          html, body, div, dt, dl, nav {
         
         

            
          margin: 0;
         
         

            
          padding: 0;
         
         

            
          color: #000;
         
         

          }
         
         

            
         
         

          nav {
         
         

            
          position: relative;
         
         

            
          margin: 100px auto auto 100px;
         
         

            
          font-weight: bold;
         
         

          }
         
         

            
         
         

          div:hover, dt:hover {
         
         

            
          cursor: pointer;
         
         

          }
         
         

            
         
         

          div {
         
         

            
          position: absolute;
         
         

            
          top: 0;
         
         

            
          left: 0;
         
         

            
          font-size: 20px;
         
         

            
          width: 100px;
         
         

            
          height: 100px;
         
         

            
          line-height: 100px;
         
         

            
          text-align: center;
         
         

            
          border-radius: 100px;
         
         

            
          color: #FFF;
         
         

            
          z-index: 1;
         
         

            
          transition: 1.125s cubic-bezier(0.39, 1.52, 0.46, 0.92);
         
         

            
          border: 6px solid transparent;
         
         

            
          transform: scale3d(1,1,1);
         
         

            
          transform-origin: top left;
         
         

          }
         
         

            
         
         

          div:before {
         
         

            
          content: "menu";
         
         

          }
         
         

            
         
         

          dt {
         
         

            
          position: absolute;
         
         

            
          width: 100px;
         
         

            
          height: 100px;
         
         

            
          line-height: 100px;
         
         

            
          border-radius: 80px;
         
         

            
          top: 0;
         
         

            
          left: 0;
         
         

            
          text-align: center;
         
         

            
          font-size: 22px;
         
         

            
          font-weight: bold;
         
         

          }
         
         

            
         
         

          dt:nth-child(1) {
         
         

            
          background-color: #ffda0d;
         
         

            
          transform: translate(20px,15px) rotate(-180deg);
         
         

            
          transition: .5s cubic-bezier(0.39, 1.52, 0.46, 0.92);
         
         

          }
         
         

            
         
         

          dt:nth-child(2) {
         
         

            
          background-color: #ff0000;
         
         

            
          transform: translate(8px,3px) rotate(-180deg);
         
         

            
          transition: .7s cubic-bezier(0.39, 1.52, 0.46, 0.92);
         
         

          }
         
         

            
         
         

          dt:nth-child(3) {
         
         

            
          background-color: #8eaf00;
         
         

            
          transform: translate(1px,14px) rotate(-180deg);
         
         

            
          transition: .9s cubic-bezier(0.39, 1.52, 0.46, 0.92);
         
         

          }
         
         

            
         
         

          dt:nth-child(4) {
         
         

            
          background-color: #3e596e;
         
         

            
          transform: translate(18px,0) rotate(-180deg);
         
         

            
          transition: 1.1s cubic-bezier(0.39, 1.52, 0.46, 0.92);
         
         

          }
         
         

            
         
         

          dt:nth-child(5) {
         
         

            
          background-color: pink;
         
         

            
          transform: translate(-2px,2px) rotate(-180deg);
         
         

            
          transition: 1.3s cubic-bezier(0.39, 1.52, 0.46, 0.92);
         
         

          }
         
         

            
         
         

          .active div {
         
         

            
          color: #000;
         
         

            
          border: 6px solid #CCC;
         
         

          }
         
         

            
         
         

          .active div:before {
         
         

            
          content: "close";
         
         

          }
         
         

            
         
         

          .active dt:nth-child(1) {
         
         

            
          transform: translate(200px,0);
         
         

          }
         
         

            
         
         

          .active dt:nth-child(2) {
         
         

            
          transform: translate(185px,77px);
         
         

          }
         
         

            
         
         

          .active dt:nth-child(3) {
         
         

            
          transform: translate(142px,142px);
         
         

          }
         
         

            
         
         

          .active dt:nth-child(4) {
         
         

            
          transform: translate(77px,185px);
         
         

          }
         
         

            
         
         

          .active dt:nth-child(5) {
         
         

            
          transform: translate(0,200px);
         
         

          }
         
         

          </
          style
          >
         
         

          </
          head
          >
         
         

          <
          body
          >
         
         

            
          <
          nav
          >
         
         

              
          <
          div
          ></
          div
          >
         
         

              
          <
          dl
          >
         
         

                
          <
          dt
          >壹</
          dt
          >
         
         

                
          <
          dt
          >贰</
          dt
          >
         
         

                
          <
          dt
          >叁</
          dt
          >
         
         

                
          <
          dt
          >肆</
          dt
          >
         
         

                
          <
          dt
          >伍</
          dt
          >
         
         

              
          </
          dl
          >
         
         

            
          </
          nav
          >
         
         

            
          <
          script 
          src
          =
          "http://libs.baidu.com/jquery/1.9.0/jquery.js"
          ></
          script
          >
         
         

            
          <
          script 
          type
          =
          "text/javascript"
          >
         
         

            
          $("div").click(function(){
         
         

              
          $("nav").toggleClass("active");
         
         

            
          });
         
         

            
          </
          script
          >
         
         

          </
          body
          >
         
         

          </
          html
          >