Drop Down Menu on Homepage

Hello everyone,

Whew! It’s been a while. Looks like things around here are a-changin’. Pretty cool!

So, I’m back to working on the home page menu on the drop-down menus. Check out my progress…

Current link to home page

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.

Thanks,

Tyler

  1. The #menulbody ul{} can be display:table and then give the LIs display:table-cell.

Let’s start there. My screens not really set up to play with images ATM. I’ll leave this for morning or until someone else chimes in.

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

Hi, Ty. New avatar, almost didn’t recognize you :slight_smile:

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.

Cheers

I didn’t say add display:table-cell to both. Please re-read my post. My original post worked for me (I can screenshot it working.)

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.

-Ty

Apologies, I also forgot to tell you to remove the float:left on the LIs. That negates the display:table-cell.

1 Like

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?

You can add a right (or left) padding to your table cells (the LIs).

Essentially, yes those margins are now useless on the LI.

That worked.

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.

files updated
fresh link

I searched through both yoru CSS files and the HTML and I don’t see the menubgtest in there? Am I blind?

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.

Do I need to add a container div to the start and end pieces to hide the vertical portions?

Thread closed. No one will write back.
Later, Sitepoint.

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?

Link

I’ll probably make a silly mess, but if you will promise to keep a sense of humor, I’ll give it a try in small steps. No promises of success, though.

:construction: Might as well throw up the construction signs. :construction: (I figured out how to do the smilies)

3 Likes

Based on your drawing, please take a look at this screen shot and let me know if this is the “look” that you wish for the slim menu. Yes, it is fluid.

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.