JavaScript høyreklikk -meny

En hurtigmeny eller høyreklikk-meny åpnes når brukeren høyreklikker på en webside. Noen ganger kan det være nødvendig med utviklere å utvide standardkontekstmenyen, men ikke kan gjøre det. Så utviklerne lager sine tilpassede menyer. En tilpasset kontekstmeny gir muligheten til å legge til unike funksjoner og hjelper nettstedet eller websiden til å se mer tilpasningsdyktig og passende ut for konteksten.

Denne studien vil demonstrere høyreklikk-menyen og hvordan lage en tilpasset høyreklikk-meny i JavaScript.

Hva er standard høyreklikk -menyen på en webside?

Når du klikker på en webside med høyre knapp på musen, vises en boks med forskjellige menyalternativer, den kalles en høyreklikk-meny eller en standard hurtigmeny:

La oss se et eksempel på hvordan du oppretter en tilpasset høyreklikk-meny på en webside.

Opprette en tilpasset høyreklikk-meny med JavaScript
Vi oppretter en enkel webside med HTML og CSS og deretter oppretter en tilpasset høyreklikk-meny på websiden ved hjelp av JavaScript. Vi vil plassere og style vår tilpassede høyreklikk-meny ved å bruke CSS-egenskaper:

JavaScript høyreklikk -meny

For å få en tilpasset kontekstmeny, klikk hvor som helst på siden

Skriv deretter koden for den tilpassede høyreklikk-menyen i en JavaScript-fil. Først, skjul eller blokker standard hurtigmeny på en webside.

• Ring "PreventDefault ()”Metode som forhindrer at standard høyreklikk-menyen vises mens du utløser“kontekstmenyen" begivenhet.
• Ring den definerte funksjonen som heter “CreateMenuonRightClick ()”For tilpasset høyreklikk-meny med“e.ClientX”Og“e.klient”Argumenter som viser museposisjonen:

_CurrentMenuVisible = null;
dokument.AddEventListener ('ContextMenu', e =>
e.PreventDefault ();
CreateMenuonrightClick (e.ClientX, e.klient);
);

Definere en funksjon “CreateMenuonRightClick ()”Som vil bli lansert på høyreklikk på brukeren på nettsiden:

funksjon CreateMenuonrightClick (x, y)
closeTheOpenedMenu ();
Const Menuelement = Dokument.CreateElement ('Div');
Menuelement.Klasseliste.Legg til ('ContextMenu');
const menulistElement = dokument.CreateElement ('UL');
const menyArray = ['Refresh', 'Open', 'Save', 'Copy', 'Help'];
for (var element av menyArray)
var listElement = dokument.CreateElement ('li');
listeelement.indreHtml = '' + element + '';
menulistelement.AppendChild (listelement);

Menuelement.appendchild (menulistelement);
dokument.kropp.Appendchild (Menuelement);
_CurrentMenuVisible = Menuelement;
Menuelement.stil.display = 'blokk';
Menuelement.stil.venstre = x + "px";
Menuelement.stil.topp = y + "px";

La oss gå over hva som skjer i koden som er nevnt over:

• Til høyre er det første å lukke alle andre høyreklikk- eller kontekstmenyer som for øyeblikket åpnes på siden.
• Så lager vi en ny “div”Som vil være vertskap for den tilpassede høyreklikk-menyen.
• Da, inne i “div”, Er en uordnet liste lagt til som inneholder en rekke lister som vises som en meny på websiden.

For å lukke hurtigmenyen, klikk hvor som helst på websiden. Dette vil bli håndtert ved hjelp av “Klikk”Hendelse som vil bli utløst når brukeren klikker på nettsiden etter å ha åpnet høyreklikk-menyen. Denne hendelsesbehandleren kaller den spesifiserte funksjonen “CloseTheOpenedMenu ()”:

dokument.AddEventListener ('klikk', e =>
closeTheOpenedMenu ();
);

Nå, definere en funksjon "CloseTheOpenedMenu ()”For å lukke høyreklikk-menyen der du ring"CloseContextMenu ()”Metode som lukker menyen:

funksjon ClosetheOpenedMenu ()
if (_ currentmenuVisible !== null)
closontextMenu (_currentmenuVisible);

“CloseContextMenu ()”Metoden er definert nedenfor:

Funksjon ClosTeContextMenu (meny)
Meny.stil.venstre = '0px';
Meny.stil.topp = '0px';
dokument.kropp.fjerne (meny);
_CurrentMenuVisible = null;

For å style en hurtigmeny eller høyreklikk-meny, bruk CSS på forskjellige elementer for å få den til å se bra ut. Legg først styling til kroppskoden for å justere teksten i midten og angi bakgrunnsfargen:

kropp
tekst-align: sentrum;
Bakgrunn: #B7C4F1;

Style menyen ved å sette tekstfarge, bakgrunnsfarge, grense og posisjon til “Absolutt”:

.kontekstmenyen
Posisjon: Absolutt;
Bredde: 100px; Høyde: Auto;
Farge: #B7C4F1;
Bakgrunn: #344683;
Border: 1px Solid #344683;
Display: Ingen;

Style den uordnede listen med listeelementer for å angi polstring og margin:

.ContextMenu ul
polstring: 0;
Margin: 0;

.ContextMenu ul li
Border-Bottom: #B7C4F1 1px faststoff;
polstring: 0;
Margin: 0;

Angi grensen til det siste alternativet til menyen ved å bruke "Border-Bottom”Eiendom som ikke vil være ingen;

.ContextMenu Ul Li: Last-Child
Border-Bottom: Ingen;

Style menyen med en ankerkode.

.ContextMenu ul li a
Tekstalign: Venstre;
Display: Block;
polstring: 5px 10px;
Farge: #B7C4F1;
Teksttransform: Kapitalisere;
Tekstdekorasjon: Ingen;

Angi bakgrunnsfargen på listeelementene på Hover:

.ContextMenu ul li a: hover
Bakgrunn: #2777ff;

Som du kan se i utdataene, klikker du på en webside med riktig museknapp viser en tilpasset høyreklikk-meny:

Konklusjon

Siden standard kontekstmeny ikke kan utvides for å legge til tilpassede alternativer, må en tilpasset høyreklikk-meny opprettes for å gi tilpassede alternativer til brukeren. En tilpasset høyreklikk-meny kan enkelt opprettes i musens nåværende posisjon ved hjelp av JavaScript og CSS. I dette blogginnlegget er det opprettet en tilpasset høyreklikk-meny, og prosedyren blir forklart trinn for trinn.