I’m developing a mobile site (using media queries) where the CSS menu is too far big to shrink down to the width of a phone screen. The obvious way is to make each li tab 100% width of the screen to be easily tap able. Which makes the whole screen the menu, pushing content way down the page. not good.
I see some are opting to have in the code two menus. One hidden from desktop and one hidden from mobile. The mobile shown as a selectable list, this just does not feel right. And I don’t like the select list.
Here’s the issue, would you have…
Use one menu code and on the mobile media query have it hidden on load using CSS to then reveal/toggle with JavaScript? (Simple to do)
Use one menu code and use JavaScript to have it hidden on page load on mobile then reveal/toggle with JavaScript? (beg the question can you use JavaScript to selectively process on mobile?)
Any advice or comments would be appreciated as to which is the best approach? It just worries be to hide the main navigation using CSS (granted its only for mobile). And all mobiles use JavaScript yes?
On 29 Sep 2013, at 11:28, David Owen email@hidden wrote:
I’m developing a mobile site (using media queries) where the CSS menu is too far big to shrink down to the width of a phone screen. The obvious way is to make each li tab 100% width of the screen to be easily tap able. Which makes the whole screen the menu, pushing content way down the page. not good.
I see some are opting to have in the code two menus. One hidden from desktop and one hidden from mobile. The mobile shown as a selectable list, this just does not feel right. And I don’t like the select list.
Here’s the issue, would you have…
Use one menu code and on the mobile media query have it hidden on load using CSS to then reveal/toggle with JavaScript? (Simple to do)
Use one menu code and use JavaScript to have it hidden on page load on mobile then reveal/toggle with JavaScript? (beg the question can you use JavaScript to selectively process on mobile?)
Any advice or comments would be appreciated as to which is the best approach? It just worries be to hide the main navigation using CSS (granted its only for mobile). And all mobiles use JavaScript yes?
unfortunately I have nothing technical to add (but am stalking this list naturally) and I furthermore know (guess) that you already have something in mind regarding look and function.
All I can add is a personal thing which could be read as:
A mobile device screen is sooooo tiny that any kind of menus are more or less annoying independent of what way they are brought in.
So my preferred argument for mobile web-versions is to share a reduced (to the max) page version - briefly and succinctly.
And what I totally like (however I can’t judge neither handling nor construction) is something like this:
What I typically see on the web is a menu that’s hidden and an that’s icon displayed when the screen width falls below a certain size. When the icon is clicked, the same menu with different styling is then shown. When the screen increases in size, the menu is reinstated to its original form.
Whether you use CSS or JavaScript to do the above largely depends on what you’re comfortable with and your audience. JavaScript can be used to selectively process on mobile (with a simple conditional statement, if… else…), but you’d probably need to detect the user agent, which, unless absolutely necessary, is generally considered to be bad practice (because user agents can be manipulated by the user in the browser).
Personally, I’d go down the CSS route. It’s lighter in weight and you know it’s always going to work on the target device.
Joe
On 29 Sep 2013, at 11:28, David Owen email@hidden wrote:
I’m developing a mobile site (using media queries) where the CSS menu is too far big to shrink down to the width of a phone screen. The obvious way is to make each li tab 100% width of the screen to be easily tap able. Which makes the whole screen the menu, pushing content way down the page. not good.
I see some are opting to have in the code two menus. One hidden from desktop and one hidden from mobile. The mobile shown as a selectable list, this just does not feel right. And I don’t like the select list.
Here’s the issue, would you have…
Use one menu code and on the mobile media query have it hidden on load using CSS to then reveal/toggle with JavaScript? (Simple to do)
Use one menu code and use JavaScript to have it hidden on page load on mobile then reveal/toggle with JavaScript? (beg the question can you use JavaScript to selectively process on mobile?)
Any advice or comments would be appreciated as to which is the best approach? It just worries be to hide the main navigation using CSS (granted its only for mobile). And all mobiles use JavaScript yes?
I have done this with my menu: I chose the word menu on the mobile part instead of a menu logo. Transition FX action to display the second css menu. What do you think of this?
It’s a very easy hop to use CSS to display:none on the menu at mobile size and then use a simple show/hide javascript to toggle on/of the menu. As it’s an existing site and not a total rebuild I was thinking of doing this.
I’m just a bit weary of hiding the main nav using CSS. Nobody turns off javascript on mobile do they? I assume these mobile frameworks hide the main van off using Javascript and not CSS. Is my approach OK?
Hiding with CSS and using an icon to toggle between visible and hidden with JavaScript shouldn’t be a problem, I wouldn’t have thought. It’s not on this site: http://dribbble.com (the first one I looked at).
Joe
On 30 Sep 2013, at 12:07, David Owen email@hidden wrote:
I’m just a bit weary of hiding the main nav using CSS. Nobody turns off javascript on mobile do they? I assume these mobile frameworks hide the main van off using Javascript and not CSS. Is my approach OK?
On 30 Sep 2013, at 12:46, Joe Billings email@hidden wrote:
Hiding with CSS and using an icon to toggle between visible and hidden with JavaScript shouldn’t be a problem, I wouldn’t have thought. It’s not on this site: http://dribbble.com (the first one I looked at).
Joe
On 30 Sep 2013, at 12:07, David Owen email@hidden wrote:
I’m just a bit weary of hiding the main nav using CSS. Nobody turns off javascript on mobile do they? I assume these mobile frameworks hide the main van off using Javascript and not CSS. Is my approach OK?
Stick a #navigation { display: none } inside a suitable media query, replacing #navigation with your menu’s id or your preferred selector. Something like:
<style>
/* Hide navigation when the screen width is 480px or below */
@media screen and (max-width: 480px) {
#navigation { display: none }
}
</style>
Joe
On 30 Sep 2013, at 13:30, David Owen email@hidden wrote:
If you were using only CSS how would you show/hide the CSS menu div (with hide on page load)?
On 30 Sep 2013, at 15:53, Joe Billings email@hidden wrote:
Stick a #navigation { display: none } inside a suitable media query, replacing #navigation with your menu’s id or your preferred selector. Something like:
<style>
/* Hide navigation when the screen width is 480px or below */
@media screen and (max-width: 480px) {
#navigation { display: none }
}
</style>
Joe
On 30 Sep 2013, at 13:30, David Owen email@hidden wrote:
If you were using only CSS how would you show/hide the CSS menu div (with hide on page load)?
All working well apart from an oddity in that when viewing the site at it’s narrowest state (try it) there’s a bit of javascript to show/hide the mobile state menu. But if you show then hide the menu, then make the screen wider the menu is hidden forever until a re-load of the page and css.
How best to fix? Use javascript to detect if the window grows wider?
On 30 Sep 2013, at 12:46, Joe Billings email@hidden wrote:
Hiding with CSS and using an icon to toggle between visible and hidden with JavaScript shouldn’t be a problem, I wouldn’t have thought. It’s not on this site: http://dribbble.com (the first one I looked at).
Joe
On 30 Sep 2013, at 12:07, David Owen email@hidden wrote:
I’m just a bit weary of hiding the main nav using CSS. Nobody turns off javascript on mobile do they? I assume these mobile frameworks hide the main van off using Javascript and not CSS. Is my approach OK?
The code could be tighter as there is a fair bit of repetition in there and it closes the mobile menu before it hits the 700 pixel breakpoint but overall it should do what you need.
regards,
Tim.
On 31 Oct 2013, at 18:36, David Owen wrote:
Seeing that I’m already loading prototype.js and scriptaculous.js
Can I (how to use?)…
Detect if the window size (or a full width element) is greater than 700px
Toggle the nav style (from the toggled state display:none) to display:block
On 31 Oct 2013, at 18:53, Tim Plumb email@hidden wrote:
Hi David,
Here’s a simple example that uses plain old vanilla JS; Home Page
The code could be tighter as there is a fair bit of repetition in there and it closes the mobile menu before it hits the 700 pixel breakpoint but overall it should do what you need.
regards,
Tim.
On 31 Oct 2013, at 18:36, David Owen wrote:
Seeing that I’m already loading prototype.js and scriptaculous.js
Can I (how to use?)…
Detect if the window size (or a full width element) is greater than 700px
Toggle the nav style (from the toggled state display:none) to display:block
