Bootstrap 3은 여전히 RC에 있지만 구현하려고했습니다. 하위 메뉴 클래스를 넣는 방법을 알 수 없었습니다. CSS에는 수업이 없으며 새로운 문서조차도 그것에 대해 아무 말도하지 않습니다.
드롭 다운 하위 메뉴로 클래스 이름이있는 2.x에 있습니다.
답변
2018 업데이트
는 dropdown-submenu부트 스트랩 3 RC에서 제거되었습니다. 부트 스트랩 저자 Mark Otto ..
“하위 메뉴는 웹, 특히 모바일 웹에 현재 위치가 많지 않습니다. 3.0으로 제거됩니다” -https : //github.com/twbs/bootstrap/pull/6342
그러나 약간의 추가 CSS를 사용하면 동일한 기능을 얻을 수 있습니다.
부트 스트랩 4 (호버의 탐색 표시 줄 하위 메뉴)
.navbar-nav li:hover > ul.dropdown-menu {
display: block;
}
.dropdown-submenu {
position:relative;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-6px;
}Navbar 하위 메뉴 드롭 다운 호버
Navbar 하위 메뉴 드롭 다운 호버 (오른쪽 정렬)
Navbar 하위 메뉴 드롭 다운 클릭 (오른쪽 정렬)
Navbar 드롭 다운 호버 (하위 메뉴 없음)
부트 스트랩 3
다음은 3.0 RC 1을 사용하는 예입니다. http://bootply.com/71520
다음은 Bootstrap 3.0.0 (최종)을 사용하는 예입니다. http://bootply.com/86684
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 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:#cccccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
border-left-color:#ffffff;
}
.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;
}샘플 마크 업
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="menu-item dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop Down<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
<ul class="dropdown-menu">
<li class="menu-item ">
<a href="#">Link 1</a>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
<ul class="dropdown-menu">
<li>
<a href="#">Link 3</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>PS-왼쪽 위치를 조정하는 탐색 표시 줄의 예 : http://bootply.com/92442
답변
@skelly 솔루션은 훌륭하지만 호버 상태가 작동하지 않으므로 모바일 장치에서는 작동하지 않습니다.
BS 2.3.2 동작을 되찾기 위해 약간의 JS를 추가했습니다.
추신 : 그것은 당신이 거기에 도착하는 CSS와 함께 작동합니다 : http://bootply.com/71520 비록 당신이 다음 부분을 언급 할 수 있습니다 :
CSS :
/*.dropdown-submenu:hover>.dropdown-menu{display:block;}*/JS :
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
// Avoid following the href location when clicking
event.preventDefault();
// Avoid having the menu to close when clicking
event.stopPropagation();
// If a menu is already open we close it
$('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
// opening the one you clicked on
$(this).parent().addClass('open');
});결과는 내 WordPress 테마 (페이지 상단)에서 찾을 수 있습니다 : http://shprinkone.julienrenaux.fr/
답변
오늘 (2014 년 1 월 9 일)까지 Bootstrap 3은 여전히 하위 메뉴 드롭 다운을 지원하지 않습니다.
반응 형 탐색 메뉴에 대해 Google을 검색했는데 이것이 가장 좋습니다.
그것은는 스마트 메뉴 http://www.smartmenus.org/
다단계 하위 메뉴가있는 탐색 메뉴를 원하는 사람에게는 이것이 방법이기를 바랍니다.
업데이트 2015-02-17 스마트 메뉴는 이제 하위 메뉴에 대한 부트 스트랩 요소 스타일을 완전히 지원합니다. 자세한 내용은 스마트 메뉴 웹 사이트를 참조하십시오.
답변
Shprink의 코드가 가장 도움이되었지만 화면 밖으로 나가는 드롭 다운을 피하기 위해 다음과 같이 업데이트했습니다.
JS :
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
// Avoid following the href location when clicking
event.preventDefault();
// Avoid having the menu to close when clicking
event.stopPropagation();
// If a menu is already open we close it
$('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
// opening the one you clicked on
$(this).parent().addClass('open');
var menu = $(this).parent().find("ul");
var menupos = $(menu).offset();
if (menupos.left + menu.width() > $(window).width()) {
var newpos = -$(menu).width();
menu.css({ left: newpos });
} else {
var newpos = $(this).parent().width();
menu.css({ left: newpos });
}
});CSS : FROM background-color : #eeeeee TO background-color : # c5c5c5-흰색 글꼴 및 밝은 배경이 좋지 않았습니다.
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
background-color: #c5c5c5;
border-color: #428bca;
}나는 이것이 사람들이 나를 위해했던만큼 도움이되기를 바랍니다!
그러나 부트 스트랩이 하위 기능을 최대한 빨리 추가하기를 바랍니다.
답변
Skelly의 매우 유용한 해결 방법에 대한 의견 : Bootstrap-sass 3.3.6, utilities.scss, 19 행 : .pull-lefthas float:left !important. 이후 CSS에서도! important를 사용하는 것이 좋습니다.
.dropdown-submenu.pull-left {
float:none !important;
}답변
며칠 전에이 문제에 부딪 쳤습니다. 나는 많은 솔루션을 시도했지만 실제로 나를 위해 일한 적이 없어서 부트 스트랩의 드롭 다운 코드를 확장 / 재정의했습니다. closeMenus 함수가 변경된 원본 코드의 복사본입니다.
부트 스트랩 js의 핵심 클래스에 영향을 미치지 않기 때문에 좋은 솔루션이라고 생각합니다.
gihub에서 확인할 수 있습니다 : https://github.com/djokodonev/bootstrap-multilevel-dropdown
답변
드롭 다운에 대한 다른 해결책을 만듭니다. 희망이 도움이되기를 바랍니다.이 js 스크립트를 추가하십시오.
<script type="text/javascript"> jQuery("document").ready(function() {
jQuery("ul.dropdown-menu > .dropdown.parent").click(function(e) {
e.preventDefault();
e.stopPropagation();
if (jQuery(this).hasClass('open2'))
jQuery(this).removeClass('open2');
else {
jQuery(this).addClass('open2');
}
});
}); < /script>
<style type="text/css">.open2{display:block; position:relative;}</style>