1

This is my site in progress http://www.wearemovingto.com I am using a template as an example but I want the map to disappear on mobile view and have a dropdown list take its place, just wondering what code to use? Thanks.

Jason
  • 23
  • 4

1 Answers1

1

I would be inclined to use the CSS3 media queries. If you add a select with the ID vmapSelect:

<style type="text/css">
  #vmapSelect {display:none;}
  @media all and (max-width: 1000px) {
    #vmap {display:none;}
    #vmapSelect {display:block;}
  }
</style>
Jonathan
  • 6,507
  • 5
  • 37
  • 47
  • I now need a dropdown list to appear on responsive view It has to only appear on mobile devices (phone/tablet, etc) and not appear on desktop/laptop/mac The drop down list/menu has 3 sections First section Continent (Africa, Europe, America etc) I select Asia and the next list/menu loads Second section Region (Sth East Asia, North Asia etc) I select South East Asia and the next list/menu loads Third section Country (Indonesia, Vietnam, Thailand, etc) I select Thailand and it takes me to Thailand.html Thanks – Jason May 07 '15 at 09:22
  • In that case, make the `vmapSelect` be a div containing the dropdowns. Here's an article on how to make consecutive dropdowns: http://coursesweb.net/javascript/multiple-select-dropdown-list-javascript_t Let me know how it goes, and if necessary post another question. – Jonathan May 07 '15 at 14:52
  • It worked perfect, sorry the site wouldn't let me post another Q. – Jason May 08 '15 at 01:57