jquery css3实现的环形导航菜单

最新推荐文章于 2025-10-03 14:40:37 发布
翻译最新推荐文章于 2025-10-03 14:40:37 发布 · 1.4k 阅读
jquery 专栏收录该内容
2 篇文章
订阅专栏
本文介绍了一种使用HTML和CSS实现的环形导航菜单。该菜单默认为层叠样式，通过点击可以展开。代码中利用了jQuery进行交互操作，使菜单具备动态效果。
分享一段代码实例，它实现了环形导航菜单功能。
默认情况下，导航菜单是层叠的，点击就可以将它们展开。
代码实例如下:
 
  
   
    
        
         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
          >