2

現在アクティブなメニュー項目に従って水平にスライドするスライド矢印をヘッダーの一番上に作成しようとしています。

編集 - 私が例として言及していたウェブサイトは、もはやアクティブではありません.

ページが読み込まれると、矢印は正しい位置 (つまり、アクティブなメニュー項目の真上) にあるはずです。現在、私の努力では、ページの読み込み/更新時にアクティブなボタンの上に静止する前に、画面の左側からスライドします。

私は現在、他のさまざまな機能のために自分のサイトで jQuery 1.8.3、Modernizr、Cycle Lite を使用しています。

4

1 に答える 1

5

次のフィドルは、あなたが探していると私が理解している限りのことを示しています。

http://jsfiddle.net/8DZZQ/13/

以下はjsfiddlejavascriptです。ここでは、マージンを使用してnav_arrowを調整しましたが、同じように簡単に絶対位置に配置し、オプションのoffsetLeftに基づいて移動することができます。

アレンジメント関数arr（）がmouseoverイベントとmouseoutイベントに追加されます。これは、nav_arrowの新しい位置を計算し、それに応じてマージンを調整できることを意味します。デフォルトのオプションは、矢印が跳ねるようにmouseoutによって送信されます。デフォルトに戻ります。

各メニュー項目には、onclickイベントが変更するために、デフォルトのプロパティが追加されています。ただし、これは、リンクが動的であり、ページが別のページにリロード/変更されないことを前提としています。 、その場合は、id = "d"を持つdivを別のページのhtmlの適切な項目に変更し、それに応じてコードを調整する必要があります。

また、微調整配列を追加したので、各div上で矢印を好きな場所に正確に配置できます。値は各メニュー項目の左側の位置に追加されるため、link1の場合、その幅は60で、パディング/マージンなどを使用して、nav_arrowを中央に配置する34の微調整を行います。

window.onload = function () {
    var fine = [36, 34, 34, 34];
    var mitms = document.getElementsByClassName('mitm');
    var l0 = (mitms[0].offsetLeft + fine[0]);
    document.getElementById("nav_arrow").style.marginLeft = l0 + "px";

    for (var i = 0; i < mitms.length; i++) {
        mitms[i].default = false;
        mitms[i].fine = fine[i];
        mitms[i].onmouseover = function () {arr(this);};
        mitms[i].onmouseout = function () {
            var tmp = document.getElementsByClassName('mitm');
            for (var j=0; j<tmp.length; j++) {
                if (tmp[j].default === true) {arr(tmp[j]); break;}
            }
        };
        mitms[i].onclick = function() {
            var tmp = document.getElementsByClassName('mitm');
            for (var j=0; j<tmp.length; j++) {tmp[j].default = false;}
            this.default = true;
        }
    }
    mitms[0].default = true;
};

function arr(el) {
    var mitms = document.getElementsByClassName('mitm');
    var l = el.offsetLeft + el.fine;
    document.getElementById("nav_arrow").style.marginLeft = l + "px";
}

htmlは、提供したサンプルサイトに似ています。

<div id="nav">
    <div id="d" class="mitm"><a href="#">Default</a></div>
    <div class="mitm"><a href="#">Link1</a></div>
    <div class="mitm"><a href="#">Link2</a></div>
    <div class="mitm"><a href="#">Link3</a></div>
    <div id="nav_arrow"></div>
</div>

スムーズな遷移がcssでカバーされている場合：

#nav_arrow {
  position: relative;
  margin: 20px 0 0 0;

  /* Gets you your triangle, no image needed */
  background: transparent;
  border-left: 7px solid transparent; 
  border-right: 7px solid transparent;
  border-top: 10px solid #000;
  border-bottom: none;
  width: 0px;
  height: 0px;
  font-size: 1px;

  /* Transitions to give smooth movement*/
  transition: margin 1s;
  -moz-transition: margin 1s; /* Firefox 4 */
  -webkit-transition: margin 1s; /* Safari and Chrome */
  -o-transition: margin 1s; /* Opera */
  /* IE doesn't support until ie10 */
}

IEはまだcssトランジションをサポートしていないため、IEトランジションをスムーズにするための適切なjqueryソリューションがあると確信しています。

お役に立てば幸いです。

編集！

これは、次のようなものを使用した単純なcssでも可能です。

#menuitem1:hover ~ #nav_arrow {
   margin: 0px 0px 0px 185px;
}

menuitem1が

<a id='menuitem1'></a>

以前と同じようにトランジションを使用します。

于 2013-03-05T17:50:13.820 に答える