drop down menu done in CSS3

There was a time when I would have to code a page and have to adjust my coding for the browser a user might be using. As IE kept on either losing users or keeping up with standards as the rest of the browsers, coding became a little easier without having to make so many statements to make a page look the same or as similar as possible. Then came a mighty popular devices which gave path to other great devices that much as its predecessors (as in he who is on top makes the rules) would not make things easier for designers, as now we have to adjust our designs according to their guidelines (https://developer.apple.com/)… Yes, the amazing iPhone,Ipad devices which in my opinion are not as amazing as the droid devices (as You can tell, I am a droid user :D). I am not saying they stand short on capabilities, but as a web developer point of view, I don’t like the extra work I need to do and invest in order to make my designs work, specially the first couple times you try something. It’s just a long exhausting process.

As I mentioned I am not an iPhone, or Ipad user, and since my coding including my latest encounter with drop down menus have always worked on my droid device. I never thought the iPhone/Ipad did not support such behavior, and it started an intense process that made me invest couple extra hours. Your basic JavaScript menu doesn’t work, and the CSS3 menus I’ve used didn’t work either thanks to the unsupported version of the hover option -which again, you can get on droid devices-.

If you come across this problem there are couple things you can do, the easiest is the have the first list item -which will bring up the hidden menu- not be a link and use the onClick=”return true” within the < li > tag.
If your skills in CSS are up to the task, you can also make it work with pure CSS, as some of the work in the Innovar Marketing Portfolio (http://www.innovarmarketing.com)

Leave a Reply