Question

我是一个新手/自学成才的html人。我需要编辑我的（静态）网站菜单，以便在接下来的4天内为谷歌提供移动设备友好性。我试图弄清楚如何去做，但是到目前为止没有运气，所以我变得绝望了。我使整个网站移动友好的方式是设置视口并在屏幕宽度小于Xpx时更改CSS。

我需要使用ONLY CSS将以下菜单转换为菜单按钮。即在移动视图中，将整个菜单隐藏在屏幕顶部的按钮内，并通过单击按钮使菜单显示/下拉。

这是我在我网站上的示例菜单：www.oikotrust.gr/en 这是我迄今为止管理的移动友好版（在此处上传仅供参考）：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>

原始页面中的相关CSS

.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;}

所有和任何帮助非常感谢！

Answer 1

你不需要＆＃34;转换＆＃34;菜单，不是必要的。您可以使用媒体查询根据视口设置内容的样式，并使用visibility属性为不同的视口设置不同的元素。

小提示：始终在顶部编写更广泛的媒体查询的css，然后使用较小的宽媒体查询，直到到达最小的视口。

我刚才写了一篇文章也许这会对你有所帮助： http://readingssexy.com/blogpost/how-to-use-media-queries.html

Answer 2

由于班级菜单是其所有子项的父类，您可以使用移动屏幕的媒体查询隐藏此类，您可以在菜单上方放置一个div并将按钮代码放在那里，以便在移动屏幕上发生什么当用户点击此按钮时，您将首先隐藏菜单，您可以向他显示菜单或切换菜单打开/关闭状态。希望你能得到这个。

仅CSS下拉菜单不使用UL / LI

2 个答案: