부트스트랩이 있는 스크롤 가능한 메뉴 - 용기를 확장하지 않아야 할 때 확장하는 메뉴
부트스트랩으로 스크롤 가능한 메뉴를 활성화하기 위해 이 방법(그들의 fiddle)을 시도했지만, 그 방법으로 스크롤 가능한 메뉴는 컨테이너를 확장합니다 -- fiddle -- 스크롤 불가능한 메뉴는 올바르게 실행되지 않습니다.
이거 어떻게 고쳐요?부트스트랩과 호환되는 다른 방법에 대한 제안도 감사드립니다!
참고로 첫 번째 메서드의 fiddle에서 HTML을 참조합니다.
<ul class="nav">
<li class="dropdown">
<a class="icon-key icon-white" data-toggle="dropdown" href="#" style=
"font-weight: bold"></a>
<div class="dropdown-menu" style="margin-left: 2em">
<ul class="dropdown-menu">
<!-- static non-scrollable menu header 1 -->
</ul>
</div>
<div class="dropdown-menu" style="margin-left: 2em">
<ul class="dropdown-menu">
<li class="disabled">
<a href="#"><i class="icon-group"></i> <b>My Groups</b></a>
</li>
<li>
<div class="dropdown-menu scroll-menu scroll-menu-2x"
style="margin-left: 2em">
<ul class="dropdown-menu scroll-menu scroll-menu-2x">
<li>
<a href="#">User</a>
</li>
<li>
<a href="#">Administrators</a>
</li>
<li>
<a href="#">Some Other Group</a>
</li>
</ul>
</div>
<ul class="dropdown-menu scroll-menu scroll-menu-2x">
<!-- Additional menu items omitted for brevity -->
</ul>
</li>
</ul>
</div>
<div class="dropdown-menu" style="margin-left: 2em">
<ul class="dropdown-menu">
<!-- static non-scrollable menu header 2 -->
</ul>
</div>
<div class="dropdown-menu" style="margin-left: 2em">
<ul class="dropdown-menu">
<li class="disabled">
<a href="#"><i class="icon-user"></i> <b>My Roles</b></a>
</li>
<li>
<div class="dropdown-menu scroll-menu scroll-menu-2x"
style="margin-left: 2em">
<ul class="dropdown-menu scroll-menu scroll-menu-2x">
<li>
<a href="#">Core Users</a>
</li>
<li>
<a href="#">Admin</a>
</li>
<li>
<a href="#">Some Other Role</a>
</li>
</ul>
</div>
<ul class="dropdown-menu scroll-menu scroll-menu-2x">
<!-- Additional menu items omitted for brevity -->
</ul>
</li>
</ul>
</div>
<div class="dropdown-menu" style="margin-left: 2em">
<ul class="dropdown-menu">
<!-- static non-scrollable menu footer -->
</ul>
</div>
<ul class="dropdown-menu">
<li class="disabled">
<a href="#"><i class="icon-chevron-up pull-left"></i> <i class="icon-chevron-up pull-right"></i></a>
</li>
</ul>
</li>
</ul>
그리고 CSS:
/* So we wont impact the original bootstrap menu or it's pseudo call-out
arrow the menu is wrapped in a sub dropdown-menu with a chained scroll-menu */
ul.scroll-menu {
position:relative;
display:inherit!important;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
-moz-overflow-scrolling:touch;
-ms-overflow-scrolling:touch;
-o-overflow-scrolling:touch;
overflow-scrolling:touch;
top:0!important;
left:0!important;
width:100%;
height:auto;
max-height:500px;
margin:0;
border-left:none;
border-right:none;
-webkit-border-radius:0!important;
-moz-border-radius:0!important;
-ms-border-radius:0!important;
-o-border-radius:0!important;
border-radius:0!important;
-webkit-box-shadow:none;
-moz-box-shadow:none;
-ms-box-shadow:none;
-o-box-shadow:none;
box-shadow:none
}
부트스트랩 5 (2021년 업데이트)
드롭다운 마크업은 BS 5에 대해 다음과 같이 변경되었습니다.data-속성이 다음으로 변경되었습니다.data-bs-. 그러나 max-height를 설정하면 드롭다운을 스크롤할 수 있습니다...
.dropdown-menu {
max-height: 280px;
overflow-y: auto;
}
https://codeply.com/p/shJzHGE84z
부트스트랩 4 (2018년 업데이트)
드롭다운 마크업이 BS 4에 대해 변경되었습니다. 항목이 자신의 것을 가지고 있기 때문입니다.dropdown-itemclass. 그러나 settingmax-height드롭다운을 스크롤할 수 있도록...
.dropdown-menu {
max-height: 280px;
overflow-y: auto;
}
부트스트랩 3 (원답)
당신의 특별한 스크롤 가능한 메뉴 클래스에 필요한 CSS 속성을 추가하는 것만으로도 이것을 단순화할 수 있다고 생각합니다.
CSS:
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
HTML
<ul class="dropdown-menu scrollable-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Action</a></li>
..
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
</ul>
작동 예: https://codeply.com/p/ox7JC49vmT
드롭다운의 스판 요소 안에 부트스트랩 3에서 사전 스크롤이 가능한 내장 CSS 클래스를 사용할 수 있으며 커스텀 CSS를 구현하지 않고 바로 동작합니다.
<ul class="dropdown-menu pre-scrollable">
<li>item 1 </li>
<li>item 2 </li>
</ul>
CSS의 경우 브라우저 크롬을 보여줄 때 휴대폰 랜드스케이프 320의 경우 최대 높이 180이 더 좋다는 것을 발견했습니다.
.scrollable-menu {
height: auto;
max-height: 180px;
overflow-x: hidden;
}
또한 보이는 스크롤 바를 추가하려면 이 CSS가 다음과 같은 요령을 수행해야 합니다.
.scrollable-menu::-webkit-scrollbar {
-webkit-appearance: none;
width: 4px;
}
.scrollable-menu::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: lightgray;
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.75);
}
변경 사항은 여기에 반영됩니다: https://www.bootply.com/BhkCKFEELL
UL 태그의 인라인에서 모든 작업 수행
<ul class="dropdown-menu scrollable-menu" role="menu" style="height: auto;max-height: 200px; overflow-x: hidden;">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Action</a></li>
..
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
</ul>
난 그냥 프로젝트에서 이 문제를 해결할 뿐입니다.
CSS 코드
.scroll-menu{
min-width: 220px;
max-height: 90vh;
overflow: auto;
}
HTML 코드
<ul class="dropdown-menu scroll-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Action</a></li>
..
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
</ul>
나는 이 코드가 잘 작동하기를 바랍니다, 이것을 시도해 보세요.
css 파일을 추가합니다.
.scrollbar {
height: auto;
max-height: 180px;
overflow-x: hidden;
}
HTML 코드:
<div class="col-sm-2 scrollable-menu" role="menu">
<div>
<ul>
<li><a class="active" href="#home">Tutorials</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
</div>
언급URL : https://stackoverflow.com/questions/19227496/scrollable-menu-with-bootstrap-menu-expanding-its-container-when-it-should-not
'programing' 카테고리의 다른 글
| 마운트가 거부되었습니다.... 경로는 OS X에서 공유되지 않으며 도커에서 알 수 없습니다. (0) | 2023.09.21 |
|---|---|
| C 프로그래밍 및 TDD (0) | 2023.09.21 |
| C 면접시험의 '조건'은 무엇입니까? (0) | 2023.09.21 |
| 디렌트 구조의 구성원 (0) | 2023.09.21 |
| "docker composition"과 "docker composition"의 차이 (0) | 2023.09.21 |