css中的移动菜单栏答案

【问题标题】：Mobile menu bar in csscss中的移动菜单栏
【发布时间】：2015-12-13 04:44:04
【问题描述】：

请有人帮我将以下内容转换为移动设备的菜单栏，我已经尝试了很长时间。我希望它是 500 像素，并且尽可能不使用引导程序，或者如果有人可以指出我正确的方向。

提前致谢

#menu {
    width: 21.4vw;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: normal;
	 font-size: 1vw;
    text-align: left;
    margin-left: 1vw;
    background-color: #CA2A2A;
        border-radius: 0px;
        max-width: 96vw;
    
}
#menu ul {
    height: auto;
    padding: 0.5vw 0vw;
    margin: 0px;
}
#menu li { 
    display: block; 

}
#menu a {
    text-decoration: none;
    color: #FFFFFF;
    padding: 0.5vw 0.5vw 0.5vw 0.5vw;
	font-size: 3vw;
	display:block;
    
}
#menu a:hover {
    color: #000000;
    background-color: #FFFFFF;

}

<!DOCTYPE html>
<html>
  <head>
    </head>
  <body>
<div id="menu">
<ul>
<li><a href="website.html">Home</a></li>
<li><a href="breakingnews.html">Breaking News</a></li>
<li><a href="Sport.html">Sport</a></li>
<li><a href="Hulltoday.html">Hull Today</a></li>
<li><a href="Property.html">Property</a></li>
<li><a href="Social.html">Social Media</a></li>
<li><a href="Music.html">Music</a></li>
<li><a href="Reviews.html">Reviews</a></li>
<li><a href="Movies.html">Movies</a></li>
<li><a href="Weather.html">Weather</a></li>
</ul>
</div>
    
  </body>
  </html>

再次感谢您的帮助。

【问题讨论】：

标签： html css mobile drop-down-menu responsive-design

【解决方案1】：

您好，您似乎需要一些media queries。媒体查询允许您根据显示网站的屏幕宽度指定特定的 css。您可以像这样将 500px 的媒体查询添加到您的 CSS：

@media (max-width: 500px){
//CSS to be applied to your website when being viewed on screen widths of 500px
}

如果您有任何问题，请告诉我。

【讨论】：

谢谢，我更纠结于如何开发实际代码来获得我想要的东西，无论我尝试什么最终都会以某种方式失败
例如，您想在移动设备上查看时修改菜单。除了最小化#menu 的宽度之外，您可能还想修改字体大小，可能还有填充等。我喜欢做的是添加我的查询，然后使用 bitballoon.com 之类的东西将我的静态文件实际发布到域（免费）。一旦他们在域中，您可以将其导入到 quirktools.com/screenfly 之类的东西中，以在不同的移动屏幕上测试您的网站。 *不要忘记在你的中添加。