Assalamu'alaikum wr wb
Kali ini saya akan share bagaimana Cara buat dropdown terbuka saat di hover pada bootstrap.
Berikut ini syntaxnya.
-------------------------------------
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function() {
if ($(window).width() > 767) {
$(".dropdown-toggle").click(function() {
return false;
});
var hoverTimeout;
$(".dropdown-toggle").hover(function() {
var element = $(this).parent(".dropdown");
hoverTimeout = setTimeout(function(){
element.addClass("open");
}, 250);
},function() {
clearTimeout(hoverTimeout);
var element = $(this).parent(".dropdown");
hoverTimeout = setTimeout(function() {
element.removeClass("open");
}, 250);
$(".dropdown-menu").hover(function(){
clearTimeout(hoverTimeout);
},function(){
setTimeout(function() {
element.removeClass("open");
}, 250);
});
});
}
});
</script>
-------------------------------------
Semoga bermanfaat.
http://pangeran-it.blogspot.co.id/
Cara buat dropdown terbuka saat di hover pada bootstrap
Reviewed by Syawaluddin Amin, S.Kom
on
Oktober 18, 2016
Rating:

Tidak ada komentar: