On the mobile phone, there is a dropdown menu on the navbar. But it is far too slow.
Is it JQuery based? Or is it CSS transition based? How do I speed it up?
Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin. Navbars are hidden by default when printing. Force them to be printed by adding .
Answer: Use the jQuery hover() method By default, to open or display the dropdown menu in Bootstrap you have to click on the trigger element. However, if you want to show the dropdown on mouseover instead of click you can do it with little customization using the CSS and jQuery.
The . dropdown class indicates a dropdown menu. To open the dropdown menu, use a button or a link with a class of . dropdown-toggle and the data-toggle="dropdown" attribute.
A standard navigation bar is created with the .navbar class, followed by a responsive collapsing class: .navbar-expand-xl|lg|md|sm (stacks the navbar vertically on extra large, large, medium or small screens). To add links inside the navbar, use a <ul> element with class="navbar-nav" .
It is CSS transition based, try changing the height value from the transition property of this class.
.collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height .35s ease;
-o-transition: height .35s ease;
transition: height .35s ease;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With