Learn a jQuery plugin every day - floating menu, for your reference, the specific content is as follows Floating menuThis 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 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:
|
<<: Solution to the failure of loading dynamic library when Linux program is running
Block-level element features : •Always occupies a ...
There is a big difference between the writing ord...
Create a table create table order(id varchar(10),...
This article example shares the specific code of ...
Installation introduction under Windows: Check ou...
All content in this blog is licensed under Creati...
This article example shares the specific code of ...
JBoss uses Tomcat as the Web container, so the co...
Data Sharing What kind of data needs to be writte...
The previous articles introduced the replacement ...
I was recently working on a project about face co...
MariaDB is installed by default in CentOS, which ...
Preface Before leaving get off work, the author r...
By default, processes in the container run with r...
Table of contents Scene Introduction Plugin Imple...