<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SVG circular menu</title> <style type="text/css"> BODY { font-family: Helvetica, Arial, sans-serif; } .ig { position: relative; fill: #B9BEC4; width: 420px; height: 335px; } .ig SVG { position: relative; top: 60px; left: 87px; } .ig__part { cursor: pointer; } .ig__part:hover, .ig__part.active { fill: #296C97; } .ig__captions { list-style: none; padding-left: 0; text-transform: uppercase; font-size: 12px; line-height: 1.25em; } .ig__caption { display: block; padding: 5px; color: #888888; text-decoration: none; position: absolute; text-align: center; } .ig__caption--0 { top: 8px; left: 142px; } .ig__caption--1 { top: 47px; left: 278px; } .ig__caption--2 { top: 170px; left: 318px; } .ig__caption--3 { top: 265px; left: 260px; } .ig__caption--4 { top: 286px; left: 98px; } .ig__caption--5 { top: 200px; left: 10px; } .ig__caption--6 { top: 83px; left: 10px; } .log { font-size: 10px; color: #aaaaaa; } </style> </head> <body> <div class="ig"> <div class="ig__captions"> <a class="ig__caption ig__caption--0" href="#link1">Caption 1</a> <a class="ig__caption ig__caption--1" href="#link2">Caption 2</a> <a class="ig__caption ig__caption--2" href="#link3">Caption 3</a> <a class="ig__caption ig__caption--3" href="#link4">Caption 4</a> <a class="ig__caption ig__caption--4" href="#link5">Caption 5</a> <a class="ig__caption ig__caption--5" href="#link6">Caption 6</a> <a class="ig__caption ig__caption--6" href="#link7">Caption 7</a> </div> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="211px" height="210.9px" viewBox="0 0 211 210.9" enable-background="new 0 0 211 210.9" xml:space="preserve"> <g class="ig__part ig__part--0"> <path stroke="#FFFFFF" stroke-miterlimit="10" d="M48.1,17.7l13.3,20.6c19.9-13.1,44.8-17.4,69.4-9.1l7.9-23.3 C108.4-4.4,75.5-0.5,47.9,17.6l0.1,0C48,17.6,48.1,17.7,48.1,17.7z"/> </g> <g class="ig__part ig__part--1"> <path stroke="#FFFFFF" stroke-miterlimit="10" d="M180.4,77.4l23-8.6c-11.4-31-34.4-52.7-64.7-63l-7.9,23.3 C156.4,37.8,172.4,55.5,180.4,77.4z"/> </g> <g class="ig__part ig__part--6"> <path stroke="#FFFFFF" stroke-miterlimit="10" d="M30,79.4c5.9-17.5,17.4-31.6,31.7-41L48.1,17.7 C20.5,35.8,4.7,61.9,1.4,94.8l24.7,2.5C26.7,91.3,27.9,85.3,30,79.4z"/> </g> <g class="ig__part ig__part--5"> <path stroke="#FFFFFF" stroke-miterlimit="10" d="M26.1,97.3L1.4,94.8c-3.3,32.9,7.9,63.3,31.8,86.1l17.3-18.1 C32.9,146.1,23.7,121.9,26.1,97.3z"/> </g> <g class="ig__part ig__part--4"> <path stroke="#FFFFFF" stroke-miterlimit="10" d="M80,180.7c-11.4-3.9-21.3-10.1-29.5-17.9l-17.3,18.1 c23.9,22.8,52.9,32.4,85.7,28.2l-3.2-24.8C104,185.8,91.9,184.8,80,180.7z"/> </g> <g class="ig__part ig__part--3"> <path stroke="#FFFFFF" stroke-miterlimit="10" d="M174.2,146.1c-12.7,21.3-34.6,35.2-58.6,38.3l3.2,24.8 c32.8-4.2,59.9-22,76.8-50.4L174.2,146.1z"/> </g> <g class="ig__part ig__part--2"> <path stroke="#FFFFFF" stroke-miterlimit="10" d="M203.8,69l-23.2,8.6c6.1,16.5,6.8,35.2,0.7,53.2 c-1.9,5.5-4.3,10.6-7.1,15.4l21.4,12.7C212.5,130.4,215.3,100,203.8,69z"/> </g> </svg> </div> <div class="log"></div> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> var linkCircle = { init: function() { var self = this; $(".ig__caption") .mouseenter(function() { self.log("Link IN: " + $(this).index()); self.addClassToSvg($(".ig__part--" + $(this).index()), "active"); }) .mouseleave(function() { self.log("Link OUT: " + $(this).index()); self.removeClassFromSvg($(".ig__part--" + $(this).index()), "active"); }) ; $(".ig__part").click(function(){ var url = $(".ig__caption--" + $(this).index()).attr("href"); self.log(url); location.href = url; }); }, addClassToSvg: function(el, className) { el.attr("class", el.attr("class") + " " + className); }, removeClassFromSvg: function(el, className) { var initialClass = el.attr("class"); var newClass = initialClass.replace(className,"") el.attr("class", newClass); }, log: function(logMessage) { if(!this.counter) { this.counter = 0; } var message = this.counter + " - " + logMessage; $(".log").html(message + "<br>" + $(".log").html()); this.counter++; } }; linkCircle.init(); </script> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » SVG circular menu 喜欢 (2)or分享 (0)
