텔레그램 Sidebar-menu

HTML & CSS & Javascript

 

---

[구현]

1. HTML & CSS 

아이콘: 아이온 아이콘(ionicons)

폰트 어썸과 동일하게 CDN을 제공해서 사용법도 간단하고 깔끔한 아이콘도 많다.

일반적으로 어떠한 크기던 얼마든지 변경 가능하고 CSS를 이용해 다양한 효과를 줄 수 있는 게 특징이다. 

Ionicons Usage Guide: Tips for installing and using the Ionicons free icon library

Ionicons: The premium icon pack for Ionic Framework

 

white-space : nowrap

white-space는 스페이스와 탭,줄바꿈, 자동 줄 바꿈을 어떻게 처리할지 정하는 속성

	스페이스와 탭	줄바꿈	자동 줄바꿈
normal	병합	병합	O
nowrap	병합	병합	X
pre	보존	보존	X
pre-wrap	보존	보존	O
pre-line	병합	보존	O

• 스페이스와 탭 : 연속된 스페이스와 탭의 처리 방법입니다. 병합은 1개의 공백으로 바꾸는 것이고, 보존은 입력된 그대로 출력하는 것
• 줄 바꿈: 줄 바꿈의 처리방법입니다. 병합은 1개의 공백으로 바꾸는 것이고, 보존은 입력된 그대로 출력하는 것
• 자동 줄바꿈 : 내용이 영역의 크기를 벗어날 때 처리방법입니다. O는 자동으로 줄 바꿈 하여 영역 내에 내용을 표시하는 것이고, X는 영역을 벗어나더라도 입력된 대로 출력하는 것

 

navigation border-radius

navigation active 되고 난 후의 border-radius를 깎기 위해 ul 내부에 빈 태그 요소를 만들어 커스텀한다.

border 변경전 & 변경후

 

---

 

2. Javascipt

구현한 Html & Css의 요소들 중 버튼을 통해  효과를 부여하기 위한 css 파일에 "active" 클래스를 만든다. 

"active" 클래스 에는 버튼을 눌렀을 때 동작할 효과들을 요소별로 정의해 놓는다.

 

// menuToggle : 토글 버튼
// navigation : navigation menu
// list : 메뉴 목록

// ========================================================================================
let menuToggle = document.querySelector(".toggle");
let navigation = document.querySelector(".navigation");
menuToggle.onclick = function () {
  //toggle : on/off  switch의 개념, add()와 remove()메서드를 한번에 쓸 수 있는 합쳐진 개념
  //classlist: HTML:5 부터 추가된 class 속성값을 간단히 다룰 수 있는 프로퍼티 
  menuToggle.classList.toggle("active");
  navigation.classList.toggle("active");
};

//[ add active calss in selected list item ]
// list 선택자
let list = document.querySelectorAll(".list");

console.log(list.length); //7

// i 는 list.length 보다 적을때까지 반복: 1~6
for (let i = 0; i < list.length; i++) {
  // [ === i가 onclick 될때 함수실행 === ]
  list[i].onclick = function () {
    let j = 0;
    // while 조건문 : j 가 list.length 보다 작을때
    while (j < list.length) {
      //list[0 ~ list.length ] 까지 list를 적용
      list[j++].className = "list";
    }
    // i 번째 리스트에 active 을 적용
    list[i].className = "list active";
  };
}

 

DOMToKenList

공백으로 구분된 문자열로 표현된 데이터를 정렬하여 토큰 집합으로 만들어 집합을 조작하기 위한 메서드를 제공하는

유사 배열 인터페이스

 

 

classList

HTML5부터 class 속성 값을 간단히 다룰 수 있도록 ClassList라는 속성이 추가되었다.

ClassList는 DomTokenList를 반환하는 읽기 전용 프로퍼티이다.

DOMTokenList에서 제공하는 메소드	설명
length	목록에 포함된 문자열의 개수
item(index)	인덱스를 지정하여 문자열을 얻음
contains(string)	목록 안에 문자열이 있는지 확인
add(string)	목록에 문자열을 추가
remove(string)	목록으로 부터 문자열을 제거
toggle(string)	목록에 문자열이 있으면 제거, 그렇지 않으면 추가

 

Toggle

토글이란, on/off switch의 개념으로 스위치를 켰다, 껐다 하는 것처럼 add(), remove() 메서드를 쓸 수 있다.

보통 click 이벤트에 classList를 이용하여 toggle로 css로 style을 준 클래스명을 on/off 처리한다.

 

---

sidebar menu.zip

0.00MB

 

 

참고:

Sidebar Menu Using Html CSS & Javascript | Curved Outside in Active Tab - YouTube

[js] 자바스크립트 toggle 적용하기(ft. add, remove) (tistory.com)

💻 (tistory.com)

Element.classList - Web API | MDN (mozilla.org)

자바스크립트 classList 정의 및 js만들어보기 :: IT모아 (tistory.com)

CSS / box-sizing / 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성 – CODING FACTORY

CSS / white-space / 공백 처리 방법 정하는 속성 – CODING FACTORY

DOMTokenList::JavaScript 레퍼런스 (devdic.com)

DOMTokenList - Web API | MDN (mozilla.org)