Question

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

提前致谢

#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>

再次感谢您的帮助。

Answer 1

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

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

如果您有任何疑问，请与我们联系。

移动菜单栏在CSS

1 个答案: