이전 글에서 익스프레스 엔진의 메뉴를 2단 서브 메뉴로 만들고 부트스트랩 라이브러리 파일들을 추가했습니다. 이번 글에서는 내비게이션 메뉴바를 만들어보겠습니다. 이전 글에서 알아봤듯이 익스프레스 엔진의 메뉴 구조는 여러가지 변수와 조건문에 의해 만들어지고 있어서 부트스트랩의 메뉴 선택자를 적절하게 나타나도록 조건문을 이용하면 됩니다.
메뉴바 만들기
이전 글에서 부트스트랩의 기본 메뉴 구조에 대해 알아봤는데 반응형 메뉴바는 몇가지 태그와 선택자가 추가됩니다.
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<!-- 실제 메뉴가 들어가는 곳, 검색 박스 추가 가능 -->
</div>
</div>
</div>
</div>
반응형 메뉴바는 화면 폭이 축소됐을 때 좌우로 정렬돼 있는 메뉴들이 상하로 배열되면서 감춰지고 버튼이 나타나며 버튼을 클릭하면 감춰진 메뉴들이 나타나는 구조입니다. 이러한 버튼 역할을 하는 것이 class="btn btn-navbar"가 있는 부분입니다. 자바스크립트에 의해 작동되도록 데이터 속성으로 collapse를 사용합니다. 클릭하면 함몰되거나 나타나는 부분의 타겟이 .nav-collapse라는 선택자가 있는 부분입니다. 위의 주석문을 보면 "실제 메뉴가 들어가는 곳"입니다. .icon-bar 세개는 버튼의 가로줄 세개를 만듭니다. .brand가 있는 div은 사이트 제목이 들어가는 곳으로 불필요할 경우 제거해도 됩니다. 위 코드에서 이전 글에서 2단 서브 메뉴를 만든 코드를 추가하면 다음과 같습니다.
<div class="navbar"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="#">Project name</a> <div class="nav-collapse collapse"> <nav class="gnb" id="gnb"> <ul> <li loop="$GNB->list=>$key1,$val1" class="active" |cond="$val1['selected']"> <a href="{$val1['href']}" target="_blank" |cond="$val1['open_window']=='Y'">{$val1['link']}</a> <ul cond="$val1['list']"> <li loop="$val1['list']=>$key2,$val2" class="active" |cond="$val2['selected']"><a href="{$val2['href']}" target="_blank" |cond="$val2['open_window']=='Y'">{$val2['link']}</a> <ul cond="$val2['list']"> <li loop="$val2['list']=>$key3,$val3" class="active" |cond="$val3['selected']"><a href="{$val3['href']}" target="_blank" |cond="$val3['open_window']=='Y'">{$val3['link']}</a></li> </ul> </li> </ul> </li> </ul> </nav> </div> </div> </div> </div>
이제부터 nav 태그 부분에 부트스트랩의 메뉴바 선택자들을 추가하면 됩니다. 그냥 추가해서는 안되고 조건문에 맞춰야 합니다. 우선 nav 태그와 닫는 태그인 </nav>을 제거합니다. 이부분은 부트스트랩에는 없는 것입니다.
<nav class="gnb" id="gnb"><ul class="nav">
생략
</ul>
</nav>
그러면 위와같이 됩니다.
<li loop="$GNB->list=>$key1,$val1" class="active"|cond="$val1['selected']" class="dropdown"|cond="$val1['list']">
첫번째 li 태그안에 class="dropdown"|cond="$val1['list']"를 추가합니다. 이것은 서브 메뉴가 있을 경우 .dropdown이라는 선택자를 추가하라는 조건문입니다.
<a href="{$val1['href']}" class="dropdown-toggle"|cond="$val1['list']" data-toggle="dropdown"|cond="$val1['list']" target="_blank" |cond="$val1['open_window']=='Y'">{$val1['link']}</a>
그 다음의 a 태그에는 class="dropdown-toggle"|cond="$val1['list']"를 추가합니다. 서브 메뉴가 있을 경우 .dropdown-toggle이라는 선택자를 추가하게 됩니다. 그리고 클릭하면 자바스크립트에 의해 서브 메뉴가 나타나도록 data-toggle="dropdown"|cond="$val1['list']"를 추가합니다. 이것도 조건문이 있어서 서브 메뉴가 있을 경우에만 데이터 속성과 값을 추가합니다.
{$val1['link']} <b class="caret"|cond="$val1['list']"></b>
{$val1['link']}는 주메뉴 이름이 나오는 변수입니다. 한칸 띄고 위처럼 추가합니다. 이것은 서브 메뉴가 있을 경우 작은 삼각형(caret)을 만드는 선택자를 추가하라는 조건문입니다.
<ul class="dropdown-menu" cond="$val1['list']">
그 다음 줄의 ul 태그에는 class="dropdown-menu"를 추가합니다. 뒤에 조건 문이 있지만 이것은 서브 메뉴가 있을 경우 ul 내부의 내용인 목록(li)을 출력하라는 의미입니다. class="dropdown-menu"는 항상 있는 것입니다.
<li loop="$val1['list']=>$key2,$val2" class="dropdown-submenu"|cond="$val2['list']">
그 다음의 li 태그에는 .active라는 선택자를 .dropdown-submenu 선택자로 교체합니다. 그리고 selected는 list로 교체합니다. 이것은 이 메뉴에 서브 메뉴가 있는 경우 .dropdown-submenu라는 선택자를 추가하게 됩니다. 그 다음의 a 태그는 그대로 둡니다.
<ul class="dropdown-menu" cond="$val2['list']">
그 다음의 ul 태그에는 이전과 마찬가지로 .dropdown-menu를 추가합니다.
<li loop="$val2['list']=>$key3,$val3"
class="active"|cond="$val3['selected']">
그 다음의 li 태그에서 class="active" |cond="$val3['selected']"는 제거합니다. 이 부분은 위에서도 제거했지만 클릭했을 때 .active라는 선택자를 추가하는 조건문인데 선택됐다는 표시로 메뉴가 다른 색상이나 내부 그림자 효과가 나타나게 되는데 서브 메뉴에는 필요가 없으니 제거한 것입니다. 하지만 주메뉴에는 필요하죠.
<a href="{$val3['href']}" target="_blank"|cond="$val3['open_window']=='Y'">{$val3['link']}</a>
최종 a 태그 부분은 그대로 둡니다. 만일 3단 서브 메뉴를 추가하고자 한다면 2단 서브 메뉴처럼 추가하고 수정하면 됩니다. 연습삼아 해보세요. 변수의 숫자들이 늘어나겠죠.
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li loop="$GNB->list=>$key1,$val1" class="active"|cond="$val1['selected']" class="dropdown"|cond="$val1['list']">
<a href="{$val1['href']}" class="dropdown-toggle"|cond="$val1['list']" target="_blank" |cond="$val1['open_window']=='Y'">{$val1['link']} <b class="caret"|cond="$val1['list']"></b></a>
<ul class="dropdown-menu" cond="$val1['list']">
<li loop="$val1['list']=>$key2,$val2" class="dropdown-submenu"|cond="$val2['list']"><a href="{$val2['href']}" target="_blank" |cond="$val2['open_window']=='Y'">{$val2['link']}</a>
<ul class="dropdown-menu" cond="$val2['list']">
<li loop="$val2['list']=>$key3,$val3"><a href="{$val3['href']}" target="_blank" |cond="$val3['open_window']=='Y'">{$val3['link']}</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
최종적으로 위와 같이 되어야 합니다. 그러면 저장을 하고 웹브라우저에서 확인하면 다음과 같이 나올 것입니다.
서브 메뉴가 있는 주메뉴를 클릭하면 서브 메뉴가 나오고 1단 서브 메뉴에 다시 서브 메뉴가 있는 경우 우측을 향한 세모가 만들어집니다. 이곳에 마우스를 올리면 2단 서브 메뉴가 나타납니다. 그런데 1단 서브메뉴가 홈 메뉴 바로 아래에 위치하고 있습니다. 이를 주메뉴인 웹디자인 바로 아래에 위치하도록 해야합니다. 요소검사를 해보면 ul.nav에 상대 위치 포지션이 설정돼 있습니다. 웹디자인이라는 메뉴 바로 아래에 위치하려면 이곳에 상대 위치 포지션을 설정해줘야 합니다. 클릭한 상태에서 이 메뉴에 .active와 .open이라는 선택자가 추가돼있습니다. 그러면 이 선택자에 상대 위치 포지션을 설정하면 됩니다.
.active.open { position:relative; }
css 폴더에서 layout.css 파일을 텍스트 에디터에 열고 위와같이 입력합니다. 두개의 클래스 선택자를 붙인 것은 .active 선택자는 다른 곳에 있을 수도 있습니다. 하지만 .open이라는 선택자는 메뉴를 클릭해서 서브 메뉴가 열린 경우에만 추가되는 선택자이므로 이 두개를 붙이면 이곳의 li 태그를 특정하게 됩니다. 사용자 스타일시트를 열었으니 여러가지 설정을 해보도록 합니다.
@import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css");
* { font-family: "Nanum Gothic" !important; }
.active.open { position:relative; }
스타일시트의 상단에 나눔고딕 구글 링크를 추가합니다. 그리고 모든 요소에 나눔고딕체를 적용합니다. 이미 메뉴 설정에서 익스프레스 엔진에 의해 나눔고딕체를 사용하도록 했지만 아래처럼 일부 글자가 다른 폰트로 나오는 경우가 있습니다.
게시판에는 기본 폰트가 적용돼서 그렇습니다. 다른 폰트 설정보다 최우선으로 적용하기 위해서 !important를 사용했으니 이제 게시판에도 나눔고딕체로 적용될 것입니다.
서브 메뉴 레이아웃 변경
부트스트랩으로 디자인을 하면 부트스트랩만의 고유의 디자인이 그대로 나와서 만일 다른 사이트에서도 이런 디자인을 선택했다면 서로 비슷한 디자인이 되죠. 부트스트랩의 단점입니다. 부트스트랩은 기본 레이아웃일뿐 그대로 적용해서 사용하라는 법은 없으니 얼마든지 내가 원하는 대로 변경해서 나만의 독특한 디자인을 만드는 것이 좋습니다. 부트스트랩의 서브 메뉴는 주메뉴를 가리키는 화살표가 있죠. 이것을 제거하고 또한 둥근 모서리를 제거하는 방법을 알아봅니다.
이미 적용된 스타일시트를 제거하기 위해서는 해당 선택자를 찾아야합니다. 요소검사를 하면 .dropdown-menu라는 선택자에 border-radius가 적용돼 있습니다. 이 속성은 예전에는 표준으로 승격되지 않아서 웹브라우저별로 접두어(prefix)를 붙여서 사용하도록 돼있었지만 지금은 승격돼서 이 접두어를 붙이지 않아도 됩니다. 부트스트랩은 안전을 위해 최근에 만들어졌더라도 접두어를 사용하고 있습니다. 일부 구 버전의 웹브라우저는 아직도 접두어를 붙여야 작동합니다. 그래서 해당 선택자와 위의 빨간색 부분을 복사해서 스타일시트에 붙여넣습니다.
.dropdown-menu, .dropdown-submenu > .dropdown-menu, .navbar-inner {
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}
둥근 모서리의 수치를 1픽셀로 변경합니다. 1픽셀이 거의 인식되지 않을 만큼 작은 수치이지만 전체적인 분위기는 다릅니다. 서브 메뉴와 내비게이션 메뉴바에도 둥근 모서리가 적용돼있으므로 해당 선택자를 추가합니다.
.navbar .nav > li > .dropdown-menu:before {
border-bottom: 0px solid #ccc;
}
.navbar .nav > li > .dropdown-menu:after {
border-bottom: 0px solid #ffffff;
}
그 다음으로 화살표를 제거합니다. 이전과 마찬가지로 요소검사 해서 화살표를 만드는 스타일시트를 복사해서 수치를 0으로 변경하면 됩니다. 부트스트랩은 아이콘을 제외하고 어떤 도형이라도 포토샵으로 만든 이미지 파일을 사용하지 않고 가능한 경우 스타일시트로 해결하고 있습니다. 최신의 디자인 방법은 이런 형태입니다. 스타일시트용 이미지는 전혀 사용하지 않습니다. 스타일시트로 도형을 만드는 방법은 이곳을 참고하세요.
둥근 모서리들이 제거됐습니다. 또한 반응형 디자인에 대해서는 손도 안댔지만 화면을 축소하면 아래처럼 메뉴바가 함몰되고 우측의 버튼을 클릭하면 세로로 메뉴가 나타납니다. 서브 메뉴가 있는 메뉴를 클릭하면 서브메뉴도 나타납니다.
