I like the page type idea. Here's what I recently did which is a little different
It was assumed those buttons or in your case the blue background area was part of any of the top level 1 pages. The top level pages are the ones you hover over or click on to get your mega menu to show up. So on the Page (menu item) page type I added 2 fields:
On both of those fields, I set visibility so they could only be accessed at the top level when adding new pages. You can use this macro in the visibility field:
EditedObject.NodeLevel == 1. In your case you might be able to add 3 or 4 button URL fields and 3 or 4 button text URL fields. I'd make sure you limit it to whatever your design can handle.
The menu is displayed in a Universal Viewer so I then adjusted my transformations to properly display the items as needed. Here's a sample of my transformation:
<a href="<%# GetDocumentUrl() %>" class="dropdown-toggle">
<%# Eval("DocumentName") %>
<h4 class="droptitle"><%# Eval("MenuSummaryText") %></h4>
<cms:SubLevelPlaceHolder runat="server" ID="plcSub" />
<%# IfImage("MenuItemTeaserImage", "<div class=\"col-md-3\">" + GetImage("MenuItemTeaserImage", 0, 0, 0, Eval("DocumentName")) + "</div>", "") %>
<%# If(Eval<bool>("NodeHasChildren"), "</div>", "") %>
This is simply an example as yours might be a bit different but it's another possible solution.