Javascript を使用して、スライドバー効果のあるスライドナビゲーション プラグインを開発します。

<script src="/path/to/sliding-nav.js"></script>
<ul class="nav スライド ナビ" sn-color="#F00" sn-radius="0px" sn-height="3px">
 <li class="active">メニュー項目 1</li>
 <li>メニュー項目 2</li>
 <li>メニュー項目 3</li>
<ul>

関数init() {
 
 var navs = document.getElementsByClassName('sliding-nav');
 
 (var i = 0; i < navs.length; i++) の場合 {
 
 
  //現在のナビゲーションと垂直に揃える DIV を作成します var indi = document.createElement("div");
  indi.id = "slna-indicator"
 
  indi.style.borderRadius = navs[i].getAttribute("sn-radius") || "0px"
  indi.style.height = navs[i].getAttribute("sn-height") || "3px"
  indi.style.backgroundColor = navs[i].getAttribute("sn-color") || "#F00"
 
  indi.style.position = "絶対"
  indi.style.transition = "0.5秒"
 
  //現在のサブメニュー項目を検索します。クラス名が active または selected の場合、それが現在の項目とみなされます。そうでない場合は、最初の項目を使用します var selected = navs[i].getElementsByClassName('active')
  選択された長さが 0 の場合
   選択された = navs[i].getElementsByClassName('選択された')
  }
  選択された長さが 0 の場合
   選択された = navs[i].children
  }
 
  選択された長さが 0 の場合
   throw Error('申し訳ありませんが、ナビゲーション バーには項目がまったくありません。');
  }
 
  選択された = 選択された[0];
 
  indi.style.width = selected.offsetWidth + "px";
  indi.style.top = selected.offsetHeight + "px";
  indi.style.left = selected.offsetLeft + "px";
  navs[i].parentElement.insertBefore(indi, navs[i]);
 
  // 未完成。イベントをバインドするには以下のコードを挿入します}
 
}

(var j = 0; j < navs[i].children.length; j++) {

   ホバー(navs[i].children[j], 関数(e, elem) {

    indi.style.width = elem.offsetWidth + "px";
    indi.style.left = elem.offsetLeft + "px";

   });

   //ナビゲーションから移動するときにデフォルト値を復元しますhover(navs[i], null, function(e, elem) {
    indi.style.width = selected.offsetWidth + "px";
    indi.style.left = selected.offsetLeft + "px";
   });

  }

(var j = 0; j < navs[i].children.length; j++) {

   ホバー(navs[i].children[j], 関数(e, elem) {

    indi.style.width = elem.offsetWidth + "px";
    indi.style.left = elem.offsetLeft + "px";

   });

   //ナビゲーションから移動するときにデフォルト値を復元しますhover(navs[i], null, function(e, elem) {
    indi.style.width = selected.offsetWidth + "px";
    indi.style.left = selected.offsetLeft + "px";
   });

  }