본문으로 바로가기

그누보드5 메뉴 분석

category 그누보드/GNU 자습서 2018.12.01 11:00

그누보드5에서는 관리자에서 메뉴설정이 가능하도록 개편되었습니다. 워드프레스를 사용하면서 참으로 부러웠던 기능중에 하나인데 조금이나마 그 목마름을 해소할 수 있습니다.

해당 글은 그누보드5 버전을 기준으로 작성되었습니다.

메뉴구조

그누보드5의 메뉴의 구조는 아래와 같은 형식으로 일반적인 메뉴구조와 다름이 없다. 메뉴에 관련된 기능은 js/jquery.menu.js 파일에서 관련된 스타일은 css/default.css 에 정의되어 있다.

<nav id="gnb">
    <h2>메인메뉴</h2>
    <ul id="gnb_1dul">
        <li class="gnb_1dli" style="z-index:999">
            <a href="경로" class="gnb_1da">메뉴명</a>
            <ul class="gnb_2dul">
                <li class="gnb_2dli"><a href="경로" target="_self" class="gnb_2da">서브메뉴명</a></li>
                <li class="gnb_2dli"><a href="경로" target="_self" class="gnb_2da">서브메뉴명</a></li>
            </ul>
        </li>
            
        <li class="gnb_1dli" style="z-index:998">
            <a href="경로" target="_blank" class="gnb_1da">메뉴명</a>
        </li>
        .....
    </ul>
</nav>
  • .gnb_1da 에 마우스가 오버되면 부모요소인 .gnb_1dli 요소에 .gnb_1dli_over.gnb_1dli_on 을 추가한다.

그누보드5 메뉴 디자인 분석

스타일시트를 이용한 디자인과 관련된 부분에 대한 설명으로 아래에서 설명하는 클래스명을 이용해 디자인에 도움을 받을 수 있다.

사실 오직 스타일시트만을 이용해서 가능한 부분을 자바스크립트를 이용해 구현했는지는 아직 의문이다.


.gnb_1dli_over 와 .gnb_1dli_over2

이것은 서브메뉴의 위치 결정을 위해 붙여지는 클래스로 추측된다.

서브메뉴 .gnb_2dul 의 스타일을 살펴보면 top 의 위치만 정해져 있고, .gnb_1dli_over .gnb_2dul 에 left: 0 의 값이 적용되고, .gnb_1dli_over2 .gnb_2dul 에 right: 0 의 값이 적용된다.

.gnb_1dli_over2 는 우측으로 메뉴가 배치되었을 경우, 마지막 메뉴의 서브메뉴가 나타날 공간을 배려하여 계산되어 붙여지는 것 같다.


댓글을 달아 주세요

티스토리 툴바