Collapsing menu for responsive design

[Linda_A]

Next step in sorting out the responsiveness of my site is the menu.

First of all, I have an issue that the search form ends up outside of the page, see http://www.westeros.org (upper right corner) for an example.

But the main issue is the central menu and the home menu to the left. The home menu always has a second level, the central menu is either a single level or two levels depending on section. In the code pen, I included an example of the menu with two levels.

I am quite uncertain as to the best way to approach collapsing this in some fashion for smaller screens.

http://codepen.io/Linda_A/pen/ozjpgp

[Linda_A]

I revisited the above menu design and decided to simplify it somewhat by making it a single, central menu. I am hoping this might make it easier to achieve a mobile-friendly version while still keeping the two-tiered menu items where that applies.

http://codepen.io/Linda_A/pen/ozjpgp

Obviously, I understand this would be a bit much to ask someone to rework, so any pointers to examples would be much appreciated as well. :)

[Beverleyh]

Are you specifically after a CSS-only multi-level menu? If so I have a few here that may be of interest http://fofwebdesign.co.uk/freebies-for-websites.php?sort=menu

Otherwise, you could try Googling for a “multi-level menu script”? There are a few freebies on Dynamic Drive that may be worth looking at too http://www.dynamicdrive.com/dynamicindex1/indexc.html

[Linda_A]

In part I am trying to get a sense of what kind of approach most people would recommend. A lot of examples that I find when googling are a few years older, and I don’t know enough to say whether they are using any outdated methods.

I think CSS-only would be preferable, so I am going to take a look at yours, thank you. :)

[I.m.learning]

You’re on the approach; you’re looking for responsive design. That means design your site for mobile users first. One of the basic designs is to have menus drop down with a hamburger icon.

All drop downs are the same, you can only code the HTML in so many ways
It’s the CSS that makes the difference.

Many websites use Bootstrap. Look for components and check out the different options. Their code can give you an idea on many options.

One thing I can say is I see you using media queries; are you familiar with them?

[Linda_A]

Its a pre-existing site, so designing entirely mobile first has proven problematic. So instead I’ve ended up in the situation of trying to make the basic responsive design work for as many sizes as possible.

This is my first attempt at a responsive design, so I am only just starting to get a grasp on media queries.

[Author]

Posts