BYOB meanMenu Responsive Menu Box for Thesis 2.1

Responsive menus can be a pain in the butt! Especially menus with multiple levels of drop down submenus. Add to that the natural desire to have control over the menu’s appearance and you have a potential disaster on your hands. Well now that problem is solved, once and for all! The BYOB meanMenu Responsive Menu Box for Thesis 2.1 takes all of the hassle out of multi-level drop down menus. You can have unlimited levels and it drops down nicely into a single bar for mobile devices.

Plus it gives you complete control over every aspect of the appearance of the menu. You can control every element of the font used and the main menu and submenus can be styled independently! Set the background colors for the various states of the a menu link, plus them them all different again for the submenus and the mobile version of the menu. This thing will even jump to the very top of the mobile browser window if you want it to and it works perfectly with all types of touch devices.

BYOB meanMenu Responsive Menu Box for Thesis 2.1 from Rick Anderson on Vimeo.

With this box you can:

  • Create any number of menus and style them independently of each other
  • Set the background colors for the main menu, submenu and mobile menu independently
  • Set the font characteristics for the main menu and submenu independently
  • Adjust the padding and dimensions of your individual menu items
  • Determine where the menu should show up on mobile devices
  • Drag and drop menus anywhere in your template

Premium members of the site can download the Thesis 2.1 box from the link below.  The current version is 2.1.0.2

BYOB meanMenu Responsive Menu Box for Thesis 2.1

To download this box you must be a Premium Member.

Why not join today? Click on the "Join Us!" button in the upper right corner and have full access to this and all the rest of our premium content.

Installation Instructions:

Remember that this is a box, not a plugin, skin or package so it is installed and activated from the Thesis 2 Select Boxes menu.

  • Download the box from the link above. – Do not unzip the file.
  • Go to the Thesis >> Boxes >> Select Boxes menu
  • Use the upload box button to select and upload the box from your computer.
  • Once installed, place a check beside the box description and hit “Save Boxes”
  • Go to the Thesis 2 Skin Editor, you will find a BYOB meanMenu Responsive Menu item in the Add Boxes menu.
  • Place the box in a template
  • Edit you styles using the box options
  • Save your CSS – this is an important step
  • You are finished!  Now you have a full responsive menu that looks great in all devices

Video Transcript

This is an introduction to the BYOB meanMenu Responsive Menu Box for Thesis 2.1. The meanMenu responsive menu is a menu bar style menu that allows for multiple levels of drop downs while still collapsing nicely into a touch enabled menu that will work on mobile devices.

Install the Box

Let’s start off simply by installing the box. Click on this to download it and we’re going to come over here to this site and we’re going to install it here. So go over to Boxes, Manage Boxes, upload the box, choose the file and then grab the file.

The correct name of the file is byob-meanmenu-responsive-menu. It should not have things like these numbers after it. If it does it will fail. So choose the one you downloaded that does not have a number after it. Add the box and say okay. Put a checkmark beside the box and save it.

Example Use: Display the Main Menu

Now that we have that done, let’s come over to our Skin Editor and you’ll see that we have added this BYOB meanMenu Responsive Menu. I’m going to call Top Responsive Menu. It’s asking which menu to display, I’m going to display the main menu in it.

Add Menu to a Template

Note that it’s got a bunch of menu style options and it tells you that you have to save your CSS after saving these options in order for them to show. We’re just going to say okay to this and open up our Top Menu Area. Drag the Top Menu Area out and take this Top Responsive Menu and put it back in. Then we’ll save the template.

Save the CSS

Now if we come over and take a look at it, without saving the CSS, actually we have to go to the blog page when we do that. Here’s what it’s going to look like. As I said it’s not going to work until you save the CSS.

So if we come back over to CSS, save the CSS and refresh our page now we have this menu that’s sitting here. You can see that the colors are somewhat different than the colors of the skin and that’s something that we can set up easily inside of our HTML options here with the menu.

Change Menu Colors to Match the Skin

I’m going to open up my design options so I can get these colors. This is the main background color. Let’s come over here to the menu and select the menus that we’re going to choose. Actually, we’re not going to change those fonts at all. You can style these things independently but at the moment we’re going to leave the fonts alone.

Come down to main menu colors and the link background color is going to be that color, the link text color is this color here, the hover text color is white, the hover background color is this color here, the current background color is the same and the link background color was the same.

So we have our colors set up. Now let’s come into our main menu font and say that is bold and then let’s go to the submenu, font and let’s make it a little smaller 14 pixels and italic. So now we can say okay to that and come back over to our CSS. Save our CSS.

Responsiveness of the Menu in a Smart Phone

Come back over to this page and refresh it and now we have the menu the way we want it to look. So if we come and visit the site on our cellphone, say in an iPhone, what happens is the menu comes up here to the top, up at the top up here.

You can open and close it by clicking on this link right here and then you can open subcategories by clicking on this plus sign and then you can close them back up by clicking on it again. Then you can go to the specific page if you want simply by doing that.

This page doesn’t have that menu on it. Note how the menu jumps from being down here up to the top. You do have control over where the menu sits in this process.

Add an ID to the Menu for Location

For example, let’s come back over here to our Skin Editor and open up the Top Menu Area where it is. This Top Menu Area is given the id of top_menu_area and so we can open this up and set the selector for its location in a mobile browser.

Right now, by default, it’s in body which takes it up to the top but we can also simply add the id #top_menu_area and that will make it stay in that location. So we say okay to it now and save the template. Come back over to our phone and refresh this page.

Now you can see the menu isn’t up at the top and the menu is back down where you would have expected it to be before and if we click on it you can see it works just fine.

Works on a Touch Device

Something that sets this aside is that you can open up menu items with your finger without actually traveling to the menu item itself. So you can have a regular menu item, say categories, that has other menu items under it and when you click on the expand or contract button it doesn’t go away but then it totally understands the fact that you are looking at it.

You may click the top level menu item for dropdown and you may just click it to go to the place you want it to go which is one of the nice things about this, the ability of this menu to work on a touch device.

What You Can Style in the Menu

There are a number of other things that you can set with this. We’ve set some menu styles already but you can actually change up main menu item dimensions and submenu item dimensions and you can change submenu colors.

You can also change the menu bar colors. For example, if you don’t want it to be that black, you could change the menu bar color. If you want that symbol not to be white you could change those colors. Let’s do that and save the template. Save the CSS and then refresh the page on our phone, now it’s got that blue and the yellow instead of the black and the white.

You can use colors that are consistent with your menu. Obviously I just want to demonstrate the ability of that to do it that way. And that is the BYOB meanMenu Responsive Menu Box for Thesis 2.1, I hope you find it useful.