Answered responsive menu like the one IBM is using

Hey Guys,

so i have been searching for a while for a responsive menu that looks like the menu ibm.com is using for their website. (see screenshot). Do you know of any usable implementation (commercial or non commercial)?

Also i would be glad to hear where you look for good components to use.
This project uses foundation and jquery.

So you're looking for a prebuilt menu to plug into your site? It's not something that would be even remotely complex. That's basic CSS and html, with a little jquery thrown in for the open and close functions. I'm whipping up a really quick example that I'll share here in a moment.

*update*

It just occurred to me that you're probably referring to the functionality that is a bit more complex. When I began to look at the way the IBM menu functions, I noticed a few little tweaks that they made that would be a bit more difficult to replicate simply. What exactly do you like about the menu that you want to reproduce? [ed. note: designcouch last edited this post 12 years, 8 months ago.]

I wouldn't treat that as a single menu. It's more like tabs.

Hello,

@designcouch: I agree that the desktop layout and behaviour is not so dificult to replicate. Just the transition to small devices gives me trouble sometimes (i'm not so adept with media queries yet). And i don't decided yet what would be the best way to display this on a phone, thought a accordion style menu would be fitting...

So i can build this by myself, but if there is a similar component out there why not build upon it. Saves time ^^

Whats interesting:

• no layer, the subarea pushes the content down
• the approach can take huge amounts of menu items ordered by columns and groups
• just one click to see every sub topic. So no clicking spree to get to the downmost topic.
• I want to avoid the multiple clicks shown in this video at least in the desktop view. http://jasonweaver.name/lab/flexiblenavigation/
• And also i want to spare the user the dexterity needed to navigate throught multiple sublayers in desktop view with a mouse and hover events

@sottwell: Yes it bears the behaviour of onclick/touch tabbing. I like it. The sub items and its association to each other seams to be more clearly represented this way. Well if you have a huge amount of items.

Great usability ideals. Most of what you're talking about would be simple with a well-thought-out menu structure and a sprinkling of good CSS and jQuery. You've piqued my curiosity so I'm playing around with a few ideas. Will share if anything pans out!

:) sounds great.



Nice self-confident business website you did for yourself. I like the way you think

// the submenu slide looks a bit like this one:
https://github.com/fourroses666/Dynamic-Carousel

Think this one may be a longer term puzzle, as the main issue you run into with mobile screens is the available screen space; this isn't a coding problem, but a UI one. If you want to see where my solution is at, visit here:

http://www.designcouch.com/test-pages/jquery_menu.html

I'm going to keep puzzling away on this in my spare time, so feel free to check back over the next day or two, as I'll be making updates as I go.

Not a bad solution! Mine is definitely more basic, and has not been debugged or tested in browsers as old as IE8. A caveat though: if you're doing RWD, you may want to abandon full support for browsers as old as that or commit yourself to coding a lot of "if <= IE8" exceptions. Your site should degrade gracefully, but a lot of the techniques used in responsive designs are not supported.

I don't think pushing down the content is hard at all. If you take a look at the source of my example, I achieved it in two lines of jQuery. You simply grab the height of the open menu using a variable:

Example


And then apply that value to the content area (it must have relative positioning for this to work):

Example


If you look at the code of my example, it is a semantic unordered list system (as opposed to a tab structure) as well. I'm going to keep working on it, because I enjoy the challenge, but I'm glad you found a solution to your question!
[ed. note: designcouch last edited this post 12 years, 8 months ago.]