web

Bootstrap 4.0과 metisMenu.js

by 디자인솔 posted Dec 01, 2017
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

안녕하세요.

디자인솔의 이상옥입니다.

 

 

최근 Bootstrap 4.0.0-beta2가 나왔죠. 

display:block의 속성중 많은 부분을 display:flex로 바뀌면서 그리드 작업이 많이 유연해졌는데요. 불필요하고 불편한것도 여럿있네요.

 

 

이번에 작업을 하면서 metisMenu.js 가 제대로 작동을 하지 않아요.

Active 하지않는 메뉴들(2~3차메뉴)은 접혀야 하는데 펼침상태 그대로 입니다. ㅎㅎ 

 

 

metisMenu.js는 부트스트랩의 jQuery 중 Collapse를 간편하고 깔끔하게, 거기다 예쁘게 사용할수 있게 만든 저에겐 완소 jQuery죠.

 

 

metismenu3.jpg

이렇게 깔끔한 메뉴를 만들수 있으니까요. 그래서 앱과 웹에서 많은 분들이 사용하고 있습니다.

 

 

 

 

metismenu5.gif

그냥 부트스트랩에서는 태그안에 꽤 많은 것들을 넣어야해서 길고~~~ 지저분해요. ㅠ.ㅠ

 

 

 

 

metismenu6.gif

metisMenu는 아이디 호출과 약간의 css만으로 얼마든지 예쁜 메뉴를 만들수있지요.

 

 

 

 

metismenu1.gif

부트스트랩 v3.37에서 active일때의 collapse. 정상 입니다. 

 

 

 

metismenu2.gif

부트스트랩 v4.0.0-beta2 에서 collapse(display:none)가 aria-expanded="true", aria-expanded="false" 속성이 빠졌어요. 

그래서 비활성 메뉴들이 접혀지거나 펼쳐지는것이 제멋대로인거예요.

 

 

부트스트랩 4.0.0-beta2은 bootstrap.js에서 in 변수를 show로 바뀌면서 bootstrap.css class도 바꾼거죠.

혹시나 해서 찾아보니 개발자 Osman Nuri Okumus가 깃협에 올려놓았습니다. 

 

 

https://github.com/onokumus/metismenu/tree/master/dist

 

 

js 제대로 잘 돌아가구요.

css는 기존 metismenu 사용자라면 metisMenu.css 에서 

.metismenu .collapse {display: none}
.metismenu .collapse.in {display: block}

만 추가하면 정상 출력되네요.

 

 

**** 디자인솔 레이아웃을 사용하시는분은 이 글과 무관합니다. ^^