PDA

View Full Version : Drop down menu on mobile devices


kinseymark
12-30-2010, 08:53 PM
Hopefully someone can seriously help me out!!!!
I'm developing a website www.propertylinkmidlands.co.uk (http://www.propertylinkmidlands.co.uk) the drop down menu works perfectly in the browsers on my computer however the drop down wont work on mobile phones, i have used a spry menu to create the menu but nothing I try works.

I have scoured the internet and tried various methods but i'm at wits end now and its vital that they have a menu working on mobile phones.

Any advice would be much appreciated.

edbr
12-31-2010, 12:48 AM
i assume you checked javascipt was enable when you tested this?

Corrosive
12-31-2010, 08:29 AM
i assume you checked javascipt was enable when you tested this?

I've just tested it on my Blackberry and that has js enabled and the OP is correct, the dropdowns don't work.

Have you thought about creating a simpler/scaled down mobile version of the website at all?

Ricky55
12-31-2010, 10:07 AM
Doesn't work on my iPad either and it won't, this has been a big problem for flash too as touch screens just don't trigger a hover. The new flash player now has support for touch screens and events to suit them but if you use flash then your menu won't be seen at all on many devices. Namely apples kit.

Corrosive is totally right you should consider a cut down version specifically for mobile devices if you are that concerned about it. The truth is half the web doesn't look that great on many phones for hundreds of reasons. IMO you are far better offering up phone users a cut down version of the site.

This site has a good video tutorial to show you basics.

http://www.gotoandlearn.com/play.php?id=127

kinseymark
01-01-2011, 09:25 AM
Happy new year guys and thanks for the help.

It works on my blackberry when javascript is enabled. If i'm to make a scaled down version of this site, should I charge extra for this as really its another site thats being creating with loads of pages.

Ricky55
01-01-2011, 02:16 PM
Of course you should charge extra. Just put it to your client. If they want a proper mobile offering then they should of course have to pay extra.

It will be at this point when they say something like "well it doesn't matter too much about mobile phone users" or "this may be something we'll look into in the future".

Ask them and see for yourself.

gentleone
01-01-2011, 02:28 PM
If i'm to make a scaled down version of this site, should I charge extra for this as really its another site thats being creating with loads of pages.
You should have asked the client before you started building the site if the site should also be optimized for mobile devices.
Now I think they will expect that their site will work smooth on a mobile device.

Ricky55
01-01-2011, 05:32 PM
Now I think they will expect that their site will work smooth on a mobile device.

I don't think that's necessarily true Gentleone. From my own experience (and I freelance full time in the UK) my clients never even seem to mention mobile devices.

I've had a couple of clients ask why they can't see certain content on their iPhone when its been Flash content on some of my older sites and then we end up having this conversation.

You are right though it's definitely something we all as site builders should start to mention from the beginning. Asking clients if they have a mobile site requirement. To expect a website to even look the same in every desktop browser is regarded these days as antiquated thinking let alone to have a site that works and looks the same across desktop and mobile machines is just plain unrealistic.

gentleone
01-01-2011, 06:34 PM
Yes, it was a bit of a doom scenario I mentioned, Richard.
To expect a website to even look the same in every desktop browser is regarded these days as antiquated thinking let alone to have a site that works and looks the same across desktop and mobile machines is just plain unrealistic.You're spot on with this. I've just finished the E-book 'Hardboiled Web Design' which was all about that. :)

Corrosive
01-02-2011, 08:52 AM
Happy new year guys and thanks for the help.

It works on my blackberry when javascript is enabled. If i'm to make a scaled down version of this site, should I charge extra for this as really its another site thats being creating with loads of pages.

You'll need to discuss this with the client and talk about the functionality people may actually expect on a mobile. I.e. in what situation would a visitor need the site on the go? I'd expect that searching for property whilst out and about would be the extent of it. So maybe concentrate the mobile version as a property search facility and not much else. Just a suggestion though.

Ricky55
01-02-2011, 02:34 PM
You're spot on with this. I've just finished the E-book 'Hardboiled Web Design' which was all about that.

Did you enjoy the book? I waited about a month for mine to arrive, only just started it. I didn't want to get the PDF version though as I like real books that I can hold and smell the fresh print.

Seems like its going to excellent, been looking forward to reading it for a while.

Lovely book actually with a cool poster too.

gentleone
01-02-2011, 02:57 PM
Did you enjoy the book? I waited about a month for mine to arrive, only just started it. I didn't want to get the PDF version though as I like real books that I can hold and smell the fresh print.

Seems like its going to excellent, been looking forward to reading it for a while.

Lovely book actually with a cool poster too.
I really enjoyed the book and I might order a physical copy too... it was that good :)
After reading it I'm feeling more comfortable to make the switch to HTML5 and CSS3. It actually really encouraged me to do so, so I'll take the plunge and start swimming :)

Ricky55
01-02-2011, 04:56 PM
Thanks mate.

Yes dive in, its the only way to push the web forward IMO. I've been using HTML5 on my last few sites. Nothing too fancy just using the new doc type and new tags to better structure my documents. Also done a bit with video. Not got into some of the more complex stuff yet though.

Been using CSS3 for quite a while but like you say books like hard boiled help you become more daring with it.

Cheers

deafboyzaudio
01-04-2011, 06:17 PM
Doesn't work on my iPad either and it won't, this has been a big problem for flash too as touch screens just don't trigger a hover.

This site has a good video tutorial to show you basics.

http://www.gotoandlearn.com/play.php?id=127

Right on Ricky55... i was loggin on to research this and this is what i found on my buddies i pad, hover functions dont work and still dont work with a long hold or even making the top nav bar link as <a href="#"> with a spry menu bar

(tried everything)

the ONLY solution to this issue is to have a nav bar suited for mobile devices with style sheets to match.

hopefully device developers will see this issue and come out with software mod on newer phones that will look at a nav bar menu structure and if there are links hidden below and do a popup on screen when the user clicks the top level with the different options.... (million dollar idea if someone develops that functionality, the logic seems simple... but im not a software developer)

the future is near....

but in the meantime, thanks for the video!

Ricky55
01-05-2011, 09:47 PM
I very much doubt they'll do that I think its far more likely that new technologies will be introduced for us to work around with them.

Still good luck.

kinseymark
01-07-2011, 01:43 PM
Thanks for all the reply guys much appreciated, I live and learn.

My next objective is to learn how to create search functions, due to me doing a home learning course on how to create a website, it didn't go into the complexity of offering search functionality in which clients can update themselves.

Again guys if anyone can help or offer advice it would be much appreciated.

Corrosive
01-07-2011, 02:11 PM
Look at learning a CMS next if you want lots of content and search functionality. Our site is based on ModX CMS; http://modxcms.com/ and the search functionality is really easy to implement and (I think) works pretty well.

ModX is also a nice CMS to get into using.

kinseymark
01-07-2011, 02:44 PM
It looks a lot like joomla, would you say this is better/easier to use?

Corrosive
01-07-2011, 03:00 PM
Not used Joomla so have no frame of reference for a comparison. I have used Drupal which is a lot harder but a lot more powerfull with it.

For customers who want simple functionality and easy updates then ModX is great. It is also very intuitive when you know your way round code in the way you break down a design and add in the functionality.

Give it a whirl, you might like it ;)

edbr
01-07-2011, 11:57 PM
joomla is not an easy system to use, modx is much more straight forward

kinseymark
01-17-2011, 03:38 PM
Hi guys me again, thanks for all your emails and help.

I'm going to look at modx in detail soon, however does anyone have any tips on how to get this drop down working. My client is speaking to other agencies and there telling him that drop downs should work its an issue with coding and basically he doesnt want to create a mobile site due to updating the website twice once for the site on the web and again for mobiles. I'm going to speak to him about scaling the navigation down but is there any other ways I can look at the navigation.

Again the website is www.propertylinkmidlands.co.uk

gentleone
01-17-2011, 04:04 PM
It has nothing to do with updating a website twice for your client. It has to with detecting devices and serve those devices an optimized stylesheet.

Here are useful code snippets for the iPhone and the last one is a little javascript snippet to simulate the hover effect. That's the problem you're facing... hover pseudo classes doesn't work on touchscreens.

http://www.catswhocode.com/blog/10-useful-code-snippets-to-develop-iphone-friendly-websites

kinseymark
01-17-2011, 04:31 PM
Will this still work for a sprymenu like mine, also thats just for iphone what about all the other mobile devices blackberries, htc, etc

gentleone
01-17-2011, 04:54 PM
Developing for mobile devices is not an easy task and is not to explain in a thread. I'm also just dabbling into it, but from what I've learned is using CSS3 media queries now pretty save to cover a wide range of devices with there different screen resolutions.

I think you have to do some study just like I did, because it's not only the hover function that not work on touchscreens... it is also the way you gonna display images for mobile devices for instance.

Here is a read for you and there is alot more to read, but this is a good start.

http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

gentleone
01-17-2011, 05:01 PM
Oh and btw...I had a look at that website and there are alot of pages. Too many for a mobile version, so you'll have to discuss with your client also which pages you gonna serve for mobile devices and which you going to left out. People with mobile devices want quickly there information, because they're on the go, so show only the important stuff.

Ricky55
01-17-2011, 07:13 PM
You also wanna check out jquery mobile it's fantastic and makes creating mobile sites much easier.

But gentle is right you need to cut things down for a mobile version.

kinseymark
01-17-2011, 08:58 PM
There are loads of pages, its too complicated for my liking but the client knows best.

I saw jquery mobile earlier on but in all honesty it scares me, as I dont know the first thing about jquery, javascript, php or any kind of scripting.

gentleone
01-18-2011, 09:25 AM
I think to solve your hover menu problem on mobile devices is to replace the whole Spry menu with a dropdown menu that works on click instead of hover. But! The hover issue is not the only reason to replace the spry menu, the biggest reason is that the spry menu doesn't work if javascript is disabled which is an accessibility problem.

I found a clickable dropdown menu for you which is in size 5 times smaller then that shitty spry menu, but most important it degrades very well when javascript is disabled in the browser. Here's the link... dive into the code and copy the jquery javascript line, scripts.js & the CSS rules from style.css and adjust the CSS to what you have now.

http://playground.deaxon.com/js/dropdown-nav/

kinseymark
01-18-2011, 11:30 AM
After playing with jquery mobile last night, which I quite like I have created a front page trialme2.comule.com (http://www.trialme2.comule.com) but now having some trouble, how do I start linking that to other pages, for example I created a new page which I would like commercial to link to http://www.http://trialme2.comule.com/commercial.html then visitors can click onto the area to view the properties.

1 final question once this issue is sorted. When visitors click onto the desired area, I require the properties to view in a list but how will this work for updates? i.e If the website is updated with new properties will jquery mobile need updating separately or is there a way to sync the app with the site?

kinseymark
01-18-2011, 11:31 AM
Sorry areas page is http://trialme2.comule.com/commercial.html

kinseymark
01-18-2011, 12:46 PM
Thanks Gentleone just tried that dropdown and it works perectly exactly what I was looking for. How would you make this a 3 tier dropdown though?

gentleone
01-18-2011, 01:02 PM
Thanks Gentleone just tried that dropdown and it works perectly exactly what I was looking for. How would you make this a 3 tier dropdown though?
Yes I saw too late that you have a 2level dropdown menu. I'll see if I'm able to customize it for you (and for me too ;) )

gentleone
01-18-2011, 01:21 PM
I see that the code is copyrighted by the author, so I can't touch it.:(

kinseymark
01-18-2011, 01:29 PM
Think I may actually break down and cry!!

kinseymark
01-18-2011, 01:37 PM
As that dropdown works, Im going look through Mr Google, what should I search for?

gentleone
01-18-2011, 01:52 PM
As that dropdown works, Im going look through Mr Google, what should I search for?
I've searched with the query 'clickable drop down menu'

kinseymark
01-18-2011, 02:18 PM
Im struggling to find anything on clickable menus.