Twitter Bootstrap 메뉴 드롭다운을 클릭하는 대신 마우스 커서로 만드는 방법
Bootstrap 메뉴를 메뉴 제목을 클릭하지 않고 자동으로 마우스 커서를 놓습니다.메뉴 제목 옆에 있는 작은 화살표도 빼고 싶습니다.
메뉴를 자동으로 호버에 놓으려면 기본 CSS를 사용하면 됩니다.한 후 "Menu"를 선택하면 .li태그가 호버링됩니다.트위터 부트스트랩 페이지의 예를 들어보면, 선택기는 다음과 같습니다.
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
그러나 부트스트랩의 응답 기능을 사용하는 경우 축소된 탐색 모음(작은 화면)에서 이 기능을 사용하지 않습니다.이 문제를 방지하려면 위의 코드를 미디어 쿼리로 래핑합니다.
@media (min-width: 979px) {
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
}
화살표(카트)를 숨기려면 Twitter Bootstrap 버전 2 이하를 사용하는지 또는 버전 3을 사용하는지에 따라 다양한 방법으로 수행됩니다.
부트스트랩 3
3을 제거하면 .<b class="caret"></b>.dropdown-toggle앵커 요소:
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown
<b class="caret"></b> <-- remove this line
</a>
부트스트랩 2 이하
버전 2에서 캐럿을 제거하려면 CSS에 대한 통찰력이 조금 더 필요하며, 저는 어떻게 해야 하는지 살펴보는 것을 제안합니다.:after유사 요소는 더 자세히 작동합니다.트위터 부트스트랩 예제의 화살표를 대상으로 지정하고 제거하기 위해 다음 CSS 선택기와 코드를 사용합니다.
a.menu:after, .dropdown-toggle:after {
content: none;
}
제가 드린 답변만 사용하지 말고 이러한 작업이 어떻게 작동하는지 더 자세히 살펴보면 도움이 될 것입니다.
부모 호버에 하위 메뉴가 표시되지 않도록 ">" 하위 조합이 누락되었음을 지적해 준 @CocaAkat에게 감사합니다.
여러 하위 메뉴를 지원하는 최신(v2.0.2) Bootstrap 프레임워크를 기반으로 순수한 호버 드롭다운 메뉴를 만들고 향후 사용자를 위해 게시할 것이라고 생각했습니다.
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu,
.navbar .dropdown-menu {
margin-top: 0;
}
.navbar .sub-menu:before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu:after {
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
left: -6px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a href="#" class="brand">Project name</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="#">2-level Dropdown <i class="icon-arrow-right"></i></a>
<ul class="dropdown-menu sub-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form action="" class="navbar-search pull-left">
<input type="text" placeholder="Search" class="search-query span2">
</form>
<ul class="nav pull-right">
<li><a href="#">Link</a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a class="#" href="#">Menu</a>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
</div>
</div>
<hr>
<ul class="nav nav-pills">
<li class="active"><a href="#">Regular link</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" id="menu1">
<li>
<a href="#">2-level Menu <i class="icon-arrow-right"></i></a>
<ul class="dropdown-menu sub-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#">Menu</a>
</li>
<li class="dropdown">
<a href="#">Menu</a>
</li>
</ul>"머리가 아파요"(대단히 좋았어요)의 답변 외에도:
ul.nav li.dropdown:hover ul.dropdown-menu{
display: block;
}
두 가지 현안이 남아 있습니다.
- 드롭다운 링크를 클릭하면 드롭다운 메뉴가 열립니다.그리고 사용자가 다른 곳을 클릭하거나 뒤로 이동하여 어색한 UI를 만들지 않는 한 열려 있는 상태로 유지됩니다.
- 드롭다운 링크와 드롭다운 메뉴 사이에는 1px 여백이 있습니다.따라서 드롭다운 메뉴와 드롭다운 메뉴 사이를 천천히 이동하면 드롭다운 메뉴가 숨겨집니다.
(1)에 대한 솔루션은 탐색 링크에서 "클래스" 및 "데이터 토글" 요소를 제거하는 것입니다.
<a href="#">
Dropdown
<b class="caret"></b>
</a>
또한 기본 구현에서는 불가능했던 상위 페이지에 대한 링크를 만들 수 있습니다.사용자에게 보낼 페이지로 "#"을 바꿀 수 있습니다.
(2)에 대한 해결책은 .dropdown-menu selector의 마진톱을 제거하는 것입니다.
.navbar .dropdown-menu {
margin-top: 0px;
}
jQuery를 조금 사용했습니다.
// Add hover effect to menus
jQuery('ul.nav li.dropdown').hover(function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});
CSS 스타일을 세 줄의 코드로 간단히 사용자 정의
.dropdown:hover .dropdown-menu {
display: block;
}
여기에는 정말 좋은 해결책들이 많이 있습니다.하지만 저는 다른 대안으로 제 것을 여기에 넣으려고 생각했습니다.이것은 단순한 jQuery 스니펫으로, 부트스트랩이 단순히 클릭하는 대신 드롭다운을 위한 호버를 지원하는 방식으로 실행됩니다.저는 이것을 버전 3에서만 테스트해서 버전 2에서 작동할지 모르겠습니다.편집기에 스니펫으로 저장하고 키만 누르면 됩니다.
<script>
$(function() {
$(".dropdown").hover(
function(){ $(this).addClass('open') },
function(){ $(this).removeClass('open') }
);
});
</script>
기본적으로 드롭다운 클래스에 마우스를 올리면 열린 클래스가 추가됩니다.그러면 효과가 있습니다.드롭다운 클래스가 있는 부모 li 또는 자식/li 중 하나에서 호버링을 중지하면 열린 클래스가 제거됩니다.물론 이것은 많은 솔루션 중 하나일 뿐이며, 이 솔루션에 추가하여 특정 .dropdown 인스턴스에서만 작동할 수 있습니다.또는 상위 또는 하위에 전환을 추가합니다.
있는 가 있는 dropdown다음과 같은 클래스(예:
<ul class="list-unstyled list-inline">
<li class="dropdown">
<a data-toggle="dropdown" href="#"><i class="fa fa-bars"></i> Dropdown 1</a>
<ul class="dropdown-menu">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" href="#"><i class="fa fa-user"></i> Dropdown 2</a>
<ul class="dropdown-menu">
<li><a href="">Item A</a></li>
<li><a href="">Item B</a></li>
<li><a href="">Item C</a></li>
<li><a href="">Item D</a></li>
<li><a href="">Item E</a></li>
</ul>
</li>
</ul>
그런 다음 jQuery 코드의 다음 스니펫을 사용하여 제목을 클릭하지 않고 마우스 커서를 놓으면 드롭다운 메뉴가 자동으로 내려갑니다.
<script>
$('.dropdown').hover(
function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
},
function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
}
);
$('.dropdown-menu').hover(
function() {
$(this).stop(true, true);
},
function() {
$(this).stop(true, true).delay(200).fadeOut();
}
);
</script>
이 답변은 @Michael 답변에 의존했습니다. 드롭다운 메뉴가 제대로 작동하도록 몇 가지 변경하고 추가했습니다.
[업데이트]플러그인은 GitHub에 있으며 저는 몇 가지 개선 작업을 하고 있습니다(예: 데이터 속성으로만 사용(JS 필요 없음).아래에 코드를 남겼는데 깃허브에 있는 것과 다릅니다.
순수하게 CSS 버전이 마음에 들었지만, 보통 더 나은 사용자 경험(즉, 드롭다운 밖으로 1px 나가는 마우스 슬립에 대해 처벌받지 않음 등)이기 때문에 닫기 전에 지연이 발생하는 것은 좋으며, 댓글에서 언급한 바와 같이,당신이 처리해야 할 마진이 1개월 정도 있거나, 원래 버튼에서 드롭다운으로 이동할 때 가끔 내비게이션이 예기치 않게 닫힙니다.
저는 몇 개의 사이트에서 사용한 빠른 작은 플러그인을 만들었고 잘 작동했습니다.각 nav 항목은 독립적으로 처리되므로 고유한 지연 타이머 등이 있습니다.
제이에스
// outside the scope of the jQuery plugin to
// keep track of all dropdowns
var $allDropdowns = $();
// if instantlyCloseOthers is true, then it will instantly
// shut other nav items when a new one is hovered over
$.fn.dropdownHover = function(options) {
// the element we really care about
// is the dropdown-toggle's parent
$allDropdowns = $allDropdowns.add(this.parent());
return this.each(function() {
var $this = $(this).parent(),
defaults = {
delay: 500,
instantlyCloseOthers: true
},
data = {
delay: $(this).data('delay'),
instantlyCloseOthers: $(this).data('close-others')
},
options = $.extend(true, {}, defaults, options, data),
timeout;
$this.hover(function() {
if(options.instantlyCloseOthers === true)
$allDropdowns.removeClass('open');
window.clearTimeout(timeout);
$(this).addClass('open');
}, function() {
timeout = window.setTimeout(function() {
$this.removeClass('open');
}, options.delay);
});
});
};
그delay매개 변수는 꽤 자기 설명적이고, 그리고.instantlyCloseOthers새 드롭다운 위로 마우스를 이동하면 열려 있는 다른 모든 드롭다운이 즉시 닫힙니다.
순수한 CSS는 아니지만, 바라건대 이 늦은 시간에 다른 누군가를 도울 것입니다(즉, 이것은 오래된 스레드입니다).
여러분은 한 과정을 볼 수.#concrete5IRC) 다음과 같은 요지의 다른 단계를 통해 작동하도록 합니다. https://gist.github.com/3876924
플러그인 패턴 접근 방식은 개별 타이머 등을 지원하기에 훨씬 깨끗합니다.
자세한 내용은 블로그 게시물을 참조하십시오.
이것은 저에게 효과가 있었습니다.
.dropdown:hover .dropdown-menu {
display: block;
}
이것은 부트스트랩 3에 내장되어 있습니다.이것을 CSS에 추가하기만 하면 됩니다.
.dropdown:hover .dropdown-menu {
display: block;
}
추가하고 싶은 것은 (나처럼) 여러 드롭다운이 있는 경우 다음과 같이 기록해야 한다는 것입니다.
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
그리고 제대로 작동할 것입니다.
jQuery를 사용하면 더욱 효과적입니다.
jQuery('ul.nav li.dropdown').hover(function() {
jQuery(this).find('.dropdown-menu').stop(true, true).show();
jQuery(this).addClass('open');
}, function() {
jQuery(this).find('.dropdown-menu').stop(true, true).hide();
jQuery(this).removeClass('open');
});
인 기을사수있을 사용할 수 .$().dropdown('toggle')마우스 커서를 놓으면 드롭다운 메뉴가 전환됩니다.
$(".nav .dropdown").hover(function() {
$(this).find(".dropdown-toggle").dropdown("toggle");
});
가장 좋은 방법은 호버로 부트스트랩의 클릭 이벤트를 트리거하는 것입니다.이렇게 하면 터치 장치에 친숙한 상태로 유지됩니다.
$('.dropdown').hover(function(){
$('.dropdown-toggle', this).trigger('click');
});
제 생각에 가장 좋은 방법은 다음과 같습니다.
;(function($, window, undefined) {
// Outside the scope of the jQuery plugin to
// keep track of all dropdowns
var $allDropdowns = $();
// If instantlyCloseOthers is true, then it will instantly
// shut other nav items when a new one is hovered over
$.fn.dropdownHover = function(options) {
// The element we really care about
// is the dropdown-toggle's parent
$allDropdowns = $allDropdowns.add(this.parent());
return this.each(function() {
var $this = $(this),
$parent = $this.parent(),
defaults = {
delay: 500,
instantlyCloseOthers: true
},
data = {
delay: $(this).data('delay'),
instantlyCloseOthers: $(this).data('close-others')
},
settings = $.extend(true, {}, defaults, options, data),
timeout;
$parent.hover(function(event) {
// So a neighbor can't open the dropdown
if(!$parent.hasClass('open') && !$this.is(event.target)) {
return true;
}
if(settings.instantlyCloseOthers === true)
$allDropdowns.removeClass('open');
window.clearTimeout(timeout);
$parent.addClass('open');
}, function() {
timeout = window.setTimeout(function() {
$parent.removeClass('open');
}, settings.delay);
});
// This helps with button groups!
$this.hover(function() {
if(settings.instantlyCloseOthers === true)
$allDropdowns.removeClass('open');
window.clearTimeout(timeout);
$parent.addClass('open');
});
// Handle submenus
$parent.find('.dropdown-submenu').each(function(){
var $this = $(this);
var subTimeout;
$this.hover(function() {
window.clearTimeout(subTimeout);
$this.children('.dropdown-menu').show();
// Always close submenu siblings instantly
$this.siblings().children('.dropdown-menu').hide();
}, function() {
var $submenu = $this.children('.dropdown-menu');
subTimeout = window.setTimeout(function() {
$submenu.hide();
}, settings.delay);
});
});
});
};
$(document).ready(function() {
// apply dropdownHover to all elements with the data-hover="dropdown" attribute
$('[data-hover="dropdown"]').dropdownHover();
});
})(jQuery, this);
샘플 마크업:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false">
Account <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">My Account</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Change Email</a></li>
<li><a tabindex="-1" href="#">Change Password</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Logout</a></li>
</ul>
</li>
그것을 관리했습니다.
$('ul.nav li.dropdown').hover(function(){
$(this).children('ul.dropdown-menu').slideDown();
}, function(){
$(this).children('ul.dropdown-menu').slideUp();
});
이게 누군가에게 도움이 되길...
이것은 아마도 어리석은 생각일 것이다, 그러나 아래를 가리키는 화살표를 제거하기 위해, 당신은 삭제할 수 있습니다.
<b class="caret"></b>
하지만, 이것은 위를 향한 것에는 아무런 도움이 되지 않습니다.
나는 부트스트랩 3 드롭다운 호버 기능을 위한 적절한 플러그인을 게시했는데, 여기서 당신은 심지어 그것을 클릭할 때 어떤 일이 일어나는지 정의할 수 있습니다.dropdown-toggle요소(클릭을 비활성화할 수 있음):
https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover
이미 많은 해결책이 있는데 왜 제가 그것을 만들었습니까?
기존의 모든 솔루션에 문제가 있었습니다.는 한단 CSS 않지습다니를 ..open의 .dropdown따라서 드롭다운이 표시될 때 드롭다운 토글 요소에 대한 피드백이 없습니다.
는 jsons의 ..dropdown-toggle마우스를 누르면 해당 드롭다운이 표시되고 열린 드롭다운을 클릭하면 해당 드롭다운이 숨겨집니다. 마우스를 이동하면 해당 드롭다운이 다시 표시됩니다.일부 js 솔루션은 iOS 호환성을 손상시키고 있으며, 일부 플러그인은 터치 이벤트를 지원하는 최신 데스크톱 브라우저에서 작동하지 않습니다.
그래서 저는 어떠한 해킹 없이 표준 부트스트랩 자바스크립트 API만을 사용하여 이러한 모든 문제를 방지하는 부트스트랩 드롭다운 호버 플러그인을 만들었습니다.아리아 속성도 이 플러그인에서 잘 작동합니다.
이것 또한 그렇게 할 수 있습니다.
$('.dropdown').on('mouseover',function(){
$(this).find('.dropdown-menu').show();
});
$('.dropdown').on('mouseleave',function(){
$(this).find('.dropdown-menu').hide();
});
드롭다운에 호버된 요소 사이에 틈이 있으면 이 GIF에 표시된 대로 드롭다운이 즉시 닫힙니다.
하려면 의 할 수 .100
let dropdownTimer;
$('.dropdown').on('mouseover', () => {
clearTimeout(dropdownTimer)
$(this).find('.dropdown-menu').show();
});
$('.dropdown').on('mouseleave', () =>{
dropdownTimer = setTimeout(() => {
$(this).find('.dropdown-menu').hide();
}, 100)
});
또한 사용자가 드롭다운 메뉴에서 메뉴 목록으로 천천히 이동할 때 메뉴 목록이 사라지지 않도록 .dropdown 메뉴에 대한 부트스트랩 CSS 마진을 재설정하기 위해 마진톱:0을 추가했습니다.
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
.nav .dropdown-menu {
margin-top: 0;
}
이것은 부트스트랩 V4에서 작동합니다.
JS:
<script>
$(function() {
$('.dropdown-hover').hover(
function() { $(this).addClass('show'); $(this).find('[data-toggle="dropdown"]').attr('aria-expanded', true); $(this).find('.dropdown-menu').addClass('show'); },
function() { $(this).removeClass('show'); $(this).find('[data-toggle="dropdown"]').attr('aria-expanded',false); $(this).find('.dropdown-menu').removeClass('show'); }
);
});
</script>
Vanilla Bootstrap 4 드롭다운 HTML(드롭다운 호버 클래스 추가 제외):
<div class="dropdown dropdown-hover">
<button class="btn btn-text dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ABOUT
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
.dropdown-hover 클래스를 사용하여 호버 기능을 선택적으로 활성화하지 않으려면 jquery selector를 .dropdown-hover에서 .dropdown으로 변경하기만 하면 됩니다.
이 코드를 사용하여 마우스 포인터의 하위 메뉴를 엽니다(데스크톱 전용).
$('ul.nav li.dropdown').hover(function () {
if ($(window).width() > 767) {
$(this).find('.dropdown-menu').show();
}
}, function () {
if ($(window).width() > 767) {
$(this).find('.dropdown-menu').hide().css('display','');
}
});
그리고 첫 번째 레벨 메뉴를 클릭할 수 있도록 하려면 모바일에서도 다음을 추가합니다.
$('.dropdown-toggle').click(function() {
if ($(this).next('.dropdown-menu').is(':visible')) {
window.location = $(this).attr('href');
}
});
하위 메뉴(드롭다운 메뉴)는 바탕 화면에 마우스를 놓고 모바일 및 태블릿에서 클릭/터치로 열립니다.하위 메뉴가 열리면 두 번째 클릭으로 링크를 열 수 있습니다.에 if ($(window).width() > 767)하위 메뉴는 모바일에서 전체 화면 너비를 차지합니다.
$('.dropdown').hover(function(e){$(this).addClass('open')})
버전 2를 위한 매우 간단한 솔루션, CSS만.모바일 및 태블릿에 동일한 기능을 제공합니다.
@media (min-width: 980px) {
.dropdown:hover .dropdown-menu {
display: block;
}
}
이렇게 하면 위에 있는 항목이 숨겨집니다.
.navbar .dropdown-menu:before {
display:none;
}
.navbar .dropdown-menu:after {
display:none;
}
이것은 태블릿보다 작은 경우 드롭다운과 관리를 숨겨야 합니다.
@media (max-width: 768px) {
.navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
display: none;
}
}
jQuery 솔루션은 좋지만 호버가 제대로 작동하지 않기 때문에 클릭 이벤트(모바일 또는 태블릿용)를 처리해야 합니다.창문 크기를 좀 조정해 주시겠어요?
Andres Ilich의 답변은 잘 작동하는 것처럼 보이지만 미디어 질의로 마무리되어야 합니다.
@media (min-width: 980px) {
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
margin-top: 0;
}
.navbar .sub-menu:before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu:after {
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
left: -6px;
}
}
다음 코드가 있습니다.
<a class="dropdown-toggle" data-toggle="dropdown">Show menu</a>
<ul class="dropdown-menu" role="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
일반적으로 클릭 이벤트에서 작동하며 호버 이벤트에서 작동합니다.이 방법은 매우 간단합니다. 다음 JavaScript/jQuery 코드를 사용하십시오.
$(document).ready(function () {
$('.dropdown-toggle').mouseover(function() {
$('.dropdown-menu').show();
})
$('.dropdown-toggle').mouseout(function() {
t = setTimeout(function() {
$('.dropdown-menu').hide();
}, 100);
$('.dropdown-menu').on('mouseenter', function() {
$('.dropdown-menu').show();
clearTimeout(t);
}).on('mouseleave', function() {
$('.dropdown-menu').hide();
})
})
})
이것은 매우 잘 작동합니다. 여기 설명이 있습니다. 버튼과 메뉴가 있습니다.버튼을 마우스로 가리키면 메뉴가 표시되고, 버튼에서 마우스를 떼면 100ms 후에 메뉴가 숨겨집니다.내가 그것을 사용하는 이유가 궁금하다면 메뉴 위에 있는 버튼에서 커서를 끌 시간이 필요하기 때문입니다.당신이 메뉴에 있을 때, 시간은 재설정되고 당신은 원하는 만큼 그곳에 머무를 수 있습니다.메뉴를 종료하시면 제한시간 없이 바로 메뉴를 숨겨드립니다.
저는 이 코드를 많은 프로젝트에서 사용해 왔습니다. 사용하는 데 문제가 발생하면 언제든지 질문하십시오.
캐럿의 경우...캐럿을 완전히 차단하는 간단한 CSS를 지정하는 사람을 본 적이 없습니다.
여기 있습니다.
.caret {
display: none !important;
}
여기 JSFidle -> https://jsfiddle.net/PRkonsult/mn31qf0p/1/ 이 있습니다.
맨 아래에 있는 자바스크립트 비트는 실제 마법을 수행하는 것입니다.
HTML
<!--http://getbootstrap.com/components/#navbar-->
<div class="body-wrap">
<div class="container">
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</div>
CSS
/* Bootstrap dropdown hover menu */
body {
font-family: 'PT Sans', sans-serif;
font-size: 13px;
font-weight: 400;
color: #4f5d6e;
position: relative;
background: rgb(26, 49, 95);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(26, 49, 95, 1)), color-stop(10%, rgba(26, 49, 95, 1)), color-stop(24%, rgba(29, 108, 141, 1)), color-stop(37%, rgba(41, 136, 151, 1)), color-stop(77%, rgba(39, 45, 100, 1)), color-stop(90%, rgba(26, 49, 95, 1)), color-stop(100%, rgba(26, 49, 95, 1)));
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1a315f', endColorstr='#1a315f', GradientType=0);
}
.body-wrap {
min-height: 700px;
}
.body-wrap {
position: relative;
z-index: 0;
}
.body-wrap: before,
.body-wrap: after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: -1;
height: 260px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(26, 49, 95, 1)), color-stop(100%, rgba(26, 49, 95, 0)));
background: linear-gradient(to bottom, rgba(26, 49, 95, 1) 0%, rgba(26, 49, 95, 0) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1a315f', endColorstr='#001a315f', GradientType=0);
}
.body-wrap:after {
top: auto;
bottom: 0;
background: linear-gradient(to bottom, rgba(26, 49, 95, 0) 0%, rgba(26, 49, 95, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#001a315f', endColorstr='#1a315f', GradientType=0);
}
nav {
margin-top: 60px;
box-shadow: 5px 4px 5px #000;
}
그리고 자바스크립트 코드의 중요한 비트는 다음과 같습니다.
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
언급URL : https://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click
'bestsource' 카테고리의 다른 글
| 역사 속에 묻혀 있는 깃 커밋을 어떻게 나눌 수 있습니까? (0) | 2023.06.03 |
|---|---|
| 노드를 사용하여 요청에서 요청 http 헤더를 추출하는 방법JS 연결 (0) | 2023.06.03 |
| 변수를 부분 레일 3으로 전달하시겠습니까? (0) | 2023.06.03 |
| 안드로이드 기기에서 로컬 호스트에 액세스하려면 어떻게 해야 합니까? (0) | 2023.06.03 |
| 매개 변수화된 SQL 쿼리를 만들려면 어떻게 해야 합니까?내가 왜 그래야 돼? (0) | 2023.06.03 |