Hi
Im looking to build a Bootstrap menu like https://ucsd.edu/.
So when you hover over the top tier the sub menu dropsdown; the top tier is also clickable to go to the parent page; and on mobiles you click on the down arrow for dropdown menu or the toptier menu items for the parent page.
I cant seem to find a working example. Can anyone point me in th eriht direction?
Thanks
The concept is simply dropdown navigation which can be achieved through css or js. You might also want to check out “mega nav” as a search term as well.
Do a search over on codepen.io for some good examples.
Thanks, but the menu is a bit more nuanced than a standard responsive mega menu. In particular, on mobiles you can click on a parent button to go to the relevant page AND click on the arrow next to the parent title to dropdown the child buttons.
On desktops you can hover over a parent button to dropdown the child buttons and also click on the parent title to go to the relevenat page. (This functionality is easier to achieve).
I cannot find a similar menu that does this.
Have you looked at the code behind it? I can’t see any specific javascript for it but I haven’t looked too hard.
One of the key things I can see is that there are actually 2 menus worth of html: 1 for mobile (standard nav small) and 1 for desktop (large nav).
Yes - I looked at the code an dnoticed it was loading in 2 duplicate navs. Seems like a bit of an overhead for the browser to load in 2 chunks of code! I think the difficult bit is combining both navs into one but with having the different behaviour for desktops and mobiles.
If a single version can’t be modified with CSS alone, then it is true that “more” HTML is being loaded and one or the other will be unused in any given circumstance. But I’m thinking that as long as the two versions are a typical amount of code the cost of downloading the “extra” would be negligible.
In other words, if you can get a single version that works, all the better. But if not, I wouldn’t worry about it too much. My bet is that optimizing loading in other ways (images, consolidating, compressing, etc.) would have more benefit than eliminating a few hundred bytes of HTML.
Be very careful with dropdown menus as they take considerable effort to get right and are the main point of access for a site so they must be sound.
For instance you mention the difference between mobiles and desktop but what you really mean is the difference between touch and hover. The example you pointed to fails on an ipad pro because it assumes it’s a desktop and shows the hover menu which is useless as you can’t access it because you are navigated away when you touch the top menu.
There are also desktops that use hover and touch at the same time so having a click menu and a hover menu active at the same time is another recipe for disaster.
Building the desktop hover menu as you describe is pretty straightforward stuff and just the same as a normal dropdown except that you are adding an href to the hover trigger link.
If I were building the menu I would detect if touch was enabled in JS and add a class to the html element to show touch was present.
// detect touch
if ("ontouchstart" in document.documentElement) {
document.documentElement.className += " touch-device";
}
I would also at the same time remove a class of no-touch from the same html element. Then you can use both those classes to style the menus independently in CSS from one and another. (The only caveat is that on desktops with touch enabled you just get the touch menu.)
If the js detects touch then you can add the click functionality to the arrow dropdowns which will now be visible because the touch-device class would have been added.
Into the mix you can also add your media queries to take account of the screenspace available in the normal way.
That’s the basics and If I wasn’t away on holiday I’d cobble something together 
Because of all the problems associated with hover menus I tend to build click menus for all devices as they are more accessible and easier to use. You can of course enclose the menu in a hamburger for smaller screens but its basically the same.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.