jQuery plugin to implement floating menu

Learn a jQuery plugin every day - floating menu, for your reference, the specific content is as follows

Floating menu

This is another very common effect, using a common feature of the a tag - anchor

The effect is as follows

Code section

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Floating menu</title>
  <script src="js/jquery-3.4.1.min.js"></script>
  <style>
   *{
    margin: 0px;
    padding: 0px;
    user-select: none;
   }
   .item{
    border: 1px solid lightgray;
    margin: 10px;
    height: 400px;
    border-radius: 5px;
    position: relative;
   }
   .head{
    background-color: lightgray;
    height: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-indent: 10px;
    position: absolute;
    top: 0px;
    width: 100%;
   }
   .fbox{
    position: fixed;
    top: 20%;
    bottom: 20%;
    right: 20px;
    width: 150px;
    border: 1px solid lightgray;
    background-color: white;
    border-radius: 5px;
   }
   .main{
    position: absolute;
    top: 30px;
    width: 100%;
    bottom: 0px;
    overflow:auto;
   }
   .main ul{
    margin-left: 30px;
   }
   a{
    color: gray;
   }
  </style>
 </head>
 <body>
 </body>
</html>
<script>
 $(document).ready(function(){
  //Add test dom and generate test data var arr = [];
  for(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);
  }
  //Call method $.fmenu(arr);
 })
 $.extend({
  fmenu:function(arr){
   $(".fbox").remove();
   var $fbox = $("<div class='fbox'></div>");
   var $head =$("<div class='head'>Floating menu</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);
   })
  }
 })
</script>

Explanation of ideas

The a tag is not only used for hyperlinks, but can also be used as a channel for downloading files and for navigating document locations.
For example, if you have a set of attributes that can be found in the current page, such as #id and .class, you can use js to get the selected path and then get its document height, and then let the browser scroll to the corresponding height.
And a.href is directly equal to the selected object, so the anchor point can be directly positioned at the corresponding position.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

How to use CSS3+JQuery to implement a floating wall menu
JQuery gets the visual area size and document size and creates a floating menu example
jQuery+CSS3 implements a fixed top navigation menu with floating effect imitating the petal network
jQuery implementation of the secondary menu effect when the mouse hovers

<<: Solution to the failure of loading dynamic library when Linux program is running

>>: ERROR 1045 (28000): Access denied for user ''root''@''localhost'' (using password: YES) Practical solution