フローティングメニューを実装するjQueryプラグイン

毎日jQueryプラグインを学ぶ - フローティングメニュー、参考までに、具体的な内容は次のとおりです。

フローティングメニュー

これは、タグの一般的な機能であるアンカーを使用した、もう1つの非常に一般的な効果です。

効果は以下のとおりです

コードセクション

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <title>フローティング メニュー</title>
  <script src="js/jquery-3.4.1.min.js"></script>
  <スタイル>
   *{
    マージン: 0px;
    パディング: 0px;
    ユーザー選択: なし;
   }
   。アイテム{
    境界線: 1px 実線のライトグレー;
    マージン: 10px;
    高さ: 400px;
    境界線の半径: 5px;
    位置: 相対的;
   }
   。頭{
    背景色: ライトグレー;
    高さ: 30px;
    ディスプレイ: フレックス;
    コンテンツの配置: flex-start;
    アイテムの位置を中央揃えにします。
    テキストインデント: 10px;
    位置: 絶対;
    上: 0px;
    幅: 100%;
   }
   .fbox{
    位置: 固定;
    上位: 20%
    下部: 20%;
    右: 20px;
    幅: 150ピクセル;
    境界線: 1px 実線のライトグレー;
    背景色: 白;
    境界線の半径: 5px;
   }
   。主要{
    位置: 絶対;
    上: 30px;
    幅: 100%;
    下: 0px;
    オーバーフロー:自動;
   }
   .main ul{
    左マージン: 30px;
   }
   {
    色: グレー;
   }
  </スタイル>
 </head>
 <本文>
 </本文>
</html>
<スクリプト>
 $(ドキュメント).ready(関数(){
  //テスト DOM を追加し、テスト データを生成します。var arr = [];
  (var i = 0;i<50;i++){
   var id = 'id'+i;
   var $dom = $("<div class='item' id='"+id+"'><div class='head'>"+id+"</div></div>");
   $dom.appendTo($("body"));
   arr.push(id);
  }
  //メソッド $.fmenu(arr); を呼び出します。
 })
 $.extend({
  fmenu:function(arr){
   $(".fbox").remove();
   var $fbox = $("<div class='fbox'></div>");
   var $head =$("<div class='head'>フローティングメニュー</div>");
   var $main = $("<div class='main'></div>");
   var $ul = $("<ul class='ul'></ul>")
   $ul.appendTo($main);
   $head.appendTo($fbox);
   $main.appendTo($fbox);
   $fbox.appendTo($("body"));
   arr.forEach(item=>{
    var $li = $("<li><a href='#"+item+"'>"+item+"</a></li>");
    $li.appendTo($ul);
   })
  }
 })
</スクリプト>

アイデアの説明

a タグはハイパーリンクに使用されるだけでなく、ファイルのダウンロードやドキュメントの場所への移動のチャネルとしても使用できます。
たとえば、#id や .class など、現在のページで見つかる属性のセットがある場合、js を使用して選択したパスを取得し、そのドキュメントの高さを取得して、ブラウザーを対応する高さまでスクロールさせることができます。
また、a.href は選択したオブジェクトと直接等しいため、アンカーポイントを対応する位置に直接配置できます。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: