在css中的移動菜單欄

請有人可以幫助我將以下內容轉換爲移動設備的菜單欄，我一直在嘗試多年。我希望它是500px，如果可能的話不使用bootstrap，或者如果有人能指引我朝着正確的方向發展。在css中的移動菜單欄

在此先感謝

#menu { 
 
    width: 21.4vw; 
 
    font-family: Tahoma, Geneva, sans-serif; 
 
    font-weight: normal; 
 
\t 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; 
 
\t font-size: 3vw; 
 
\t 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>

感謝再次幫助。

來源

2015-12-12 Harry White

你好，它看起來像你需要一些media queries。媒體查詢允許您指定特定的CSS，具體取決於您的網站正在顯示的屏幕寬度。你可以添加一個500px的媒體查詢到你的css像這樣：

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

讓我知道如果你有任何問題。

來源

2015-12-12 20:44:04 Froy

謝謝你，我更努力地研究如何開發實際的代碼來獲得我想要的，無論我嘗試以什麼方式結束失敗 –

例如，你想在查看時修改菜單在移動。除了最小化#menu的寬度，你可能還想要修改字體大小，也許填充等。我喜歡做的是添加我的查詢，然後使用像bitballoon.com這樣的東西來實際發佈我的靜態文件在一個域名（免費）。一旦他們在域名上，您可以將其導入到像http://quirktools.com/screenfly/這樣的東西，以在不同的手機屏幕上測試您的網站。 *不要忘記在您的中添加。 – Froy

在css中的移動菜單欄

回答

相關問題