響應理由菜單欄

我正在嘗試創建一個合理的菜單欄，以便公司徽標位於右側，鏈接位於左側。它還需要具有響應能力，以便我們可以在移動設備上正確查看它。響應理由菜單欄

第一個問題是徽標和菜單項不能正確嵌入塊。第二個問題是響應元素。我正在嘗試正確使用precentages，但我想我錯過了什麼？內格可稱呼錯了..

下面是菜單欄的HTML元素：

<div class="subMenu" >  
    <h1> Site Name </h1> 
    <div class="inner"> 
     <a href="#" id="sTop" class="subNavBtn">Home</a> 
     <a href="#" id="s1" class="subNavBtn">About</a> 
     <a href="#" id="s2" class="subNavBtn">Team</a> 
     <a href="#" id="s3" class="subNavBtn">Work</a> 
     <a href="#" id="s4" class="subNavBtn">Clients</a> 
     <a href="#" id="Contact" class="ContactBtn">Contact</a> 
    </div>   
</div>

下面是菜單欄的CSS：

.subMenu { 
    position: absolute; 
    top: 0px; 
    height: 55px; 
    z-index: 1000; 
    width: 100%; 
    background: rgba(255,255,255,0.95); 
    box-shadow: 0px 1px 10px rgba(31, 50, 63, 0.25); 

} 

.subMenu .inner { 
    padding:0; 
    font-weight: 400; 
} 

.subNavBtn { 
    display: block; 
    height: 40px; 
    width: 12%; 
    float: left; 
    margin: 0px 0px 0 0; 
    text-decoration: none; 
    font-size: 14px; 
    padding: 15px 0 0 0; 
    text-align: center; 
    color: rgb(119, 119, 119); 
} 

.end { 
    margin: 0; 
} 

.ContactBtn { 
    display: block; 
    height: 40px; 
    width: 12%; 
    float: left; 
    margin: 0px 0px 0 0; 
    text-decoration: none; 
    font-size: 14px; 
    padding: 15px 0 0 0; 
    text-align: center; 
    color: rgb(119, 119, 119); 
}

來源

2014-01-06 notcho nachos

它看起來不像你有任何響應代碼（媒體查詢）...可能想看看使用網格或框架像twitter引導 – Travis

這種定位不會真的給你那種響應的感覺。 – BuddhistBeast

這是你在找什麼？ http://jsfiddle.net/5Kbuq/2/你看這張照片有多大？ – BuddhistBeast

很多人都喜歡用列表來做他們的菜單欄。這是一個不錯的練習，我建議你嘗試一下。並不是說你做錯了。

當談到對反應能力，你可以使用這樣的事情

body 
{ 
    width: 100%; 
    display: -webkit-box; 
    -webkit-box-pack: center; 
} 
#page 
{ 
max-width: 1500px; 
margin: 20px 20px; 
    display: -webkit-box; 
    -webkit-box-orient: horizontal; /*responsive layout*/ 
    -webkit-box-flex: 1; /*1=flexible, 0=fixed*/ 
    background-color: #f2f2eb; 

}

與WebKit的屬性，你會得到一個自動的響應頁面。如果你想設置你的網站將變換爲移動表格的像素，你必須使用上面提到的Travis或者像sass這樣的預處理器，當你可以在變量中存儲所需的高度和寬度值時。

關於徽標試圖做出另一個div。認爲它像一個難題。有時在紙上畫它可能會幫助你。

來源

2014-01-06 21:57:16 Molnia

快速響應檢查，請訪問此處---> http://www.responsinator.com/ – Molnia

響應理由菜單欄

回答

相關問題