사이드바 드롭다운 박스 고정하기

<div class="sidebar">
	<ul class="sidebar-menu">
		<li class="submenu-parent-li">
			<a class="submenu-parent">
				<span>드롭다운</span>
			</a>
			<ul class="sidebar-submenu" style="display: none;">
				<li>사이드바</li>
				<li>고정하기</li>
				<li>ahnstu</li>
			</ul>
		</li>
	</ul>
</div>
<span>아무것도 없으면 허전할 것 같아서 추가해둔 코드 참고만</span>

 

예를 들어 위와 같은 형태의 사이드바가 있다면

 

<a class="submenu-parent"> 나 <li class="submenu-parent-li">에

 

클릭 이벤트를 걸어 class에 active(예시)를 추가하거나 삭제하여

 

<ul class="sidebar-submenu" style="display: block;"> 중 display를

 

none이나 block으로 바꿔 화면에 보이거나 안 보이게 할 것이다.

 

<div class="sidebar">
	<ul class="sidebar-menu">
		<li class="submenu-parent-li">
			<a class="submenu-parent active">
				<span>드롭다운</span>
			</a>
			<ul class="sidebar-submenu" style="display: display;">
				<li>사이드바</li>
				<li>고정하기</li>
				<li>ahnstu</li>
			</ul>
		</li>
	</ul>
</div>
<span>아무것도 없으면 허전할 것 같아서 추가해둔 코드 참고만</span>

 

 

일단 default로는 none으로 표시되어

 

사용자가 화면 전환 시 사이드바는 닫혀있는 상태로

 

표시될 건데 이를 UX 측면에서 보면 되게 불편하지 않을 수가 없다.

 

그래서 이를 해결하기 위해서 방법을 생각해 봤다.

 

---

일단 펼쳐야 할 대상을 식별해야 하기 때문에

 

어떤 걸로 식별할 수 있을까 생각해 봤다.

 

나는 프로젝트를 진행하고 있지는 않지만

 

학원에서는 스프링으로 프로젝트를 진행하고 있다.

 

스프링은 controller에서 어떤 화면을 보여줄지 결정하는데

 

window.location.pathname 부분이 이를 결정한다.

 

그래서 이를 substring하여 첫 번째 /를 제외하고 사용하면

 

되게 좋을 것 같아 이를 선택했다.

<div class="sidebar">
	<ul class="sidebar-menu">
		<li class="submenu-parent-li">
			<a class="submenu-parent" href="@{fixed}"
				<span>드롭다운</span>
			</a>
			<ul class="sidebar-submenu fixed" style="display: none;">
				<li>사이드바</li>
				<li>고정하기</li>
				<li>ahnstu</li>
			</ul>
		</li>
	</ul>
</div>
<span>아무것도 없으면 허전할 것 같아서 추가해둔 코드 참고만</span>

 

그래서 이런 식으로 어느 한 부분을 잡아서 class에 pathname을 추가해 준다.

 

이제 이를 jquery나 javascript로 pathname을 포함하는 클래스를 찾는다.

 

이후 부모, 자식, 형제 객체 중 class에 active(예시)를 추가해야 하는 태그를 찾아서

 

추가해 주면 끝이다.

---

인터셉터로 request.getRequestURI() 사용해서 모델에 추가한 뒤,

 

이를 이용하면 좋은 식별자로서

 

사이드바도 해결하고 좀 더 활용도 좋을 것 같은데

 

이건 아직 안 해봤다. 근데 이는 화면 설계할 때 미리 정해두고 해야 편할 것 같다.

 

위 코드 그냥 예시로 작성해둔거니 흐름만 파악하자.