홈페이지 경로 history 바닐라 자바스크립트랑 CSS로 간편하게 표시하기

html5 vanilla JS CSS3

가끔 고객이 아 이 페이지는 다른 대메뉴의 하위메뉴로 옮겨주세요~ 라는 등 사이트맵 구조가 바뀌면 html DOM을 일일히 수정하는 노가다 작업을 해야하는데 그게 너무 싫지 않습니까...

1) 모든 페이지에 일일히 하드코딩으로 <li>대메뉴</li> <li>중메뉴</li> <li>소메뉴</li> 타이핑해주기

2)
위의 방법은 일일히 ctrl+F 해서 찾아서 수정해야함. 인간은 반드시 실수를 함.. 뭔가 빼먹게 되어있음
그래서 이번엔 페이지 상단 스크립트에 선언을 해서
var depth_1 = '대메뉴명'
var depth_2 = '중메뉴명'
<li class="depth_1">0000</li> <li class="depth_2">00000</li> : HTML DOM은 이렇게 작성하고
스크립트 파일에서 for문을 돌려 해당 클래스명을 가진 DOM의 innerHTML을 변수에 선언해준 스트링값으로 몽창 전환하는 방법을 썼었음.
ㄱ그러나 이 방식도 굉장히 귀찮은게 결국 depth가 깊어지거나 짧으면 HTML DOM을 직접적으로 추가하고 삭제해야함

3)
그래서 생각한게 지금 이 방법.
depth가 아무리 깊어지더라도 자동으로 알아서 DOM 객체를 선언해주면 좋겠는데....

HTML + CSS + JS(배열은 이후 유지보수 및 수정을 감안하여 찾기 쉬운 head 상단에 선언하는게 좋다)

 

그리고 JS 

 

결과물

depth가 얼마나 늘어나든~~ 알아서 추가해주고
CSS에서 last-child 속성을 이용하여 화살표 제거 및 최종 depth(현재 페이지)를 강조 표시 할 수 있다.

배열 array.zip

0.00MB

저는 친절하니까 파일도 올려드림