아이콘이 나오는 사이드 메뉴 happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > CSS > 메뉴 > 아이콘이 나오는 사이드 메뉴 상세정보

클라우드태그

Javascript

PHP

html

asp

mysql

CSS

mobile

jquery

image

slide

占쌨댐옙

占쏙옙占쏙옙占쏙옙트

메뉴

현재접속자 명

아이콘이 나오는 사이드 메뉴

해피팀

네티즌

소스분류

메뉴

다운로드 횟수

3 회

간단설명

아이콘이 포함되는 사이드 메뉴입니다.

평가하기

CSS와 JS를 이용한 사이드 메뉴 인터페이스입니다.

마우스를 올렸을 때 아이콘을 포함한 하이라이트 처리가 됩니다.

HTML 구조

</g>

</symbol>

</g>

</symbol>

</g>

</symbol>

</g>

</symbol>

</g>

</symbol>

</g>

</symbol>

</g>

</symbol>

</g>

</symbol>

</g>

</symbol>

</g>

</symbol>

</svg>

</svg>

</div>

.
.
.
자세한 소스는 사이트에서 확인하실 수 있습니다.

CSS 소스

* {

border: 0;

box-sizing: border-box;

margin: 0;

padding: 0;

}

:root {

--hue: 223;

--hue2: 13;

--bg: hsl(var(--hue),10%,90%);

--fg: hsl(var(--hue),10%,10%);

--primary: hsl(var(--hue),90%,55%);

--red: hsl(var(--hue2),90%,55%);

--trans-dur: 0.3s;

font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1280 - 320));

}

body,

button,

input {

font: 1em/1.5 "DM Sans", sans-serif;

}

body {

background-color: var(--bg);

color: var(--fg);

height: 100vh;

transition:

background-color var(--trans-dur),

color var(--trans-dur);

}

button {

-webkit-appearance: none;

appearance: none;

}

.nav {

background-color: hsl(0,0%,100%);

display: flex;

flex-direction: column;

position: relative;

height: 100%;

width: 16em;

transition:

background-color var(--trans-dur),

width var(--trans-dur) ease-in-out;

}

.nav__main {

overflow-x: hidden;

overflow-y: auto;

padding: 2.5em 1.75em;

width: inherit;

-webkit-overflow-scrolling: touch;

scrollbar-width: 8px;

scrollbar-color: transparent transparent;

}

.nav__main::-webkit-scrollbar {

width: 8px;

}

.nav__main::-webkit-scrollbar-track {

background: transparent;

}

.nav__main::-webkit-scrollbar-thumb {

background-color: transparent;

border-radius: 4px;

}

.nav__main:hover {

scrollbar-color: hsla(0,0%,0%,0.2) transparent;

}

.nav__main:hover::-webkit-scrollbar-thumb {

background-color: hsla(0,0%,0%,0.2);

}

.nav__bottom {

background-color: inherit;

box-shadow: 0 1px 0 hsl(var(--hue),10%,80%) inset;

padding: 1em 1.75em;

transition: box-shadow var(--trans-dur);

}

.nav__heading {

color: hsl(var(--hue),10%,45%);

display: block;

font-size: 0.75em;

line-height: 1;

margin-bottom: 0.75rem;

text-transform: uppercase;

transition: color var(--trans-dur);

}

.nav__heading-text {

display: inline-block;

transform: translateX(1em);

transition: transform var(--trans-dur) ease-in-out;

}

.nav__items {

list-style: none;

margin: 0 0 3em 0;

}

.nav__items:last-child {

margin-bottom: 0;

}

.
.
.
자세한 소스는 사이트에서 확인하실 수 있습니다.

JS 소스

window.addEventListener("DOMContentLoaded",() => {

const nav = new Nav("nav");

});

class Nav {

constructor(qs) {

this.el = document.querySelector(qs);

this.expanded = true;

this.expandBtn = null;

this.timeout = null;

this.init();

}

init() {

this.expandBtn = this.el?.querySelector("[data-expand]");

this.expandBtn?.addEventListener("click",this.toggleSize.bind(this));

}

toggleSize() {

this.expanded = !this.expanded;

this.el.setAttribute("data-expanded", this.expanded);

this.expandBtn.setAttribute("aria-expanded", this.expanded);

const label = this.expanded ? "Collapse" : "Expand";

const timeoutValue = this.expanded ? 0 : 300;

clearTimeout(this.timeout);

this.timeout = setTimeout(() => {

this.el.querySelector("[data-expand-label]").innerText = label;

},timeoutValue);

}

첨부파일을 다운로드 받거나 해당 사이트로 이동해서 전체 소스를 확인하실 수 있습니다.

네티즌 의견 이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)

내용

아이디

의견남기기

등록된 의견이 없습니다.