Let's make bootstrap dropdown menu
Bootstrap has many great features. Easy and great-looking dropdown menu is one of the things. At first, look at the reference in the page of http://getbootstrap.com/.
Dropdown Action Another action Something else here Separated link
Dropdown is a 'Component' of bootstrap. How we can make a dropdown menu? First you need the unordered list(<ul>). Its class is 'dropdown-menu' and role is 'menu'. <li> can be divider if it is added with the class of 'divider'. 'aria-labelledby' will be treated later.
Dropdown Menu will be shown up when you click the some button or something. 'Dropdown menu' cannot exist itself, so it must be linked. In upper example, there is the button named Dropdown. It must be linked with
those button. Linking is so easy. You can simply link the dropdown menu with the button.
1. Make button.
2. Give ID to the button.
3. Set 'data-toggle' to 'dropdown'.
4. 'aria-labelledby' of the unordered list(<ul>, dropdown menu) is ID of the button.
Although you don't want to link with the buttons, the process almost same. For example, there is the navbar.
Navbar can have dropdown-menu, too.
Dropdown Action Another action Something else here Separated link One more separated link
It won't need the ID because what is linked with dropdown-menu is so obvious. You can make dropdown-menu by simply adding classes and data-toggle option.
In these work, jQuery and bootstrap's JS must be required. Because making something show or hide is the JS's role. So,
It is the general code. Do you realize why jQuery and JS are needed?
|[jQuery] 누르면 크기가 늘어나는 검색창 (9)||2014.05.04|
|[CSS3] box-shadow 속성 (11)||2014.05.04|
|CSS Grayfilter with crossbrowsing (16)||2014.04.17|
|Offcanvas가 있는 반응형 스킨의 구조 설계 (14)||2014.03.30|
|Bootstrap Customize - Boost your bootstrap (7)||2014.03.16|
|Make bootstrap dropdown menu (4)||2014.03.09|
|부트스트랩의 col-push와 col-pull 속성 (1)||2014.03.05|
|[CSS] 구글 애드센스 노란색 뒷배경 제거하기 (1)||2014.02.26|
|[CSS] CSS로만 만든 배경 / 그레디언트 들어간 배경 쓰기 (5)||2014.02.24|
|[폰트] 구글 Fonts이용, 영문 웹폰트 적용시키기 (9)||2014.02.22|