लामो थिच्ने मेनु
सूचीको एउटै वस्तुसँग जोडिएका तीन-चार काम अर्को स्क्रिनमा नगएर त्यहीँ खोल्नुपर्दा प्रयोग गर्ने मेनु।
प्रत्यक्ष पूर्वावलोकन
स्रोत
<div class="dc-lp">
<details class="dc-lp__box">
<summary class="dc-lp__item">
<span class="dc-lp__name">현장 점검 보고서.pdf</span>
<span class="dc-lp__meta">2.4MB · 어제 오후 5:12</span>
</summary>
<div class="dc-lp__menu" role="group" aria-label="파일 동작">
<button class="dc-lp__act" type="button">이름 바꾸기</button>
<button class="dc-lp__act" type="button">공유</button>
<button class="dc-lp__act dc-lp__act--danger" type="button">삭제</button>
</div>
</details>
<p class="dc-lp__hint">길게 누르면 열립니다. 짧게 눌러도 같은 메뉴가 열려 누구나 닿을 수 있습니다.</p>
</div>.dc-lp {
padding: var(--dc-4);
background: var(--dc-bg);
font-family: var(--dc-font);
}
.dc-lp__box {
border: 1px solid var(--dc-line);
border-radius: var(--dc-r-md);
background: var(--dc-surface);
box-shadow: var(--dc-sh-1);
}
.dc-lp__item {
display: flex;
flex-direction: column;
gap: var(--dc-1);
min-height: 44px;
padding: var(--dc-3) var(--dc-4);
border-radius: var(--dc-r-md);
list-style: none;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.dc-lp__item::-webkit-details-marker { display: none; }
.dc-lp__item::marker { content: ""; }
.dc-lp__box[open] .dc-lp__item {
border-bottom: 1px solid var(--dc-line);
border-radius: var(--dc-r-md) var(--dc-r-md) 0 0;
background: var(--dc-sunken);
}
.dc-lp__name {
font-size: 15px;
font-weight: 600;
color: var(--dc-text);
}
.dc-lp__meta {
font-size: 12px;
color: var(--dc-text-mute);
}
.dc-lp__menu {
display: flex;
flex-direction: column;
padding: var(--dc-1);
}
.dc-lp__act {
display: flex;
align-items: center;
gap: var(--dc-3);
min-height: 48px;
padding: 0 var(--dc-3);
border: 0;
border-radius: var(--dc-r-sm);
background: none;
color: var(--dc-text);
font-family: var(--dc-font);
font-size: 15px;
text-align: left;
cursor: pointer;
transition: background var(--dc-fast);
}
.dc-lp__act:hover { background: var(--dc-sunken); }
.dc-lp__act--danger { color: var(--dc-danger); }
.dc-lp__ico {
width: 20px;
height: 20px;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.dc-lp__hint {
margin: var(--dc-3) 0 0;
font-size: 12px;
line-height: 1.6;
color: var(--dc-text-mute);
}document.querySelectorAll('.dc-lp__box').forEach(function (box) {
var item = box.querySelector('.dc-lp__item');
if (!item) return;
var timer = null;
function clear() {
if (timer) { clearTimeout(timer); timer = null; }
}
item.addEventListener('pointerdown', function () {
clear();
timer = setTimeout(function () {
timer = null;
box.open = true;
}, 450);
});
['pointerup', 'pointercancel', 'pointerleave'].forEach(function (name) {
item.addEventListener(name, clear);
});
});कसरी प्रयोग गर्ने
- त्यो एउटै वस्तुसँग सम्बन्धित काम मात्र राख्नु; पूरै स्क्रिनका काम माथिल्लो बारमा राख्नु
- जोखिमपूर्ण काम सबैभन्दा तल र छुट्टै रङमा राख्नु, तब औंला जाँदाजाँदै छोइँदैन
- मेनुमाथि वस्तु आफैं देखाउनु, तब कुन चीजको काम हो भन्ने अन्योल हुन्न
ध्यान दिनुपर्ने कुरा
- लामो थिच्ने काम आँखाले देखिँदैन: छोटो थिचाइले पनि खुल्ने बनाउनु वा 'अरू' बटन राख्नु
- details/summary ले बनाए स्क्रिप्ट बिग्रिए पनि मेनु खुल्छ — स्क्रिप्टले लामो थिचाइ मात्र थप्छ
- मेनुका पङ्क्ति करिब 48px उचाइ दिनु; साँघुरो भए गलत थिचिन्छ