๐Ÿช„ ๊ฐ„๋‹จํ•œ ๊ธฐ๋Šฅ ๊ตฌํ˜„. Navigation Bar (Side) w/ JS

[meษช]ยท2021๋…„ 12์›” 15์ผ
0

5. Mini Toy Projects

๋ชฉ๋ก ๋ณด๊ธฐ
5/17

Responsive Side Navigation Bar in HTML CSS And JavaScript | Dashboard Sidebar Menu

HTML, JS
boxicons.com์— ์•„์ด์ฝ˜ ๋งŽ๋„ค
div... div๊ฐ€ ๋„ˆ๋ฌด ๋งŽ์•„...
๋˜ ๋‚˜์˜จ ๋ณ€์ˆ˜.classList.toggle("active")

CSS
ํ”„๋กœํ•„ ์‚ฌ์ง„์—์„œ object-fit: cover
transition: all 0.5s ease์˜ ๋งˆ๋ฒ•
HOME CONTEN์—์„œ width: clac(100% - 240px)์™€ left: 240px
opacity:0๊ณผ display:none์˜ ์ฐจ์ด
opacity:0๊ณผ pointer-events: none์œผ๋กœ ๋ฐ˜์‘ํ˜• ์ฝ”๋”ฉ
white-space: nowrap
๋‚œ ์•„์ด์ฝ˜์˜ ์™ผ์ชฝ ๋งˆ์ง„์„ ์—†์• ์„œ ์™„์ „ํžˆ ๊ฐ€์šด๋ฐ๋กœ ๋งŒ๋“ค์–ด์คฌ์ง€์ด

๐Ÿ™‡ the source of this content

CodingLab

profile
๋Š๋ ค๋„ ํ•  ๊ฑฐ์•ผ.......

0๊ฐœ์˜ ๋Œ“๊ธ€