Free CSS Dropdown Menu (with iPhone quick tip)

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.

8 thoughts on “Free CSS Dropdown Menu (with iPhone quick tip)”

  1. 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

    1. 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!

Comments are closed.