SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2011
    Location
    Northern Ireland
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Responsive web design and navigation menus

    Hi. I'm just wondering if anyone knows of any good articles or tutorials based around the navigation menu in a responsive web design... RWD is something I have been trying to incorporate into all of my recent projects... However horizontal dropdown menus etc seem to pose a problem when considering how they should adapt - percentage widths on the li's only works to a certain breakpoint

    Sent from my HTC One using Tapatalk 4 Beta

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Zany90 View Post
    horizontal dropdown menus etc seem to pose a problem
    Indeed, they are a beast to deal with. The good thing about the mobile design issue is that it's forcing us to reconsider web design practices in general—such as whether drop down menus are even worth having on desktop sites. (IMHO they are terrible things.)

    There are some interesting techniques emerging, such as having the menu turn into a single button on a small screen. But that's for simpler menus without drop downs. Other options include restyling the menu entirely on smaller screens so that the top level items are each full width and either lead to their own section where the sub links are then available, or the top level items can be clicked to reveal sub items (as hover basically doesn't work on mobiles).

    The first thing to do is work out what you want to do with the menu, and then find a tutorial on how to do it.

  3. #3
    SitePoint Addict Drinky's Avatar
    Join Date
    Jan 2001
    Location
    England
    Posts
    338
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    The first thing to do is work out what you want to do with the menu, and then find a tutorial on how to do it.
    Indeed if you design the menu first you'll waste a lot of time trying to fill it with things (design the content before the box). When you do figure out what items should exist on the menu there are plenty of pattern libraries out there now with examples of different navigation designs. Here are three to get you started:

    http://bradfrostweb.com/blog/web/res...-nav-patterns/
    http://bradfrostweb.com/blog/web/com...onsive-design/
    http://www.lukew.com/ff/entry.asp?1514
    Drinky

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Location
    London
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello Zany90,

    I am in the same boat as you. I have deisgned a new RDW with Dreamweaver CC, but I need two menus. One for the main menu and another for the languages. The options seem to be very limited and having given it much thought I will use the mobile phone menu style for all screen sizes, but which mobile phone menu works best is now my next dilema?

    Morrile

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    which mobile phone menu works best is now my next dilema?
    One criterion I use is how well it works with JS off. Most people have it on, but all the same, the fact that it works well with JS off tends to be a sign that it's better constructed.

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Location
    London
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    One criterion I use is how well it works with JS off. Most people have it on, but all the same, the fact that it works well with JS off tends to be a sign that it's better constructed.
    Very much so, and I believe I have found one. I am in the process of cutting and pasting the code into my website. Whilst it looks okay on screens, tablets and mobiles, I still have to check that the menu will work on a mobile. The menu was designed by Pure CSS menu (not wanting to advertise but credit must be given as I don't have the skills yet to design my own)

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Location
    London
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The purecssmenu menu is full of bad coding, as it was amazing that validation asked for a third to be removed without impairing on it's function. The good point is that it works on all devices including mobiles


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •