クリックではなく、ロビー時にTwitterのブートストラップメニューのドロップダウンを作成する方法
メニュータイトルをクリックしなくても、ブートストラップメニューを自動的にホバーにドロップするようにしたいです。メニュータイトルの横にある小さな矢印もなくしておきたいです。
私は複数のサブメニューをサポートする最新の（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>メニューを自動的にホバーにドロップさせるには、これは基本的なCSSを使用して実現できます。セレクタを隠しメニューオプションに設定してから、適切なliタグをホバーしたときにセレクタをブロックとして表示するように設定する必要があります。 Twitterのブートストラップページから例を取ると、セレクタは次のようになります。
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
ただし、Bootstrapのレスポンシブ機能を使用している場合は、この機能を縮小されたナビゲーションバー（小さい画面）に表示したくないでしょう。これを回避するには、上記のコードをメディアクエリで囲みます。
@media (min-width: 979px) {
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
}
矢印（キャレット）を非表示にするには、Twitter Bootstrapバージョン2以下またはバージョン3のどちらを使用しているかに応じて、さまざまな方法で行います。
ブートストラップ3
バージョン3でキャレットを削除するには、<b class="caret"></b>アンカー要素からHTMLの.dropdown-toggleを削除するだけです。
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown
<b class="caret"></b> <-- remove this line
</a>
ブートストラップ2以下
バージョン2でキャレットを削除するには、CSSについてもう少し洞察が必要です。:after疑似要素がどのように機能するのかを詳しく検討することをお勧めします。 Twitterのブートストラップの例で、理解を深め、矢印をターゲットにしたり削除したりするには、次のCSSセレクタとコードを使用します。
a.menu:after, .dropdown-toggle:after {
content: none;
}
私があなたに与えた答えを単に使うのではなく、あなたがこれらがどのように働くかについてさらに調べるならば、それはあなたの利益のために働くでしょう。
サブメニューが親のホバーに表示されないようにするために ">"子コンビネータがないことを指摘してくれた@CocaAkatに感謝
"私の頭が痛い"からの答えに加えて（それは素晴らしかった）：
ul.nav li.dropdown:hover ul.dropdown-menu{
display: block;
}
2つの長引く問題があります。
- ドロップダウンリンクをクリックするとドロップダウンメニューが開きます。そして、ユーザーがどこか他の場所をクリックするか、その上にホバーして厄介なUIを作成しない限り、開いたままになります。
- ドロップダウンリンクとドロップダウンメニューの間には1ピクセルの余白があります。ドロップダウンメニューとドロップダウンメニューの間をゆっくり移動すると、ドロップダウンメニューが非表示になります。
（1）の解決策は、ナビゲーションリンクから "class"要素と "data-toggle"要素を削除することです。
<a href="#">
Dropdown
<b class="caret"></b>
</a>
これにより、あなたはあなたの親ページへのリンクを作成することができます - これはデフォルトの実装では不可能でした。あなたは単にあなたがユーザーに送りたいどんなページでも "＃"を置き換えることができます。
（2）の解決策は.dropdown-menuセレクタのマージントップを削除することです
.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();
});
3行のコードでCSSスタイルを簡単にカスタマイズする
.dropdown:hover .dropdown-menu {
display: block;
}
ここには本当に良い解決策がたくさんあります。しかし、私は私が先に進み、もう一つの選択肢としてここに私のものを入れるだろうと思った。クリックするのではなくドロップダウンのホバーをサポートしているのであれば、ブートストラップが行うのと同じように動作するのは、単純なjQueryスニペットです。私はそれがバージョン2で動作するかどうかわからないのでバージョン3でこれをテストしました。あなたのエディタでスニペットとしてそれを保存して、そしてキーのストロークでそれを持ってください。
<script>
$(function() {
$(".dropdown").hover(
function(){ $(this).addClass('open') },
function(){ $(this).removeClass('open') }
);
});
</script>
基本的に、ドロップダウンクラスにカーソルを合わせると、オープンクラスが追加されます。それはそれだけでうまくいきます。ドロップダウンクラスを持つ親のliまたは子のul/liのいずれかにカーソルを合わせるのをやめると、開いているクラスは削除されます。明らかに、これは多くの解決策のうちの1つにすぎず、.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は必要ありません）など）。 GitHubのものと同じではありません。
純粋にCSS版が好きでしたが、閉じる前に遅れるのが嬉しいです、それは通常より良いユーザーエクスペリエンス（すなわちドロップダウンから1ピクセル外に出るマウススリップなどで罰せられない）で、そしてコメントで述べられるように元のボタンからドロップダウンに移動したときなど、対処しなければならないマージンが1pxある場合もあれば、ナビゲーションが突然閉じる場合もあります。
私はいくつかのサイトで使用した簡単で小さなプラグインを作成しました、そしてそれはうまく働きました。各ナビゲーションアイテムは個別に処理されるため、独自の遅延タイマーなどがあります。
_ js _
// 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ではありませんが、うまくいけばこの時間に他の誰かを助けてくれるでしょう（すなわちこれは古いスレッドです）。
必要に応じて、この要旨のさまざまなステップを経て動作するようにするために私が経験したさまざまなプロセス（#concrete5 IRCに関する説明）を見ることができます。 https://Gist.github.com/3876924
プラグインパターンのアプローチは個々のタイマーなどをサポートするためにはるかにきれいです。
ブログ記事 を見てください。
これは私のために働いた：
.dropdown:hover .dropdown-menu {
display: block;
}
これはBootstrap 3に組み込まれています。これをCSSに追加するだけです。
.dropdown:hover .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");
});
あなたが複数のドロップダウンを持っているなら（私がそうであるように）、あなたが書くべきであることをちょうど付け加えたいです、
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
そしてそれは正しく機能します。
それを行う最良の方法は、単にBootstrapのクリックイベントをホバーでトリガーすることです。このように、それはまだタッチデバイスフレンドリーのままであるべきです。
$('.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();
});
これが誰かに役立つことを願っています...
また、ユーザーがドロップダウンメニューからメニューリストにゆっくり移動したときにメニューリストが消えないように、.dropdown-menuのブートストラップのCSSマージンをリセットするためのmargin-top：0を追加しました。
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
.nav .dropdown-menu {
margin-top: 0;
}
これはおそらく愚かな考えですが、下向きの矢印を削除するだけの場合は、
<b class="caret"></b>
しかし、これは上向きの人には何もしません。
Bootstrap 3ドロップダウンホバー機能用の適切なプラグインを公開しました。 dropdown-toggle要素（クリックは無効にできます）：
https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover
すでに多くのソリューションがあるのに、なぜ私はそれを作ったのですか？
既存のすべてのソリューションに問題がありました。単純なCSSのものは.openで.dropdownクラスを使用していないため、ドロップダウンが表示されている場合、ドロップダウントグル要素へのフィードバックはありません。
Jsが.dropdown-toggleのクリックを妨げているため、ドロップダウンはホバー時に表示され、開いたドロップダウンをクリックすると非表示になり、マウスを動かすとドロップダウンが再び表示されます。一部のjsソリューションはiOS互換性を壊しており、一部のプラグインはタッチイベントをサポートしている最新のデスクトップブラウザーで動作していません。
Bootstrap Dropdown Hoverpluginを作成した理由は、標準のBootstrap javascript APIのみで、ハックはありません。 Aria属性でさえ、このプラグインで正常に機能しています。
マウスオーバーでサブメニューを開くには、このコードを使用します（デスクトップのみ）。
$('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')})
これは上のものを隠します
.navbar .dropdown-menu:before {
display:none;
}
.navbar .dropdown-menu:after {
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;
}
}
タブレットより小さい場合は、これによりドロップダウンとその保護者が非表示になります。
@media (max-width: 768px) {
.navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
display: none;
}
}
Sudharshan's answer を向上させるために、私はXSディスプレイ幅上でのホバーを防ぐためにこれをメディアクエリでラップしています...
@media (min-width:768px)
{
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
.nav .dropdown-menu {
margin-top: 0;
}
}
マークアップのキャレットも必要ありません。 li の場合は ドロップダウン クラスだけです。
だから、あなたはこのコードを持っています：
<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();
})
})
})
これは非常にうまく機能し、ここに説明があります。ボタンとメニューがあります。ボタンをホバーするとメニューが表示され、ボタンをマウスアウトすると100 ms後にメニューが非表示になります。なぜ私がそれを使うのか疑問に思うのは、メニュー上のボタンからカーソルをドラッグする時間が必要だからです。あなたがメニューにいるとき、時間はリセットされ、あなたはあなたが望むだけ多くの時間そこにいることができます。メニューを終了すると、タイムアウトすることなく即座にメニューを非表示にします。
私は多くのプロジェクトでこのコードを使用しました、それを使用して何か問題が発生した場合は、私に質問してください。
これは、メニューまたはトグルボタンの上にマウスを移動して停止した後に、メニューが閉じるまでに少し時間がかかる私のテクニックです。ナビゲーションメニューを表示するために通常クリックする<button>は#nav_dropdownです。
$(function() {
var delay_close_it, nav_menu_timeout, open_it;
nav_menu_timeout = void 0;
open_it = function() {
if (nav_menu_timeout) {
clearTimeout(nav_menu_timeout);
nav_menu_timeout = null;
}
return $('.navbar .dropdown').addClass('open');
};
delay_close_it = function() {
var close_it;
close_it = function() {
return $('.navbar .dropdown').removeClass('open');
};
return nav_menu_timeout = setTimeout(close_it, 500);
};
$('body').on('mouseover', '#nav_dropdown, #nav_dropdown *', open_it).on('mouseout', '#nav_dropdown', delay_close_it);
return $('body').on('mouseover', '.navbar .dropdown .dropdown-menu', open_it).on('mouseout', '.navbar .dropdown .dropdown-menu', delay_close_it);
});
このスクリプトでbootstrap.jsを上書きします。
jQuery(document).ready(function ($) {
$('.navbar .dropdown').hover(function() {
$(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
var na = $(this)
na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});
$('.dropdown-submenu').hover(function() {
$(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
var na = $(this)
na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});
});
キャレットのために...キャレットを完全にブロックする単純なCSSを指定している人はいません。
どうぞ：
.caret {
display: none !important;
}
これはWordPressのブートストラップで機能します。
.navbar .nav > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu:before {
content: none;
}
バージョン2、CSSのみのための非常に単純な解決策。携帯電話とタブレットのための同じ友好的な機能性を保ちます。
@media (min-width: 980px) {
.dropdown:hover .dropdown-menu {
display: block;
}
}
これがJSFiddleです - > https://jsfiddle.net/PRkonsult/mn31qf0p/1/ /
一番下のJavaScriptビットは、実際の魔法をするものです。
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;
}
それからJavaScriptコードの重要な部分：
$('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);
});
これはBootstrap 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 Dropdown 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セレクタを.dropdown-hoverから.dropdownに変更するだけです。
モバイルデバイスでデフォルトの機能を必要とする人のためにこれを追加してください。必要に応じてmin-width: ...を設定できます
@media only screen and (min-width: 1195px) {
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
ul.nav li.dropdown> ul.dropdown-menu {
display: none;
}
}
display: noneが問題を引き起こさないようにdropdown-toggleを設定する。そのままにしておくと、2つのドロップダウンが同時に開くことがあります。
ブートストラップv4ソリューション - IEで動作
これにより、トップレベルのナビゲーションリンクをたどることができます。
これは、mouseoverイベントとmouseleaveイベント、および画面幅チェックを使用する完全なソリューションです。
これはデスクトップとモバイルを念頭に置いて構築されました。あなたのニーズに合うようにBREAK_POINT変数を自由に変更してください。
jQuery
var WINDOW_WIDTH;
var BREAK_POINT = 991;
(function ($) {
/** Set window width onload */
WINDOW_WIDTH = $(window).width(); // Returns width of browser viewport
/** Set window width if the browser is resized */
$(window).resize(function () {
WINDOW_WIDTH = $(window).width(); // Returns width of browser viewport
});
/** Dropdown menu on mouseenter */
$(".nav-item.dropdown").on('mouseenter', function () {
console.log("mouseenter");
if (WINDOW_WIDTH >= BREAK_POINT) {
// Open up the dropdown
$(this).addClass('show'); // add the class show to the li parent
$(this).children('.nav-link').removeAttr('data-toggle'); // remove the data-toggle attribute so we can click and follow link
$(this).children('.dropdown-menu').addClass('show'); // add the class show to the dropdown div sibling
}
});
/** Dropdown menu on mouseleave */
$(".nav-item.dropdown").on('mouseleave', function () {
console.log("mouseleave");
if (WINDOW_WIDTH >= BREAK_POINT) {
// Open up the dropdown
$(this).removeClass('show'); // add the class show to the li parent
$(this).children('.nav-link').attr('data-toggle', 'dropdown'); // remove the data-toggle attribute so we can click and follow link
$(this).children('.dropdown-menu').removeClass('show'); // add the class show to the dropdown div sibling
}
});
});
CSS
@media(min-width: 768px) {
.dropdown-menu {
margin-top: 0; // fixes closing on slow mouse transition
}
}
最も標準的な答え：
ドロップダウンをクリックすると、 ブートストラップはクリック後に多くのことを実行します。
例： aria-expanded = "false"はaria-expansion = "true"になります。それであなたはクリックを引き起こす必要があります、そしてそれはラップトップかコンピュータの上にあるべきです。タブレットや携帯電話にはありません。
そして….
$('#your_selector .dropdown').mouseenter(function(event){
if($(window).width() > 1024) {
$('.dropdown-toggle', this).trigger('click');
event.stopPropagation();
}
});
$('#your_selector .dropdown').mouseleave(function(event){
if($(window).width() > 1024) {
$('.dropdown-toggle', this).trigger('click');
event.stopPropagation();
}
});
OR
$('#your_selector .dropdown').mouseenter(function(event){
if($(window).width() > 768) {
$('.dropdown-toggle', this).trigger('click');
event.stopPropagation();
}
});
$('#your_selector .dropdown').mouseleave(function(event){
if($(window).width() > 768) {
$('.dropdown-toggle', this).trigger('click');
event.stopPropagation();
}
});
そして水平ナビゲーションバーにもこれを使います。
ブートストラップ4、2019
私はこれらの答えをたくさん読みましたが、必要なものではなかったので自分でやりました。
Bootstrap 4があり、クリック+ホバーを保持機能を使用します。さらに、追加のクラス「.open-on-hover」を持つドロップダウンでのみ有効にします。
また、ドロップダウンがページのエッジの隣にあるときにドロップダウンを配置するブートストラップのJqueryを保持したいです。したがって、「display：block」だけを実行する必要はありません。 Bootstrapの完全な動作方法が必要です。そこで、クリックをトリガーします。
ロジックは、「mouseenterの場合は開いて、mouseleaveの場合は開いてから非表示にする」です。
/**
* Open Bootstrap 4 dropdown on hover
*/
$(document).on('mouseenter mouseleave', '.dropdown.open-on-hover', function(e)
{
let toggler = $(this).find('[data-toggle="dropdown"]').first();
if(e.type === 'mouseenter') {
$(toggler).trigger('click', 'open');
} else if ($(this).children('.dropdown-menu.show').length) {
$(toggler).trigger('click', 'close');
}
});
Html
<div class="dropdown open-on-hover">
<div class="btn" data-toggle="dropdown">
Hover or click me
</div>
<div class="dropdown-menu">
<a class="dropdown-item">
Item 1
</a>
<a class="dropdown-item">
Item 2
</a>
</div>
</div>
これが役に立つことを願っています。リンクを確認してください https://jsfiddle.net/awb7gfb1/ /
<nav>
<div id="menubar" class=" collapse navbar-collapse row">
<ul id="dropdownNavbar" class="nav navbar-nav">
<li class="dropdown">
<button type="button" class="btn btn-primary dropbtn"><span class="glyphicon glyphicon-time"></span>
Time Card
<span class="caret"></span></button>
<div class="dropdown-content">
<a id="showTimeCard" href="#">My Time Card</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
<a href="#">Sub Menu 4</a>
<a href="#">Sub Menu 5</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn btn-primary dropbtn"><span class="glyphicon glyphicon-stats"></span>
Project
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn btn-primary dropbtn"><span class="glyphicon glyphicon-user"></span>
HR Links
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn btn-primary dropbtn">
<span class="glyphicon glyphicon-screenshot"></span>
Leave Tracker
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
<a href="#">Sub Menu 4</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn btn-primary dropbtn">
<span class="glyphicon glyphicon-briefcase"></span>
Accounts
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
<a href="#">Sub Menu 4</a>
<a href="#">Sub Menu 5</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn btn-primary dropbtn">
<span class="glyphicon glyphicon-headphones"></span>
Service Desk
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
<a href="#">Sub Menu 4</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn btn-primary dropbtn">
<span class="glyphicon glyphicon-file"></span>
Reports
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
<a href="#">Sub Menu 4</a>
<a href="#">Sub Menu 5</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn btn-primary dropbtn">
<span class="glyphicon glyphicon-cog"></span>
Settings
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
</div>
</li>
</ul>
</div>
</nav>
そしてCSS
.dropdown {
float: left;
padding-right: 1px;
}
.dropbtn{
border: 0px;
height: 30px;
border-radius: 0px 10px;
}
li button, .dropbtn {
display: inline-block;
color: white;
text-align: center;
}
li button:hover, .dropdown:hover .dropbtn {
background-color: #12A5F4;
}
.dropbtn.active {
background: #12A5F4;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #e8f3f4;
min-width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
z-index: 10;
}
.navbar-header{
overflow: visible;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 5px 10px;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #d8dee2
}
.dropdown:hover .dropdown-content {
display: block;
}
#menubar{
padding-top: 5px;
overflow: visible;
z-index: 10;
padding-left: 0px;
padding-right: 0px;
margin: 0px;
}
#dropdownNavbar{
margin: 0px;
}
.navbar-toggle{
background-color: #3382d5;
}
.navbar-toggle span{
background-color: white;
}
<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>
<script>
$('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);
});
</script>
インラインで2つのリンクを使用してください。ドロップダウントグルでリンクを非表示にし、表示リンクの上にonmouseoverイベントを追加してドロップダウンメニューをクリックします。
<a class="pretty-button"
href="#" alt="Notifications"
onmouseover="$('#notifications-dropdown').click()">
</a>
<a style="display:none"
id="notifications-dropdown"
class="js-nav js-tooltip js-dynamic-tooltip"
href="#"
alt="Notifications"
data-toggle="dropdown">
<span class="fa fa-flag fa-2x"></span>
</a>
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</body>
</html>" 私の頭が痛い "、 " Cory Price "からの回答に加えて、2つの問題が見つかりました。
問題1： /ドロップダウンリンクをクリックすると、ドロップダウンメニューが開きます。そして、ユーザーがどこか他の場所をクリックするか、その上にホバーして厄介なUIを作成しない限り、開いたままになります。
解決策 ：ナビゲーションリンクから「class」要素と「data-toggle」要素を削除する
solution はほぼ完璧でしたが、ここでの問題は、モバイル機器やタブレットに関してはうまくいかないことです。
私はこれを修正するためにjQueryコードを少し使っています。
if ($(window).width() > 769) {
$('.dropdown-toggle').removeAttr('data-toggle');
$('.dropdown-menu').removeAttr('style');
$('.dropdown').removeClass('open');
}
$(window).resize(function () {
if ($(window).width() > 769) {
$('.dropdown-toggle').removeAttr('data-toggle');
$('.dropdown-menu').removeAttr('style');
$('.dropdown').removeClass('open');
}
else {
$('.dropdown-toggle').attr("data-toggle", "dropdown");
}
});
注 ：ここでは、モバイルデバイスとタブレットの崩壊は768pxからであると想定しています。