Goals:
-responsive, fluid design where the main list items shrink and expand as the window size changes
-shrink drop down menus horizontally*
-disable the actual child lists from appearing at “X” small viewport size, leaving the main links only to be clicked
-change to vertically-stacked list items
-remove downward arrows when the menus change
-prevent main list items from wrapping vertically or horizontally
-make the menus able to adjust fluidly to the height and width of the viewport.
*I chopped up the existing graphics into pieces. menu1start , menu1body , menu1end I used display:table-cell; to display the menu background divs horizontally.
Problems I’m encountering:
-the vertical graphics as well as the body of the menu graphics are spilling over and showing the parts that need to be hidden. As you can see, it doesn’t look right.
-the list items are all wrapped and sitting on top of each other
-the menu bg end does not display the vertical spot (probably because I think I have an odd value for background-position)
I haven’t quite figured out a good way to post code here in the new app, but source is available from the link above.
Hi Ryan, and thanks for your suggestion.
I added display:table-cell to the menu1body ul and li elements. That didn’t “unwrap” the list items.
Files updated on the test site. link
You seem to have a couple of patterns in mind for the menus and I’m not clear about how the vertical view is supposed to look. I don’t understand how the graphics are supposed to work, in other words. Could you post some screen shots or drawings (or code) that demonstrate how you wish the menu to look or transform at different widths? Your descriptions are good, but pictures would help a lot (in my case ).
Looks like you used ems almost exclusively for the menu dimensions. That may not work since window width is more significant than font size here. I’d suggest that you regroup and think in terms of percent widths at least for starters.
You’re right, the table/table-cell structure will not allow the menu items to wrap, so that should keep them in one row… but it doesn’t. I think the ems are not working for you, plus you have conflicting code that began as list selectors and has been redefined as table parts without other appropriate changes being made. I doubt that table parts are the best way to go here, but I haven’t thought it through very well, either.
Try deleting the width assignment from #bMenu and see if that’s any better at the bottom.
The upper menu is rather badly framed and needs a fresh start. Back the table stuff out and let’s start again.
You’re very wise to keep the menu code separate from the rest of the layout
You’ve put a lot of planning into this. The drawings will help us catch up to your thoughts a bit faster.
Ryan,
You did say something different. I have now changed #menu1body ul to display:table; and the li’s to table-cell. I’m still seeing the same thing. Re-uploading files now. Sorry if it I haven’t still done right what you prescribed.
Hi, Ronpat! Looks like I need to start changing a lot of these em values to percentages.
Since this requires a clear vision of the potential end result, here are a couple of sample images I made… I’m going to need to re-make the vertical design so it’s wider anyway. Menu at regular width Menu at slimmer width
Hope this gives a clearer image of what needs to happen.
Wow, great post, Ryan! I can see why the float would interfere with the display property. How should I re-gain a nice space bump between the LI’s? Did I just negate those margins?
I don’t know where I should start untangling the mess of the menu graphics. I see that the remaining bits of menubgtest.gif are being displayed through the CSS I wrote. That’s probably a good place to continue. The body portion goes beyond into the portion of the menubgstart side.
I also need to figure out why the vertical portions are being shown.
No, it’s me hastily typing away. menubgbody.gif is the middle piece that may need to be chopped up into a smaller piece. It’s probably simple enough to use CSS to flip the menu background upside down for the bottom menu.
Check out how it looks now. I got the start and body connected nicely. Made the start and end pieces much slimmer to conserve space. Link
The vertical portion still shows despite whatever the height is set to…
The end portion is not shown because the start takes up too much horizontal space…
Also trying to decide the best way to push the menu up to its place on the bar in the graphic.
-Tyler
edit: I’ve got the whole horizontal menu graphic showing now, but the vertical graphics are still there.
All right, let’s try this again. I think I wasn’t clear enough about what the desired behavior is for this menu. Thanks, Ryan, for your help.
I put up some graphics in post 7, but that doesn’t really describe how this would be put together. I have three pieces that are put together in 3 divs: menubgstart, menubgbody, & menubgend
Since the start and end pieces contain the vertical background, too, I was trying to hide the unwanted vertical display using a technique like an image splice. The way the media query is set up right now, the menu would switch to these vertical portions at a viewport width of 520 pixels. When the graphics display the vertical bar in 3 pieces, the display settings will also need to be changed for the menu1body ul and li tags so the menu items are vertical. When the menu shifts vertically, I want to disable the visibility of the drop down menus altogether, leaving only the menu item as a link into the category page.
At this point, I am trying to hide the vertical portions when the menu is being displayed on a desktop or larger device that can view the drop downs (when the menu would be horizontal). I am also trying to determine the right way to bump those main list items up so they sit neatly on the bar in the graphics.
Does this give a clearer picture of the desired effects?
Yes, this is an accurate depiction of the slim menu. Just to add, the child menus would be hidden on main list item hover. I will like to add in my gradient effects to the links and change the font color to how I see fit.