jQuery plugin to implement floating menu

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

Recommend

Detailed usage of MYSQL row_number() and over() functions

Syntax format: row_number() over(partition by gro...

jQuery implements nested tab function

This article example shares the specific code of ...

MySQL 8.0.12 decompression version installation tutorial personal test!

Mysql8.0.12 decompression version installation me...

Detailed explanation of CSS elastic box flex-grow, flex-shrink, flex-basis

The functions of the three attributes flex-grow, ...

Web project development JS function anti-shake and throttling sample code

Table of contents Stabilization Introduction Anti...

Implementation of setting fixed IP when starting docker container

Network type after docker installation [root@insu...

How to add Nginx to system services in CentOS7

Introduction After compiling, installing and solv...

HTML+CSS+JavaScript to achieve list loop scrolling example code

Description: Set a timer to replace the content of...