22

学校のプロジェクト用に CSS で循環メニューを作成しようとしています。

メニューは次のようになります。

ここに画像の説明を入力

私は完全なソースを探しているわけではなく、経験豊富な開発者がどのようにそれを行うかを考えているだけです.

私は8つの三角形を作成し、次に真ん中に絶対位置の円形のdivを配置することを考えていました; ただし、三角形は境界線で作成されているため、ホバーすると完全に選択できるわけではありません。ちょっとバギーです。

画像なしでこれを作成することは可能ですか？

編集：

メニューは jQuery を使用してアニメーション化されます。したがって、jQuery と jQuery UI を使用しますが、他のライブラリや画像は使用しません (とにかくアイコンは必要ありません)。互換性に関しては、IE9+ / Chrome / Opera 11.52+ / Firefox 4+ で動作するはずです。

4

4 に答える 4

22

以下は HTML キャンバスで行う方法で、マウスがどこにあるかを完全に検出します。ただし、それはあなたのものとまったく同じには見えず、アイコンや分割線を追加しませんでした（ただし、アンチエイリアスにより、領域間の背景が少し透けて見え、線が描かれているように見えます）.

http://jsfiddle.net/jcubed111/xSajL/

編集 - バグ修正: http://jsfiddle.net/jcubed111/xSajL/2/

より多くの作業を行うことで、キャンバス バージョンをモックアップと同じように見せることができます。私のバージョンは、機能を下げるためだけのものです。

css を使用して適切に表示し、クリアをオーバーレイしてaマウスの位置を検出し、リンク機能を提供することもできます。もちろん、 を使用:hoverして領域の外観を変更することはできません。

Chrome 19 のみでテストしました。

リンクがダウンした場合の完全なコードは次のとおりです。

HTML:

<a id='link'><canvas id='c' width='224' height='224' onmousemove="update(event);"></canvas></a>
<input id='i' />​​​​​​​​

CSS:

#c{
    width:224px;
    height:224px;
}​

JS (ページの読み込み時に実行され、jquery を使用):

ctx = $('#c')[0].getContext('2d');


function update(E) {
    ctx.clearRect(0, 0, 224, 224);
    if (E === false) {
        mx = 112;
        my = 112;
    } else {
        mx = E.clientX;
        my = E.clientY;
    }

    mangle = (-Math.atan2(mx-112, my-112)+Math.PI*2.5)%(Math.PI*2);
    mradius = Math.sqrt(Math.pow(mx - 112, 2) + Math.pow(my - 112, 2));

    $('#i').val("Not over any region");
    $('#link').attr('href', '');
    for (i = 0; i < 8; i++) {
        angle = -Math.PI / 8 + i * (Math.PI / 4);

        if (((mangle > angle && mangle < (angle + Math.PI / 4)) || (mangle > Math.PI*15/8 && i==0)) && mradius<=112 && mradius>=69) {
            ctx.fillStyle="#5a5a5a";
            $('#i').val("In region "+i);
            $('#link').attr('href', '#'+i);
        } else {
            ctx.fillStyle="#4c4c4c";
        }

        ctx.beginPath();
        ctx.moveTo(112, 112);
        //ctx.lineTo(112+Math.cos(angle)*112, 112+Math.sin(angle)*112);
        ctx.arc(112, 112, 112, angle, angle + Math.PI / 4, false);
        ctx.lineTo(112, 112);
        ctx.fill();


    }

    ctx.fillStyle = "#f2f2f2";
    ctx.beginPath();
    ctx.arc(112, 112, 69, 0, 2 * Math.PI, false);
    ctx.fill();
}

update(false);​
于 2012-05-28T22:08:23.217 に答える
5

通常の HTML+CSS で行うこともできますが、正気を保つために、試してはいけません。それはそれだけの価値はありません。

Canvas や SVG でこのようなことを行う方がはるかに良いでしょう。特に古いバージョンの IE をサポートする必要がない場合。

Canvas と SVG の両方のソリューションについて、適切なライブラリを見つけることをお勧めします。SVG の世界では、 Raphaelを強くお勧めします。Canvas の場合は、 Paper を試してみてください。わずか数行のコードで、これらのライブラリのいずれかを使用して基本的な機能を実行できます。

これを CSS で行う必要がある場合(それがプロジェクトの基準である場合や、単に大食漢である場合など)、border-radius円を作成するために使用することから始める必要があります。次に、幅 1px のボックスを使用してセグメンテーション ラインを描画し、 を使用してそれらを回転させますtransform。あなたは絵を手に入れます。おそらくすでに発見しているように、それは簡単ではありません。そして、それをアニメーション化することは完全な悪夢になるでしょう. それは可能であり、CSS で実現できることのデモンストレーションとして、非常に巧妙です。しかし、すべてのターゲット ブラウザーが SVG と Canvas をサポートしている場合、CSS でこのようなことを行うことは、賢くするために賢くしているだけです。

于 2012-05-28T22:14:03.913 に答える
1

HTML コード

<a class='button ctrl' href='#' tabindex='1'>★&lt;/a>
<ul class='tip ctrl'>
    <li class='slice'><div>✦&lt;/div></li>
    <li class='slice'><div>✿&lt;/div></li>
    <li class='slice'><div>✵&lt;/div></li>
    <li class='slice'><div>✪&lt;/div></li>
    <li class='slice'><div>☀</div></li>
</ul>

CSSコード

    .ctrl {
        position: absolute;
        top: 75%; left: 50%;
        font: 1.5em/1.13 Verdana, sans-serif;
        transition: .5s;
    }

    a.ctrl, .ctrl div {
        display: block;
        opacity: .56;
        background: #c9c9c9;
        color: #7a8092;
        text-align: center;
        text-decoration: none;
        text-shadow: 0 -1px dimgrey;
      cursor: pointer;
    }

    .button {
        z-index: 2;
        margin: -.625em;
        width: 1.25em; height: 1.25em;
        border-radius: 50%;
        box-shadow: 0 0 3px 1px white;
    }

    .tip {
        z-index: 1;
        /**outline: dotted 1px white;/**/
        margin: -5em;
        width: 10em; height: 10em;
        transform: scale(.001);
        list-style: none;
        opacity: 0;
    }

.slice {
    overflow: hidden;
    position: absolute;
    /**outline: dotted 1px yellow;/**/
    width: 50%; height: 50%;
    transform-origin: 100% 100%;
}

完全なコード: CSSCodeLab

于 2020-02-20T13:56:52.413 に答える
0

それはいくつかのことに依存します。まず、メニューをアニメーション化する必要がありますか? 次に、css を厳密に使用する必要がありますか? メニューが完全に整列して機能する必要がありますか?

100% 正確なものが必要ない場合は、円を小さな正方形に分割し、css のみを使用してそれを達成できます。

100% 正確にする必要があり、アニメーションがない場合は、<map> マップを試すことができます

100% 正確なアニメーションが必要な場合は、おそらく RaphaelJSのようなものが必要です。

それがあなたを助けることを願っています。

于 2012-05-28T21:10:15.500 に答える