Free CSS Dropdown Menu (with iPhone quick tip)

Posted on by

Recently, I picked up the LWIS.NET CSS Dropdown Menu for a project that I’ve been working on.  In my opinion, this is a great menu system with a few different templates (horizontal & vertical) for easy customization.

The one trick that I picked up when using this template is that you need to add some code to get the drop down effect to work.  Basically, adding onmouseover="" inside the li elements with submenus will allow the hover CSS events to perform as intended.  By default, the iPhone will ignore hover CSS events unless you specify a onmouseover event handler (even if it is blank).  Thanks to commenter twenty205 for the original idea.

  • AZ

    Hey, would you please give a bit more detail — how exactly should the code-tweak look? And is there a way to clear the drop down on the iPhone/iPad? Since the touch-based hand-helds don’t have a hover or mouseover state, most drop downs unfurl with a tap/click, but once they unfurl, stay open until something is clicked. It’d be great to add some kind of tap-to-close functionality. Any suggestions would be appreciated!

    Thank you!
    AZ

    • http://www.justtwonerds.com Tony

      Basically, the dropdown menu that I linked to uses standard HTML list tags to create the menu, so a simple menu might look something like this:

      Main Item

      Sub Item

      Main Item 2

      On the example above, the “Main Item” entry will have a dropdown that shows “Sub Item” when it is hovered on by a desktop web browser. To have an iPhone display the page correctly, you would add a blank “onmouseover” event to the “Main Item” entry to enable the dropdown:

      Main Item

      Sub Item

      Main Item 2

      This “onmouseover” event would need to be added anywhere that you have submenus. To make the dropdown menu disappear on a mobile browser, you can tap on any blank space on the screen. (I am currently testing this code on an Android web browser, but I will try it out on the iPad during the next few days. The project that I am working on is an internal project used mostly by desktop users, so I haven’t done too much tweaking other than this for mobile browsers.)

      Hope this info helps!

  • Anilkotw

    I’m thinking about making a iphone friendly version of a site i’m working on. The problem is that it contains several dropdown menu’s that are triggered on :hover with css, and thats not really supported by the Iphone.
    http://www.hpsongs.com … http://www.webkotwal.com

    • http://www.justtwonerds.com Tony

      The method posted above (adding an empty “onmouseover” event) may work with other menus that use the :hover event in CSS, since it looks like that is the method that the author of this menu system is using. I did find an alternative method here though that may accomplish the same task:

      http://www.usabilitypost.com/2010/05/12/css-hover-controls-on-iphone/

  • Anonymous

    Thank you so much!! I got it to work with your trick