That’s a bit unclear.
The menu button with lines is the best practice and most common UI component for handheld devices. Users know that this button means the main navigation of course. And that is of course the Twitter Bootstrap approach (and hundreds of other mobile sites).
What other example website did you have in mind that displays menu on mobile devices in some other manner than the default button?
Look at my site – http://www.rallyaround.co.uk/ – as you shrink down the site – you see two lines with part of the menu showing – i wanted it so that when it gets to the point of having the menu over two lines that’s when to have it changed to the menu button on the right. Hopefully that’s clearer.
[Moderator Note: Please ensure that you are embedding links correctly in your posts.]
Oh. I see, I misunderstood your original question.
So I can give you some general idea, but you would need to experiment and research it further or get help from members who know more than I.
Basically, you want to query the media screen size. The excellent code snippet and explanation on this topic has been contributed by Dave. The media pixel width (which you will need to figure out yourself, by the way) would be your trigger point for the menu button transition.
However, I must admit, I do not know the exact CSS and/or PHP that would command the switch for the button menu. Perhaps somebody else might help you out further…
It’s a good question, and a cool site, btw.
Thank you very much for your help and advice – sorry didn’t get back to you as I’ve been at work.
