I need to adapt my template to mobile versions, without creating different page files for each case, or subsites. I think the easiest way to do that is to change the css files to "rearrange" some elements.
So this is what I´ve done so far:
I´m working with php.
I´ve made use of @media queries, adding inside the
<head>this:<link rel="stylesheet" type="text/css" media="only screen and (max-width: 700px)" href="/css/smartphones.css" />, so it will call the smartphones.css file each time the users access the site with a small device.Everything goes kinda smoothly, up until now, when I decided to adapt the dropdown menu. I´ve got a dropdown menu in pure css, that gets activated on mouse over. I use :hover to get the menu to actually drop down.
I want to replace that big dropdown menu with many items (horizontally and vertically), to a single button, that onclick will dropdown, and show just a couple of things.
In order to do that I need to adapt my php page file to hidden the entire dropdown menu and show the "mini-onclick" dropdown menu instead. And here is what I don´t know how to do it.
I need some -javascript I guess- inside my body tag (as the menu appears inside the body) to say something like:
IF the screen is less than 700px, show this XXXX code. ELSE keep going with the rest of the page.
I´m planning to hide the normal dropdown menu using css inside the smartphones.css file, but don´t know how to show the special dropdown menu instead.
Any help will be greatly appreciated! THANKS!
Rosamunda
