タイトルの通り、聖剣伝説で登場する円状に広がるリング状のメニューを今回紹介します。
サンプルコードの実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Portfolio</title> <!--共通で使用するCSSを読み込む--> <link rel="stylesheet" type="text/css" href=""> <!--共通で使用するjQueryを読み込む--> <script src="js/jquery-1.11.3.js"></script> <!-- ｊQueryUIを読み込む--> <script src="js/ui/jquery-ui.js"></script> <!--jQuery(flowerNav)を使用するために 必要なCSS,JSファイルを読み込む--> <link rel="stylesheet" type="text/css" href="js/flowernav.css"> <script src="js/jquery.flowernav-1.0.js"></script> <style> *{margin:0;padding:0} p { font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size:16px; } #container{} </style> </head> <body> <div id="container"> <nav id="flash"> <ul> <!-- link used as button by default .btn --> <li><a href="#flash" class="btn my_button">click!</a> <!-- second level link will be used as childs --> <ul> <li><a href="#"><img src="img/CL004.JPG" width="100" height="100" ></a></li> <li><a href="#"><img src="img/CL005.JPG" width="100" height="100" ></a></li> <li><a href="#"><img src="img/CL006.JPG" width="100" height="100" ></a></li> <li><a href="#"><img src="img/CL007.JPG" width="100" height="100" ></a></li> <li><a href="#"><img src="img/CL009.JPG" width="100" height="100" ></a></li> <li><a href="#"><img src="img/CL010.JPG" width="100" height="100" ></a></li> <li><a href="#"><img src="img/CL012.JPG" width="100" height="100" ></a></li> <li><a href="#"><img src="img/CL019.JPG" width="100" height="100" ></a></li> </ul> </li> </ul> </nav> </div> <script> $(document).ready(function() { // no option initialisation, with dragging off and default settings (clockwise rotation) $('#nav').flowernav(); // dragging enabled -> requires the "draggable" function of the jQuery UI Plugin / see jqueryui.com $('#nav').flowernav({drag:true}); // initial callback function possible after plugin is invoked $('#nav').flowernav( {}, function(){ $('#log').append('"#'+this.id+'" flowernav inititated<br/>');} ); // all of the default settings $('#flash').flowernav({ radiusX : 140, // radius of x axis in px, default: 110 radiusY : 110, // radius of y axis in px, default: 110 rotate : true, // rotate items in a circle, default: true direction : 'ccw', // counter clockwise rotation, default: clockwise speed : 1, // speed inverse proportional 1 = fastest, default: 3 oSpeed : 1000, // speed of opening animation in ms, default: 500 cSpeed : 400, // speed of closing animation in ms, default: 400 easingOpen : 'easeOutBounce', // override default easing of opening animation, default '' (jquery internal default) others via jquery ui or easing plugin, easingClose : 'easeInBack', // override default easing of opening animation, default '' (jquery internal default) others via jquery ui or easing plugin, hoverStop : true, // does stop the animation on item hover, default: true hoverOpacityIn : 1, // hover opacity of li's, default: 1 hoverOpacityOut : .4, // opacity of li's , default: .5 hoverSpeedIn : 100, // speed of hover toggle opacity animation in ms, default: 600 hoverSpeedOut : 700, // speed of hover-out toggle opacity animation in ms, default: 600 intv : 10, // rotation interval time in ms, default: 10 offset : 45, // offset in circle in degrees, default: 0 drag : true, // requires jquery ui plugin to function, default: false // callbacks btnClass : '.btn', onOpenStart : function(){ $('#log').append('"#'+this.attr('id')+' onOpenStart<br/>'); }, // at start of opening animation onOpenEnd : function(){ $('#log').append('"#'+this.attr('id')+' onOpenEnd<br/>'); }, // at end of opening animation onCloseStart: function(){ $('#log').append('"#'+this.attr('id')+' onCloseStart<br/>'); }, // at start of closing animation onCloseEnd : function(){ $('#log').append('"#'+this.attr('id')+' onCloseEnd<br/>'); } // at end of closing animation }); }); </script> </body> </html> |
今回使用するプラグインの名前は「flowernav」といいます。デモはこちらです。ただ、公式サイトからプラグインを持ってきても動きません。プラグインが最新のjQueryに対応していないからです。
なので、ダウンロードしたプラグインを修正する必要があります。
手順：
１．「jquery.flowernav-1.0.js」を開く
２．「$button.live」と記載されている個所を探す
３．「$button.live」→「$button.on」へ修正する。(２か所あります)
上記の手順でこのプラグインは動くはずです。