YUI 3 Basic Left Nav 예제 사용시 주의사항

YUI 3 Basic Left Nav 예제를 사용해서 메뉴를 만드려고 했다. 쉽게 쉽게 되는가 싶었는데 yahoo의 example은 메뉴가 깔끔하게 나오는 반면 내 서버에서 돌린 코드는 메뉴가 펼쳐졌다 접히는 과정이 다 보여졌다.

 

소스코드는 완전히 똑같은데도 그래서 계속 찾아보니 html 코드 중에 이런 부분이 있었다.

 

<link rel="stylesheet" type="text/css" href="assets/node-menunav-examples-base.css">

 

내 서버에는 없는 파일이라 관련 스타일이 적용되지 못했던 것이다. 따라서 바로 아래 나타나는 다음 코드가 작동을 못했다.

 

<script type="text/javascript">
        // Hide the menu while its dependencies are being loaded
        document.documentElement.className = "yui-loading";
</script>

 

"yui-loading" 은 메뉴를 감추는 작업을 한다. 로딩하는 동안 메뉴를 감춰서 메뉴가 그려지는 과정을 감춰 보기좋게 한다.

 

메뉴가 다 로딩되면 그려주게 된다.

 

menu.get("ownerDocument").get("documentElement").removeClass("yui-loading");

 

또한 메뉴의 id를 productsandservices로 해주지 않으면 css가 적용되지 않을 수 있으므로 sample을 참고할 때 주의해야 한다.