$ ( window ).Note: You can see the Live Preview of the dashboard at the AdminLTE website. dropdown-toggle " ) Ĭonst $dropdownMenu = $ ( ". They don’t do much, just add some stylistic spacing and make the dropdown arrow transition downwards when the dropdown is activated.Ĭonst $dropdownToggle = $ ( ". Next we specify three basic CSS rules for our component. To create our navbar we’ll rely on some example code for the navbar component, kindly provided by Bootstrap: To kick things off we’ll include the required CSS and JavaScript files within our Codepen demo: The required Bootstrap CSS file The required Bootstrap JavaScript files 2. Build a Simple Navbar Neither of these are 100% foolproof, however.Īnyway, let’s get started! 1. Include Bootstrap Assets You may prefer to use the larger breakpoint to avoid the double-tap hover on iPads.īetter still, as you shouldn’t judge a screen’s touch ability by its size, you could use CSS Level 4 Media Queries to detect whether a user can hover, or JavaScript feature detection like Modernizr. Note: So that we can see the dropdowns in action embedded on this page I’ve used Bootstrap’s responsive expanding classes the navigation now expands from its mobile state on the medium breakpoint (768px by default).
Note: This tutorial assumes you have some familiarity with Bootstrap 4. So in this short tutorial we’ll build a typical Bootstrap navbar with a quick solution for showing its dropdowns on hover. The purpose of a click is to actually do something, to take an explicit action.” – Mark Ottoįair point Mark! But there are still some situations where developers might prefer a hover.
This an intentional design decision according to Mark Otto, one of Bootstrap’s founders: “The purpose of a hover state is to indicate something is clickable (underlined text) or to provide some quick information (full URL in a tooltip). Have you ever created a Bootstrap navbar with dropdown menus? If the answer is “yes”, you may have noticed that the Bootstrap dropdowns don’t appear by hovering over the parent link.
0 kommentar(er)
