選択したアイテムが中央にある 5 つのアイテム/アイコンを含むメニューを作成しようとしています。この中央のアイコンの左または右をクリックすると、メニューが左または右に回転し、端を包み込み、端に最も近いアイテムが反対側のアイテムを通って元に戻ります。中央の項目をクリックすると、リンク先の URL に移動します。
メニューは、マウスオーバーではなく位置に基づいて拡大レベルが設定されることを除いて、OS X ドックと同様の方法で拡大する必要があります。
とりとめのない図よりも理解しやすい図を作成しました。
(ソース: yfrog.com )
アイテムが必要に応じて位置を交換する単純なjQueryバージョンをまとめることができましたが、この動き、特にエッジ部分のラップをアニメートする方法、および位置に基づいてサイズを変更する方法がわかりません。
私のコードもおそらく最善ではないと思います:)
HTML は次のとおりです。
<div id="nav">
<div id="leftnav"></div>
<div id="rightnav"></div>
<div id="navblock1" class="navblock">
one
</div>
<div id="navblock2" class="navblock">
two
</div>
<div id="navblock3" class="navblock">
three
</div>
<div id="navblock4" class="navblock">
four
</div>
<div id="navblock5" class="navblock">
five
</div>
そしてJS：
function rotateNav(direction) {
var change = (direction=='left')?(-1):(+1);
$('div.navblock').each(function() {
oldPos = parseInt($(this).attr('id').substr(9));
newPos = oldPos+change;
if (newPos == 0)
newPos = 5;
else if (newPos == 6)
newPos = 1;
$(this).attr('id','navblock'+newPos);
});
}
$(document).ready(function(){
$("#leftnav").click(function() {
rotateNav('right');
});
$("#rightnav").click(function() {
rotateNav('left');
});
});
すべての .navblock 要素は絶対配置されます。#leftnav 要素と #rightnav 要素も z-index が高いため、アイテム/アイコンの上に浮かびます。
さまざまな jQuery プラグインを見てきましたが、必要なものに近いものはないようです。