ड्रअर मेनु
ट्याब बारमा राख्न धेरै भएका, तर बारम्बार पनि नचलाइने मेनुहरू एक ठाउँमा पोको पार्ने टुक्रा।
प्रत्यक्ष पूर्वावलोकन
स्रोत
<div class="dc-dw">
<input class="dc-dw__sw" id="dc-dw-open" type="checkbox" aria-expanded="true" aria-controls="dc-dw-panel" checked>
<label class="dc-dw__trigger" for="dc-dw-open">
<span aria-hidden="true">☰</span><span class="dc-sr">전체 메뉴 열고 닫기</span>
</label>
<label class="dc-dw__scrim" for="dc-dw-open"><span class="dc-sr">메뉴 닫기</span></label>
<nav class="dc-dw__panel" id="dc-dw-panel" aria-label="전체 메뉴">
<div class="dc-dw__me">
<span class="dc-dw__avatar" aria-hidden="true">김</span>
<span class="dc-dw__who">
<b class="dc-dw__name">김하늘</b>
<span class="dc-dw__sub">쿠폰 2장 · 포인트 1,200</span>
</span>
</div>
<ul class="dc-dw__list">
<li>
<a class="dc-dw__item" href="#" aria-current="page">
<span class="dc-dw__ico" aria-hidden="true">⌂</span>홈
</a>
</li>
<li>
<a class="dc-dw__item" href="#">
<span class="dc-dw__ico" aria-hidden="true">▤</span>주문 내역
<span class="dc-dw__count" aria-hidden="true">3</span>
<span class="dc-sr">배송 중 3건</span>
</a>
</li>
<li>
<a class="dc-dw__item" href="#">
<span class="dc-dw__ico" aria-hidden="true">♡</span>찜한 상품
</a>
</li>
</ul>
<hr class="dc-dw__sep">
<ul class="dc-dw__list">
<li>
<a class="dc-dw__item" href="#">
<span class="dc-dw__ico" aria-hidden="true">⚙</span>설정
</a>
</li>
<li>
<a class="dc-dw__item" href="#">
<span class="dc-dw__ico" aria-hidden="true">☏</span>고객센터
</a>
</li>
</ul>
</nav>
</div>.dc-dw {
position: relative; overflow: hidden;
min-height: 420px;
background: var(--dc-bg);
font-family: var(--dc-font);
}
.dc-dw__sw {
position: absolute; top: 0; left: 0;
width: 1px; height: 1px; opacity: 0;
margin: 0; pointer-events: none;
}
.dc-dw__trigger {
display: grid; place-items: center;
width: 44px; height: 44px;
margin: var(--dc-2); margin-top: calc(var(--dc-safe-top) + var(--dc-2));
border-radius: var(--dc-r-full);
color: var(--dc-text); font-size: 20px; line-height: 1;
cursor: pointer;
}
.dc-dw__sw:focus-visible + .dc-dw__trigger {
outline: 2px solid var(--dc-brand); outline-offset: 2px;
}
.dc-dw__scrim {
position: absolute; inset: 0;
background: var(--dc-overlay);
opacity: 0; visibility: hidden; cursor: pointer;
transition: opacity var(--dc-slow), visibility var(--dc-slow);
}
.dc-dw__panel {
position: absolute; top: 0; bottom: 0; left: 0;
width: 294px; max-width: 84%;
display: flex; flex-direction: column; gap: 2px;
padding: calc(var(--dc-safe-top) + var(--dc-4)) var(--dc-3) calc(var(--dc-safe-bottom) + var(--dc-4));
background: var(--dc-surface);
border-right: 1px solid var(--dc-line);
box-shadow: var(--dc-sh-3);
overflow-y: auto;
transform: translateX(-103%);
transition: transform var(--dc-slow);
}
.dc-dw__sw:checked ~ .dc-dw__scrim { opacity: 1; visibility: visible; }
.dc-dw__sw:checked ~ .dc-dw__panel { transform: translateX(0); }
.dc-dw__me {
display: flex; align-items: center; gap: var(--dc-3);
padding: var(--dc-2) var(--dc-2) var(--dc-4);
}
.dc-dw__avatar {
flex: 0 0 auto;
display: grid; place-items: center;
width: 44px; height: 44px; border-radius: var(--dc-r-full);
background: var(--dc-brand-soft); color: var(--dc-brand-text);
font-size: 17px; font-weight: 800;
}
.dc-dw__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dc-dw__list { display: flex; flex-direction: column; gap: 2px; }
.dc-dw__name { font-size: 16px; font-weight: 700; color: var(--dc-text); }
.dc-dw__sub { font-size: 12px; color: var(--dc-text-sub); }
.dc-dw__item {
display: flex; align-items: center; gap: var(--dc-3);
min-height: 48px; padding: 0 var(--dc-3);
border-radius: var(--dc-r-md);
color: var(--dc-text-sub); text-decoration: none;
font-size: 15px; font-weight: 600;
transition: background var(--dc-fast), color var(--dc-fast);
}
.dc-dw__item:active { background: var(--dc-sunken); }
.dc-dw__item[aria-current="page"] {
background: var(--dc-brand-soft); color: var(--dc-brand-text);
}
.dc-dw__ico {
flex: 0 0 auto; width: 22px; text-align: center;
font-size: 17px; line-height: 1;
}
.dc-dw__count {
margin-left: auto;
min-width: 20px; height: 20px; padding: 0 6px;
border-radius: var(--dc-r-full);
background: var(--dc-danger); color: var(--dc-text-on);
font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}
.dc-dw__sep {
height: 1px; margin: var(--dc-3) var(--dc-3);
border: 0; background: var(--dc-line);
}
.dc-dw--right .dc-dw__trigger { margin-left: auto; }
.dc-dw--right .dc-dw__panel {
left: auto; right: 0;
border-right: 0; border-left: 1px solid var(--dc-line);
transform: translateX(103%);
}
.dc-dw--right .dc-dw__sw:checked ~ .dc-dw__panel { transform: translateX(0); }कसरी प्रयोग गर्ने
- धेरै चल्ने ठाउँ यहाँ नराख्नुहोस् — ट्याब बारमा उकाल्नुहोस्; ड्रअर सधैं एक टच बढी टाढा हुन्छ
- सिरानमा कुन खातामा लगइन छ देखाउनुहोस्; ड्रअर खोल्ने आधा कारण त्यही हो
- बाहिरको अँध्यारो भाग थिच्दा पनि बन्द हुनुपर्छ — निस्कने बाटो एउटै भए थुनिएको लाग्छ
- दस वस्तु नाघे लाइनले समूह बनाउनुहोस्; बीस नाघे ड्रअर नभई छुट्टै पर्दा बनाउनुहोस्
ध्यान दिनुपर्ने कुरा
- चेकबक्सले खुल्ने/बन्द हुने बनाए स्क्रिप्ट चाहिँदैन, तर किबोर्डले पुग्नुपर्छ — dc-sr नाम र focus घेरा नहटाउनुहोस्
- प्यानलमा --dc-safe-top र --dc-safe-bottom चाहिन्छ, नत्र नच र होम बारमुनि पस्छ
- ड्रअर खुला हुँदा पछाडिको पर्दा पढिनु हुँदैन; वास्तविक कोडमा पृष्ठभूमिमा aria-hidden राख्नुहोस्