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

Overview and differences between html inline elements and html block-level elements

Block-level element features : •Always occupies a ...

Simply understand the writing and execution order of MySQL statements

There is a big difference between the writing ord...

SQL query for users who have placed orders for at least seven consecutive days

Create a table create table order(id varchar(10),...

Vue3 encapsulates its own paging component

This article example shares the specific code of ...

Let you understand how HTML and resources are loaded

All content in this blog is licensed under Creati...

Vue implements multiple selections in the bottom pop-up window

This article example shares the specific code of ...

Connector configuration in Tomcat

JBoss uses Tomcat as the Web container, so the co...

Explore JavaScript prototype data sharing and method sharing implementation

Data Sharing What kind of data needs to be writte...

Detailed explanation of the use of MySQL concatenation function CONCAT

The previous articles introduced the replacement ...

JavaScript to achieve click image flip effect

I was recently working on a project about face co...

Detailed tutorial on installing mysql 5.7.26 on centOS7.4

MariaDB is installed by default in CentOS, which ...

How to use Docker to build enterprise-level custom images

Preface Before leaving get off work, the author r...

In-depth understanding of uid and gid in docker containers

By default, processes in the container run with r...

Summary of problems encountered in the implementation of Vue plug-ins

Table of contents Scene Introduction Plugin Imple...