"Serial" bootstrap development of a beautiful front-end interface of the custom right-click menu

Serial:

1 "teach you to develop a beautiful front-end interface with Bootstrap"

2. "Bootstrap development of a beautiful front-end interface of the implementation principle"

Custom context menus are becoming more common in Web pages, and customizing the right-click menu can enhance the user experience and make it easier for users to use the software, and today we'll develop our own custom context menu based on Bootstrap.

First, the preparation of a custom menu for right-click Display, the menu is not visible by default, you can debug preview by style= "Display:block";

<UlClass= "Dropdown-menu"><Li><AHref= "javascript:;"> Add</A></Li><Li><AHref= "javascript:;"</a> </li> Span style= "color: #0000ff;" ><li> <a href= "javascript:;" > about us </a> </li>< Span style= "color: #0000ff;" ></ul>       

Second, the realization of the right click to display the custom menu;

To correctly display the right-click menu, we need to complete the following 3 steps:

1. The right-click menu is an event behavior; Register the event and listen to the browser's right-click menu;

2. By default, the browser system menu appears, blocking browser default event behavior;

3. Display the custom menu, set the location of the custom menu according to the coordinates of the user's click, and then display it;

$(function(){//Page Document Object Registration context (right-click) menu event $ (document). On ("ContextMenu",function(event) {var PageX = Event.pagex;// mouse click of the x-coordinate var pagey = event.pagey;  the y-coordinate of the mouse click // Gets the menu and sets the location of the menu $ ("#contextMenu"). CSS ({left:pagex+ "px",// set menu away from the left side of the page, Left is equivalent to x-coordinate top:pagey+ "px"// set menu distance from page top, top equivalent to y-coordinate}). Stop (). FadeIn (500); // display uses fade-in effects, such as no need for animations to be replaced with show (); Event.preventdefault ();  Block Browser-related default behavior of events; here is the popup right-click menu }); });

Third, hide the custom menu, when the user clicks on a menu item or clicks another area to hide;

Implementation: The user to use the left mouse button or the middle button to customize the menu to hide, design ideas and the default browser to hide the menu in the same way;

the Document object registers the mouse down event,      $ (document). On ("MouseDown",function(event) {            //if (event.button==0 | | Event.button==1) {$ ("#contextMenu"). Stop (). FadeOut (+);  get menu Stop animation, hide using Fade Effect }});        

Iv. handling menu overflow; Please try to click on the right menu at the far right of the page and you will find that the menu will go beyond the page;

Implementation: Determine the horizontal position (PageX) + custom menu width of the sum, if more than the width of the page and overflow, need special treatment;

　　　　　　

//Document Object Registration Context (right-click) menu event $ (document). On ("ContextMenu",function(event) {var PageX = Event.pagex;//X-coordinate of mouse clickvar pagey = Event.pagey;//Y-coordinate of mouse click//Get Menuvar ContextMenu = $ ("#contextMenu");var cssobj ={top:pagey+ "px",//Set menu distance from top of page, top equivalent to y-coordinate left:pagex+ "px"//Sets the distance from the left side of the page, which is equivalent to the X coordinate};//Determine the horizontal position (PageX) + custom menu width of the sum, if more than the width of the page and overflow, need special treatment;var menuwidth = contextmenu.width (); var pagewidth = $ (document). width (); if (pagex+contextmenu.width () >pagewidth) {cssobj.left = pagewidth-menuwidth-5+ "px"; //-5 is to reserve the right side of the gap, the right side is too tight not very beautiful; }        // Set the location of the menu $ ("#contextMenu"). CSS (cssobj). Stop (). FadeIn (+);  the display uses a fade-in effect, such as no need for animations to be replaced with show (); Event.preventdefault (); // Block browser's default behavior related to events; here is the popup right-click menu});      

If you are writing according to the steps of this article, then you just need to open your own page, you can see the correct effect, over.

"Serial" bootstrap development of a beautiful front-end interface of the custom right-click menu