Mdbootstrap Mega Menu

[Baldomero Prado]

Abasic dropdown mega menu inside of a Bootstrap navbar. You can use the same dropdown wrapper to embed your mega menu inside of a Side Navigation bar (also known as Sidebar, Offcanvas, Drawer, or simply Sidenav).

If you need to extend the depth of your menu by adding submenus to some of the items you could consider using a nested dropdown. Keep in mind that Mega Menu is already a complex component, so in order to keep your design clear and concise you probably shouldn't complicate it even further. It may be worth to consider re-organizing your page structure or using a search bar instead.

A standard practice is to use hamburger menu for mobile devices. Regular link Mega menu Lorem ipsum Dolor sit Amet consectetur Cras justo odio Adipisicing elit Explicabo voluptas Perspiciatis quo Cras justo odio Laudantium maiores Provident dolor Iste quaerato Cras justo odio Est iure Praesentium Laboriosam Cras justo odio Saepe Vel alias Sunt doloribus Cum dolores Show code Edit in sandbox HTML Regular link Mega menu Lorem ipsum Dolor sit Amet consectetur Cras justo odio Adipisicing elit Explicabo voluptas Perspiciatis quo Cras justo odio Laudantium maiores Provident dolor Iste quaerato Cras justo odio Est iure Praesentium Laboriosam Cras justo odio Saepe Vel alias Sunt doloribus Cum dolores Bolded headings Check out different typography options to make the heading inside your multimenu stand out.

By leveraging images, videos, product cards, weather cards, testimonial sliders, reviews, and any other element you can make your mega menu even more comprehensive. Standard flexbox utilities and Bootstrap grid should be enough to customize your menu to the highest extent.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, iste aliquid. Sed id nihil magni, sint vero provident esse numquam perferendis ducimus dicta adipisci iusto nam temporibus modi animi laboriosam?

Hi all

Im using Bootstrap (v3) and -dropdown-hover/ to create a mega menu. Its all working great, however, Id like there to be a slight pause between mouseover and it displaying. Is this possible?

Thanks

Thanks @PaulOB , but I cant see how to make this work with the code from -dropdown-hover/ . Ive tried the css animation-delay (which didnt do anything, surprisingly) and I cant see where to add the js delay function.

Hi @PaulOB

Ive uploaded a slimmed down version here: -menu-dev/

Youll see that when you move your cursor over the nav bar the menu immediately opens. Whereas I want it to open/fade in after a few milliseconds so it doesnt open if the user accidentally moves their mouse over the nav bar.

Thanks

Hi!

It seems I need to implement a cleverer solution (ie the hoverintent plugin you suggested). But I cant get the plugin to work with my code. It needs to fire the function that makes the menu appear. It is this that Im having issues with

An unofficial Bootstrap plugin to enable Bootstrap dropdowns to activate on hover and provide a nice user experience. - GitHub - mdbootstrap/bootstrap-hover-dropdown: An unofficial Bootstrap plugin...

Your css was/is really helpful, but its just delaying the animation (obviously). Initially this looked to work great, but after observing other users, they would be confused why the drop down was being activated a second after they had moved their cursor over the menu.

I believe the effect is much the same with the hoverIntent plugin although reduced in that it does try to work out if the mouse went directly to the element or passed over it. It still slightly suffered from feeling like it was a slight lag as it needs to check if the mouse has stopped or is slowing down over the element.

I am trying to update my web design skills after not having worked on a website since table based layouts were common. After reading a few books and online resources, I have become fairly comfortable with media queries and using CSS Grid and/or Flexbox to create a reponsive layout. The next thing I'd like to try doing is to create a collapsible "hamburger" menu that will display as buttons in a horizontal row at larger viewport widths, and that will collapse to a hamburger icon at narrower widths.

In searching the web for tutorials on how to do this, I have come across some tuturials that use javascript and some that claim to just use .css. I have no experience with javascript, but I have quite a bit of experience with some other programming languages (mainly C++ and visual basic). I think I'll be able to learn javascript (at least the basics) relatively quickly if I set my mind to it.

I'm just wondering if anyone here can make a recommendation - should I assume that basic comfortability with javascript a prerequisite for accomplishing what I want? Or do you think I can dive right into hamburger menu tutorials in the hope that I can accomplish what I want with just .css?

Knowing javascript will definitely help, but it isn't necessary for a standard collapsible menu.

CSS is fairly powerful and can easily be used to make an entire menu system with some pretty advanced effects.

Adding to @Jon Fritz 's reply, if the same function can be created using CSS, then this should take preference over using JS. The reason for this is the way that these languages are processed by browser. In the following diagram you can see

I would go with some simple javascript because it offers more flexibility. Css for dynamic workflow is getting better but its still way short of what javascript brings to the party. If you do go with pure css don't go down the 'hover over' route as that doesnt work on mobile devices, you need to use a 'click' method but that's a bit more complicated in css and not something I'm familar with.

At the risk of crucifixion from those who don't get it, I'll just say I use Bootstrap which is Flexbox-based. I can't ignore the time & money saved from using a responsive framework that frees me up to focus on more important things.

I can't ignore the bloat associated with such frameworks and plugins, that frees me up to get on with the job without having to trawl through a lot of mostly redundant junk, time saved plus l get to use advanced features like grid, which Bootstrap doesnt have currently or at least not the official version of it.

19.9999 million are probably amateurs and they wouldnt use it if it wasn't open source. Would be interesting to see what would happen to Bootstrap if it ever became a paid for solution.......... l suspect its popularity would drop off a cliff.

and they wouldnt use it if it wasn't open source. Would be interesting to see what would happen to Bootstrap if it ever became a paid for solution.......... l suspect its popularity would drop off a cliff.

If the world came to an end (climate change), then nobody would be bothered about the web. Yes, a rediculous arguement, but no different to what you are implying. Bootstrap is open source, period.

Nope it stands to reason, anything which is free or cheap will attract a large amount of interest from those who l would consider amateurs so it wildly distorts the figures. Many people drink cheap wine because its all they can afford, making it seem popular, which of course it is but I doubt a wine expert would agree in most cases its the best wine.

I could make the argument that php is the most popular server side language by far outstripping anything else available but when you factor in WordPress, joomla etc because they are popular with amatuers it somewhat distorts the figures, anyone who can't see that is blind or just doesnt want to accept the reality of the situation.

It's no coincidence that most Themes for WordPress, Joomla!, Drupal and other CMS sites are built with Bootstrap. Even online site builders like Shopify & Webflow embrace it. So it's not going away anytime soon.

Their are those who aspire to be the best at their chosen career and those that just want to get by. Ive always wanted to get ahead and without learning to code youre always going to be dependent on whichever editor, framework, library, plugin etc workflow you chose to use and the limited options which come as default.

Being able to write ones own code makes one more valuable when it comes to job choices. However l do accept in this forum there are very few who are considering web development as a career so for them whatever route they choose is irrelevant to me.

Navigation is allways based on the content. You can not have a fancy desktop responsive switching to closed nav with burger menu with fancy overlay if you have lots of links with multiple possible levels. Multiple possible levels may not be right either and you may need a mega menu style approach and the corrisponding mobile nav with that as well.

Most of it will be driven by your CSS and media queries and then events handled by Javascript. To people saying about not needing JS at all are not really thinking right. Mobile with touch events you need to consider and why a lot of moden navigation do not just run on a hover event.

In terms of comments in regard to frameworks like Boostrap which Nancy rightly (in my view) pointed out as an option to do this being bloated clearly not reviewed what is out there.

3a8082e126