Kontekst menýulary we çalt hereketler

1) Bellenilmegi we ulanylyş çygry

• Obýektiň üstünde lokal hereketler (kartoçka, tablisanyň setiri, koeffisiýent).
• Saýlamak üçin paket hereketleri.
• Gizlin, ýöne möhüm däl opsiýalar (ikinji derejeli).
• Düzgün: kritiki we başlangyç hereketleri diňe kontekstli menýuda gizlemeli däldir.

2) Triggerler we wariantlar

Right-click/Shift + F10/Menu key - nusgawy kontekstde.
Icon button (kebab '⋮', meatballs '...', context) - taç/desktop üçin ähliumumy.
Long-press (400-600 ms) - right-click ykjam ekwiwalenti.
Command palette ( /Ctrl + K) - gözleg bilen global çalt toparlar.
Swipe-reveal (iOS/Android sanawlary) - çalt şortkatlaryň birnäçesini açýar.

Maslahat: Iň azyndan iki jaň usulyny üpjün ediň (nyşan + kontekst basmak/düwme).

3) Mazmun we ileri tutulýan ugur

Ilkinji 1-3-nji bentler - ýygy-ýygydan hereket etmek; soňra bölüji; mundan beýläk - az ulanylýar.
Weýran ediji - ahyrynda, reňk/nyşan bilen bellendi (we köplenç - tassyklamak/undo arkaly).
Formulalar - fiil + obýekt ("Saýlanan birine goşmak", "Şahsyýetini göçürmek").
Bellik diňe nyşany ≠: nyşan tekstiň ornuny tutmaýar.

4) Toparlanyş we ýagdaý

Logiki bloklar üçin bölüjiler (seretmek, redaktirlemek, dolandyryş, howply).
Состояния: `disabled`, `checked` (`menuitemcheckbox`/`menuitemradio`), `destructive`.
Eger bu bulaşdyrylsa, roly boýunça elýeterli dälleri görkezmeýäris; alternatiw - sebäbini görkezýän 'disabled'.

5) Elýeterlilik (A11y)

Konteýner: 'role = "menu"', elementler: 'role = "menuitem" '/' menuitemcheckbox '/' menuitemradio'.
Roving tabindex: ýeke-täk' tabindex =" 0"' häzirki elementde, galanlary '-1'.
Oklar ↑ ↓ - hereket etmek, →/← - çalyşma girişi/çykyşy. Enter/Space - işjeňleşdirmek, Esc - ýapmak.
Typeahead: birinji harpy çap etmek nokada gönükdirilýär.
Fokus halkasy görünýär; tekstiň we nyşanlaryň gapma-garşylygy ≥ AA.
Düwme nyşany üçin 'aria-haspopup =' menu 'we' aria-expanded 'ulanyň.

html
<button id="more" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-1">Еще</button>
<ul id="menu-1" role="menu" aria-labelledby="more" hidden>
<li role="menuitem" tabindex="0">Открыть</li>
<li role="menuitem">Скопировать ссылку</li>
<li role="menuitemcheckbox" aria-checked="true">В избранном</li>
<li role="menuitem" data-danger="true">Удалить</li>
</ul>

js const menu = document.getElementById('menu-1');
menu.addEventListener('keydown', e=>{
const items=[...menu.querySelectorAll('[role^="menuitem"]')];
let i=items.findIndex(n=>n.tabIndex===0);
if(e.key==='ArrowDown'){ items[i].tabIndex=-1; items[(i+1)%items.length].tabIndex=0; items[(i+1)%items.length].focus(); e.preventDefault(); }
if(e.key==='ArrowUp'){ items[i].tabIndex=-1; items[(i-1+items.length)%items.length].tabIndex=0; items[(i-1+items.length)%items.length].focus(); e.preventDefault(); }
if(e.key==='Escape'){ menu.hidden=true; document.getElementById('more').focus(); }
});

6) Ýerleşiş we çykyş

Portal/üstdäki gatlak ('z-index')

Menýuny çeşmede açyň (nokat/nyşan), 4-8 px çalşyň; Ekranyň gyralaryna gözegçilik ediň (flip/shift).
Ýalta render ediň, sanawy uzyn menýularda aýlanyň (wirtualizasiýa gerek däl, ýöne ýüzlerçe nokatdan gaça duruň).
Animasiýa diňe 'opacity/transform', dowamlylygy 140-200 ms (out has çalt: 100-160 ms).
'ArrowRight' we 'hover' -ni 80-120 ms gijikdirmek bilen açyň (anti-flicker).

7) Ykjam patternler

Haptika bilen Long-press; wagt 450 ± 100 ms.
Kontekst menýusynyň görnüşi hökmünde bottom sheet (thumb-reachable).
Swipe actions sanawda: çep tarapda - "arhiw/saýlanan", sag tarapda - "aýyrmak" (tassyklamak/undo).
Basmagyň zolaklary ≥ 44 × 44, gollar gysga, nyşanlar 20-24 px.

8) Tassyklamalar, undo we howpsuzlyk

Weýran ediji hereketler: ýa ikinji tassyklama (modal/confirm pattern) ýa-da undo 5-10 s.
Maliýe/töwekgelçilik - netijeleriň mazmuny bilen aç-açan confirm arkaly.
"Disabled" ("Ýeterlik däl", "Çäkli") sebäbini görkeziň.

9) Menýusyz çalt hereketler

Setirdäki inline-shortkatlar (nyşanlar "", "", "⋯").
Hover-reveal (desktop): ugrukdyrylanda hereketleri görkeziň, ýöne aç-açan trigger goýuň.
Command palette: hereketler boýunça gözleg, maslahatlarda gyzgyn düwmeler (" S", "Ctrl + Enter").

10) Göçürmek we nyşanlar

Fil + obýekt, 2-3 söz.
At bilen däl-de, hereket bilen başla ("Ýazgyny öçürmek"...).
Bir toplumdan nyşanlar; önümde birmeňzeş hereketler üçin birmeňzeş piktogrammalary ulanyň.
Düşnüksiz zatlar üçin düşündiriji maslahatlar ('title '/tooltip).

11) Telemetriýa we synaglar

CTR nokatlar boýunça, açylyşdan basyşa çenli wagt medianasy, ýygylyk/undo.
Misclick's sany (ýok ediji → ýatyrylan).
A/B: punktlaryň tertibi we toparlara bölünmegi, sanawda çalt şortkatlaryň bolmagy.
"Görünmeýän" nokatlaryň ýazgylary (hiç kim ulanmaýar) - aýyrmak/geçirmek üçin dalaşgärler.

12) Dizaýn-ulgamyň bellikleri (mysal)

json
{
"menu": {
"minWidth": 208,
"itemHeight": 36,
"gap": 4,
"padding": 8,
"radius": 12,
"elev": 8,
"anim": { "inMs": 180, "outMs": 120, "ease": "cubic-bezier(0.2,0,0.2,1)" }
},
"swipe": { "revealThresholdPx": 56, "confirmDestructive": true }
}

css
.menu{min-width:208px;padding:8px;border-radius:12px;box-shadow:var(--elev-3);background:var(--bg-elevated)}
.menu [role^="menuitem"]{height:36px;padding:0 12px;display:flex;gap:8px;align-items:center;border-radius:10px}
.menu [role^="menuitem"]:hover,
.menu [role^="menuitem"][tabindex="0"]{background:var(--bg-hover)}
.menu [data-danger="true"]{color:var(--role-danger)}

13) Komponentler boýunça patternler

Kartoçkalar/plitkalar: sag ýokarky burçdaky '⋯' nyşany; hower - görkezilýär, taçda - hemişe görünýär.
Tablisanyň setirleri: "⋯" iň soňky sütünde; köplükde - ýokardan/aşakdan paket hereket paneli.
Söhbetdeşlik/habar sanawlary: undo-dan swipe-actions (arhiw/okaldy/pozuldy).
Media-galereýalar: uzyn tap → köp saýlama re modeimi + aşaky hereket paneli.

14) iGaming aýratynlyklary

Çalt nyrh (quick bet): koeffisiýentiň kontekstli menýusynda - "X goýuň" (deslapky düzüm), "Kupona goşuň", "Koeffisiýenti üýtgetmäge ýazylyň". Tassyklamak/undo hökmanydyr.
Saýlanan/Abuna ýazylmak: "Saýlanan/Oýun goşmak", "Ýaryşa ýazylmak".
Kesh-aut: awtonom tassyklama we häzirki mukdar bilen; diňe bazar ýagdaýy bolan ýagdaýynda elýeterlidir.
Moderasiýa/habarlar: "Arz etmek", "Söhbetdeşligi petiklemek" - howpsuz, rollar boýunça görünýär.
Jogapkär oýun: "Çägi belläň", "Arakesme 24 sagat" - agressiw reňkler bolmazdan, netijelerini anyk beýan etmek bilen.

15) Anti-patternler

Möhüm hereketler diňe kontekstde gizlenýär.
Tekstsiz nokatlar (diňe nyşanlar), esasanam sanawlarda.
Çalyşma geçende kursoryň gitmegi üçin tötänleýin ýapylmagy (gijikdirme/koridor ýok).
Menýu element-çeşmäni ýapýar ýa-da ekrandan çykýar (flip/shift ýok).
Tassyklamasyz weýran ediji/undo.
Görnüp duran hukuklar (madda düşündirişsiz ýitýär).

16) QA-çek-sanawy

Elýeterlilik

• 'role = "menu "'/' menuitem 'dogry, roving tabindex we oklar işleýär.
• Esc menýuny ýapýar, fokus çeşmä gaýdyp gelýär.
• Kontrast we fokus halkasy AA-a laýyk gelýär.

Özüni alyp barşy

• Bentleriň tertibi ýygylygy we töwekgelçiligi görkezýär; aşakda weýran ediji.
• Ýerleşdirmek gyralary göz öňünde tutýar (flip/shift); animasiýa çalt (≤ 200 ms).
• ArrowRight arkaly açylýar we "titremeýär" (hover-intent 80-120 ms).

Jübi

• Haptika bilen uzyn metbugat; bottom-sheet baş barmak bilen amatly.
• Swipe-actions undo; basmagyň zolaklary ≥ 44 × 44.

Howpsuzlyk

• Howply hereketler üçin tassyklama/undo; disabled sebäpleri düşnüklidir.
• Maslahatlarda/belliklerde şahsy maglumatlaryň syzmagy ýok.

Metrikler

• CTR/Basma wagty; misclick/undo gözegçilik edilýär.

17) Amala aşyrmak: açmak/ýapmak we basmak-daşarky

js const btn=document.getElementById('more'), menu=document.getElementById('menu-1');
const open=()=>{ menu.hidden=false; btn.setAttribute('aria-expanded','true'); menu.querySelector('[role^="menuitem"]').focus(); };
const close=()=>{ menu.hidden=true; btn.setAttribute('aria-expanded','false'); btn.focus(); };
btn.addEventListener('click', e=>{ menu.hidden?open():close(); });
document.addEventListener('pointerdown', e=>{ if(!menu.hidden &&!menu.contains(e.target) && e.target!==btn) close(); });
window.addEventListener('blur', close);

18) Dizaýn-ulgamdaky resminamalar

Компоненты: `ContextMenu`, `MenuItem`, `Submenu`, `BottomSheet`, `SwipeAction`, `CommandPalette`.
Setiriň/radiusyň/animasiýanyň ölçegleriniň/beýikliginiň bellikleri.
Elýeterliligi boýunça gaýdlar (ARIA, klawiatura, typeahead).
Toparlanyş, ýerleşiş we tassyklama mysallary bilen "Do/Don 't".

Gysgaça gysgaça

Kontekst menýular we çalt hereketler, öňünden aýdyp boljak, elýeterli we howpsuz bolsa, işini çaltlaşdyrýar: iki jaň ýoly, nyşanly açyk bellikler, paýhasly toparlanmak, töwekgelçilik üçin/undo tassyklamak, dogry klawiatura nawigasiýasy we takyk ýerleşiş. Dizaýn ulgamynda bellikleri we nusgalary düzüň - ulanyjylar ýalňyşmakdan gorkman çalt hereket ederler.