-1

So I'm working on a menu. So far I've built it and it's all looking pretty, but when it's viewed on a mobile or small tablet I want the menu to disappear to be replaced by a "MENU" button.

Any suggestions?

My menu is made from a div for each menu item rather than a list so can't find anything helpful online. cheers :)

View the menu here, and the CSS here .

Kaspar Lee
  • 5,446
  • 4
  • 31
  • 54
A Lan
  • 1
  • 1
  • 2
  • 1
    see this tutorial explains well http://webdesignerwall.com/tutorials/css3-media-queries the error is only in the media css – Jose Cerejo Dec 01 '15 at 17:09
  • or here http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile?answertab=votes#tab-top – Jose Cerejo Dec 01 '15 at 17:10
  • I really don't understand that well yet, I'm still in the early learning stages. Could you explain more specifically what I have to do? Sorry bit of a noob lol – A Lan Dec 01 '15 at 17:12
  • Welcome to Stack Overflow! Welcome to Stack Overflow! This question is either too broad, opinion based or requires discussion and so is off-topic for Stack Overflow. If you have a specific, answerable, programming issue, please provide full details. – Paulie_D Dec 01 '15 at 17:20

2 Answers2

1

You can use @media queries to specify the width or height of a screen. You may be able to use this to hide the divs and show a menu icon when the screen width is smaller than a specified size.

Documentation of this can be found here

Note: This is only fully supported in IE9 and above

Kaspar Lee
  • 5,446
  • 4
  • 31
  • 54
  • I really don't understand that well yet, I'm still in the early learning stages. Could you explain more specifically what I have to do? Sorry bit of a noob lol – A Lan Dec 01 '15 at 17:14
  • Are you happy to use a small bit of very simple JS? – Kaspar Lee Dec 01 '15 at 17:58
  • In your CSS you have used `@media` queries, so I assume you know how to use them? Basically, when the width of the screen is smaller than a tablet screen, set CSS to `display: none` on the menu. Then create an image (of a menu button) and set it to `display: none`. When the width of the screen is small enough, set CSS `display:` `block` or `inline-block`. – Kaspar Lee Dec 01 '15 at 19:27
  • Then you can use JavaScript to detect when the menu button is clicked, and change the `menu`'s CSS to `display:` `block` or `inline-block` – Kaspar Lee Dec 01 '15 at 19:30
  • @ALan, if this answered your question, please mark it as accepted. – Kaspar Lee Dec 07 '15 at 17:34
0

for example try put in your code to see the differences and your comment your code

@media (min-width:320px) { background: blue; }
@media (min-width:481px) { background: orange; }
@media (min-width:641px) { background: pink; }
@media (min-width:961px) { background: gray; }
@media (min-width:1025px) { background: white; }
@media (min-width:1281px) { background: red; }
Jose Cerejo
  • 231
  • 1
  • 5
  • 19
  • I've already managed to get the menu to rescale, now I want the menu to disappear altogether on smaller screens until "MENU" is pressed. I don't know how to make the "MENU" button appear automatically on a smaller screen either. – A Lan Dec 01 '15 at 17:18
  • put the code in jsfidle please – Jose Cerejo Dec 01 '15 at 17:47