jQuery css3环形导航菜单
分类:实例代码
分享一段代码实例,它实现了环形导航菜单功能。
默认情况下,导航菜单是层叠的,点击就可以将它们展开。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <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>
jQuery css3环形导航菜单,这样的场景在实际项目中还是用的比较多的,关于jQuery css3环形导航菜单就介绍到这了。
jQuery css3环形导航菜单属于前端实例代码,有关更多实例代码大家可以查看。