CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
dennis schütz
dennis schütz

Reputation: 383

Trigger bootstraps collapse function on mouseover event

I am using bootstrap for a navigation and want to open the collapsed menu not just on a button click but already when hovering the button. I can't even find the javascript code for the already programmed clicked events.

That's the button to open the navigation:

<button class="navbar-toggle collapsed" data-target="#main-nav" data-toggle="collapse" aria-expanded="false">

That's the navigation to be opened:

<nav class="navbar navbar-fixed-top">
<div id="main-nav" class="navbar-collapse collapse" aria-expanded="false" style="height: 2px;">
<div class="container">

My problem:

I don't know how to deal with bootstrap ( couldn't find in the documentation ) to use hover on the button to open the navbar.

Code when the navigation is not collapsed:

<button class="navbar-toggle" data-target="#main-nav" data-toggle="collapse" aria-expanded="true">

<nav class="navbar navbar-fixed-top in">
<div id="main-nav" class="navbar-collapse collapse in" aria-expanded="true" style="">
<div class="container">
<ul class="nav navbar-nav">
<li class="col-xs-12 col-sm-2 with-sub">
<li class="col-xs-12 col-sm-2 with-sub">

Upvotes: 0

Views: 1336

Answers (1)

Tommy
Tommy

Reputation: 850

Possible and quick made up solution would be jQuery on combined with jQuery trigger function.

$('button.navbar-toggle.collapsed').on('mouseenter', function(){
  $(this).trigger('click');
})

Upvotes: 1

Related Questions