부트스트랩 기반으로 멀터레벨 드랍다운 메뉴를 만드는 걸 목표로 구글링해서 찾은 소스를 분석해가면서 만들어보려고 한다.
http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3
에 나온 예제 소스를 가지고 분석해보자.
사이트 HTML 소스만으로 실행하면 아래 화면과 같은 결과가 나온다.
소스 보기
이 소스에서 bootstrap 관련 CSS와 JS를 연결하면, 아래와 같이 바뀐다.
소스보기
서브메뉴가 제대로 나오지 않는다는 걸 확인할 수 있다.
이제 topmenu.css 라는 이름으로 css 파일을 추가해보자.
서브메뉴까지 다 나온 걸 확인할 수 있다.
여기까지 시도하려고 작성한 것은 아니다.
분석을 더 해보자.
<div class="container">
<div class="row">
<h2>Multi level dropdown menu in Bootstrap 3</h2>
<hr>
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li><a href="#">Some action</a></li>
<li><a href="#">Some other action</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Hover me for more options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level</a></li>
<li class="dropdown-submenu">
<a href="#">Even More..</a>
<ul class="dropdown-menu">
<li><a href="#">3rd level</a></li>
<li><a href="#">3rd level</a></li>
</ul>
</li>
<li><a href="#">Second level</a></li>
<li><a href="#">Second level</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<ul class="dropdown-menu"> 로 표기되고 있고,
<li class="dropdown-submenu"> 로 표기되고 있다.
=== topmenu.css ===
.dropdown-submenu { position: relative;}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu { display: block;}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after { border-left-color: #fff;}
.dropdown-submenu.pull-left { float: none;}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
메뉴를 수동으로 직접 작성하는 것은 별로 어려울 것이 없을 거 같다.
목적은 메뉴를 PHP와 연동하여 자동으로 생성하는 걸 구현하고 싶다.
다음에는 PHP 와 연동하여 메뉴를 자동으로 생성하는 걸 해보자.
'Web 프로그램 > 메뉴 만들기' 카테고리의 다른 글
| 다차원 배열 단순화 및 TreeView SQL (1) | 2017.12.28 |
|---|---|
| [bootstrap] PHP/MySQL 과 연동한 부트스트랩 메뉴 만들기 (2) | 2017.02.15 |
| [bootstrap] navbar-fixed-top 설정때문에 (0) | 2017.02.07 |
| [bootstrap] TopMenu, 로그인, 로그아웃 처리 (0) | 2017.02.01 |
| [jQuery] jQuery 토글 및 메뉴 만들기 - 1 (0) | 2017.01.26 |
Link2Me