참고 : 상단 메뉴 (네이게이션 바) 의 왼쪽에 메뉴 추가
기본적으로 제공하는 메뉴에는 1단계 메뉴만 등록되어 있는데, 여기에 서브 메뉴을 달아 보자.
일단 "_Layout.cshtml" 파일을 연다.
거기서 원하는 위치에 "dorpdown" 클래스를 지정한 "li" 항목을 달아 준다.
"dorpdown" 메뉴가 다른 메뉴와 다른 점은, <li> 와 <ul> 태그에 dropdown-toggle, dropdown, dropdown-menu 같은 스타일 시트 속성을 지정해준다는것이 다르다.
<ul class="nav navbar-nav">이렇게 하면 서브 메뉴가 등록된다.
<li>@Html.ActionLink("홈", "Index", "Home")</li>
<li>@Html.ActionLink("정보", "About", "Home")</li>
<li>@Html.ActionLink("연락처", "Contact", "Home")</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">커뮤니티 <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">공지사항</a></li>
<li class="divider"></li>
<li><a href="#">자유게시판</a></li>
<li><a href="#">건의사항</a></li>
<li><a href="#">방명록</a></li>
</ul>
</li>
</ul>
참고로 각 메뉴간 구분자인 "<li class="divider"></li>" 를 사용했을 경우.
모바일 버젼에서 보면 저렇게 흰색으로 보이니 주의.
저걸 처리하는 방법은 다양하겠지만, 이 경우 가장 간단한 방법은 반응형으로 모바일 버젼일때 저 Devider 의 색을 바꿔 주는 것이다.
즉, "Content > Site.css" 파일에 특정 크기 이하일때 색을 바꿔주는 스타일 시트를 추가해 주면.
참고로, Bootstrap 에선 기본적으로 1단계 하위 메뉴까지만 지원하므로, 그 이하 단계 까지 하위 메뉴를 확장하고 싶을 경우 직접 구현하던가, 아니면 별도의 확장 모듈을 사용하여야 한다.
