Question(s) About Responsive Design

I have been a pest here trying to learn about responsive design. It took a while (a long while) for it to sink in - for the most part. Now I have some general type questions about navigation and menus.

First question is, regardless of whether a specific site design calls for a horizontal or vertical menu, once I start working on the @media portion, is it standard practice to construct the media queries so that the menu list displays as block (vertical)?

If it is standard practice with the media queries to display any menu list as block, does this also apply to the use of drop down menus when a drop down is utilized on a desktop?

Finally (for this round) is there a standard for which type - vertical or horizontal - of menu is typically used for site design?

Thanks for the input . . .

 

A basic responsive (css only menu):

https://jsfiddle.net/p2zzqqd3/

Another option would be using a checkbox. Just google "responsive navigation checkbox" or something similar.

 

Thanks qwikad.com.

I kinda (I hope) got it more or less figured out. I took a look at what you suggested for a basic menu and I like the idea of being able to make a responsive menu without the checkbox (still don't have a real firm grasp on using the checkbox) and I am still struggling a bit when trying to go from a basic menu as you have shared to making it a drop down.

Maybe I am just overthinking the process. I tend to do that on rare occassion (rare? yeah right) LOL

Thanks again for your suggestion . . .

 

To me the question of making the menu items display as a single column or not depends on how many there are, what content they contain, etc, etc... USUALLY I try to keep the number of menu items low enough I don't need to pull that show/hide hamburger crap, and instead switching the menu items to inline-block with larger padding to make them finger sized targets.

IT really comes down to how much is in the menu -- there is no quick and easy answer as every site has different menus and different content in those menus -- and again to my way of thinking content dictates markup, and content + markup dictates layout -- NOT the other way around.

Oh and @qwikad.com, you know that menu is useless on mobile -- the entire REASON for responsive design -- since mobile has no hover states, right? You cannot use that on touch devices -- pretty much defeats the entire reason for doing it! :active might be the better choice, but is still unreliable. There's a reason checkboxes or :target are the preferred CSS only approach.

 

Not quite, it works fine... :hover will open the menu on tap in mobile devices, but it won't close it though.

Personally, I use checkboxes if need be.

 

What devices?!? 'cause it sure as shine-ola doesn't do that here! I just tested three devices, varying flavors of Android.

Nada, Zip, Zilch, Nein, Nothing...

Though if it DOES work on some devices, I wonder if the ones it does lines up with the ones where :focus and :active does not. It would be REALLY nice to be able to do "a:active + ul, a:focus + ul, a:hover + ul" to handle it instead of adding the checkbox.

In THEORY the one we should be using is :active. :target would be a nice way of handling it too if it didn't fill up the history every time you open/close.

 

That's strange. On my LG cell phone if I open that link (https://jsfiddle.net/p2zzqqd3/) the menu opens just fine. But, yeah, the OP should probably change it to :active. :target if he cares to use it.

 

Thank you Jason. Since this is the first time I have gotten this far with putting a site together, I was just curious. Unfortunately, this site has the usual kind of stuff for a simple ecommerce type . . . shipping, returns, contact, etc . . . along with a categories for the likes of electronics, toys, automotive, etc so I felt that a drop down for the categories was appropriate.

I have been trying to refine my code and make it responsive with as little garbage as possible. I have no real clue as to what level of success I achieved, but it works.

Now I am going to work on getting the media stuff to work and hopefully I will have some level of success getting it to work across different sizes (it that's the right description) . With that in mind, I thank both of you for your advice and suggestions.