CSS only drop-down menu not using UL/LI

Question

i'm a newbie / self-taught html guy. I need to edit my (static) website's menu to make it mobile friendly for google within the next 4 days. I'm breaking my head trying to figure out how to do it, but no luck so far, so I'm getting desperate. The way I'm making my entire website mobile friendly is by setting the viewport and changing the CSS if screen width is less than Xpx.

I need to use ONLY CSS to transform the following menu, to a menu button. ie in mobile view, have the entire menu hidden within a button at the top of the screen and make the menu appear/dropdown by clicking on the button.

This is a sample menu I have on my website: www.oikotrust.gr/en And here's the mobile friendly one I managed so far (uploaded it here just for reference): www.oikotrust.gr/index-mobile.html

<div class="menu">
<div class="menu_btn here">ΑΡΧΙΚΗ ΣΕΛΙΔΑ</div>
<div class="menu_btn"><a href="info.html">ΕΝΟΙΚΙΟ</a></div>
<div class="menu_btn"><a href="photos.html">ΦΩΤΟΓΡΑΦΙΕΣ</a></div>
<div class="menu_btn"><a href="contact.php">ΕΠΙΚΟΙΝΩΝΙΑ</a></div>
</div>

related CSS in original page

.menu{margin-top:50px; float:left; margin-left:none;}
.menu_btn{height:35px; font-weight:bold; padding-top:10px; width:100%; padding-left:20px; font-size:18px;}
.here{background-image:none; background-repeat:no-repeat; color:#E5541C;}

All and any help much appreciated!

Answer 1

you don't need to "transform" the menu, not neccessarely. You can use media queries to style your content depending on your viewport, and use visibility property to set up different elements for different viewports.

Small tip: always write the css for wider media queries at the top, following with the smaller wide media queries next until you get to your smallest viewport.

I wrote an article a while ago maybe this will help you: http://readingssexy.com/blogpost/how-to-use-media-queries.html

Answer 2

As class menu is the parent class for all its subchild you can hide this class using media query for mobile screens, you can put a div just above your menu and place your button code there so what will happen is, on mobile screen you menu will be hidden first when user will click on this button you can show menu to him or toggle the menu open/close state. Hope you get this.