SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Menu not opening in small windows

    Hi,
    I tested http://cea4autism.org/ on a iphone and my drop down menu did not open.
    At first I thought this issue was related to mobile browsers. Then I tested on an iPad and it did work. This confused me!
    I just tested on my computer and made the browser window small. The menu did not open.
    It happens when the menu pops up to the top right and gets slightly smaller. This seems to be when the window is about 610 pixels wide.
    Any ideas on how to fix this?

    Also any suggestions on how to handle the menu on really small screens such as phones, it starts to flow to 2 rows when the window gets down to 400 pixels wide

    Thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The submenu has been turned off at small screen sizes in the media query.

    Code:
    #branding #mainnav ul ul {
    	display: none;
    }
    #branding #mainnav ul ul ul {
    	display: none;
    }
    #branding #mainnav ul ul a {
    	display: none;
    }
    The reason is that dropdown menus on small windows are very hard to use - if they work at all. There is no such thing as hover on ipads/iphones although a first touch is sometimes seen as a hover on focusable elements but what happens is the menu comes on but won't switch off and stays in the way unless you navigate away.

    Therefore most responsive sites get rid of large dropdowns at small window sizes. The top level of a menu should always link to a page where the sub menus are available anyway.

    Some sites do use a single button dropdown for mobile but will need to be handled with some scripting.

    More info:

    http://blog.usabilla.com/10-tips-how...-successfully/


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
  •