- This topic is empty.
September 10, 2016 at 12:07 pm #245436
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.September 12, 2016 at 9:10 am #245468
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.
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. :)September 12, 2016 at 10:03 am #245474BeverleyhParticipant
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.htmlSeptember 12, 2016 at 10:08 am #245475
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. :)September 12, 2016 at 12:42 pm #245478I.m.learningParticipant
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?September 12, 2016 at 1:07 pm #245479
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.
- The forum ‘CSS’ is closed to new topics and replies.