1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Question(s) About Responsive Design

Discussion in 'HTML & Website Design' started by VanceVP, Jan 14, 2017.

  1. #1
    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 . . .
    SEMrush
     
    VanceVP, Jan 14, 2017 IP
    SEMrush
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,108
    Likes Received:
    1,195
    Best Answers:
    22
    Trophy Points:
    400
    #2
    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.




     
    qwikad.com, Jan 15, 2017 IP
  3. VanceVP

    VanceVP Member

    Messages:
    113
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    33
    #3
    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 . . .
     
    VanceVP, Jan 15, 2017 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,111
    Likes Received:
    1,692
    Best Answers:
    239
    Trophy Points:
    515
    #4
    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.
     
    deathshadow, Jan 17, 2017 IP
  5. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,108
    Likes Received:
    1,195
    Best Answers:
    22
    Trophy Points:
    400
    #5
    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.


     
    qwikad.com, Jan 17, 2017 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,111
    Likes Received:
    1,692
    Best Answers:
    239
    Trophy Points:
    515
    #6
    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.
     
    deathshadow, Jan 17, 2017 IP
  7. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,108
    Likes Received:
    1,195
    Best Answers:
    22
    Trophy Points:
    400
    #7
    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.


     
    qwikad.com, Jan 17, 2017 IP
  8. VanceVP

    VanceVP Member

    Messages:
    113
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    33
    #8
    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.
     
    VanceVP, Jan 17, 2017 IP