固定位置導航欄不是窗口的全寬度重疊鏈接等

我想創建一個固定的位置導航欄，它不是窗口的全部寬度，並且沒有附加到瀏覽器窗口。因此，在最大寬度1200px時，它會停下來並停留在那裏，而不是沿着瀏覽器的右邊界，並且低於1200px，它會附加到瀏覽器的右側以適應窗口。固定位置導航欄不是窗口的全寬度重疊鏈接等

下面的代碼實現了我剛剛描述的內容，除非它不允許用戶單擊導航欄旁邊的「clickable」鏈接。這是因爲max-width:1200px和width: 100%這迫使我的導航欄重疊該頁面上的其他任何內容，我想以某種方式解決此問題。

#navigation { 
 
    position: fixed; 
 
    max-width: 1200px; 
 
    width: 100%; 
 
    z-index: 0; 
 
} 
 
#navigation svg { 
 
    float: right; 
 
} 
 
#navigation svg polyline { 
 
    fill: #F7F7F7; 
 
    stroke: #B9D7D9; 
 
    stroke-width: 2; 
 
} 
 
#navigation ul { 
 
    position: absolute; 
 
    top: 3px; 
 
    right: 0.8rem; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #F7F7F7; 
 
} 
 
#navigation li { 
 
    float: left; 
 
}

<div id="navigation"> 
 
    <svg height="50" width="400"> 
 
    <polyline points="0,0 400,0 400,50 70,50 0,0" /> 
 
    </svg> 
 
    <ul> 
 
    <li><a href="#">Projects</a> 
 
    </li> 
 
    <li><a href="#">About</a> 
 
    </li> 
 
    <li><a href="#">Contact</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<a href="#">Clickable</a>

這是我希望發生在1200像素的窗口：

小於1200像素的窗口：

來源

2016-10-01 Higeath

你有沒有考慮使用@media查詢不同的佈局r屏幕的大小？看到http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

也許這CSS代碼可以解決你的問題

@media only screen and (min-width: 1201px) { 
    #navigation { 
     width:80%; 
    } 

@media only screen and (max-width: 1200px) { 
    #navigation{ 
     width:100%; 
    }

來源

2016-10-01 10:42:08 AaronDT

百分比的問題在於，無論80％的用戶是誰，不會停在最大1200px。我的網站是1200像素寬，所以我想導航欄停在1200像素。 – Higeath

的clickable鏈接，因爲它z-index是#navigations低於無法點擊。
要解決此問題，您可以使用以下樣式（本例中使用類別.clickable）。
另外，爲了在寬度超過1200px的屏幕上正確對中，您可以添加更多定位到#navigation以正確居中。

#navigation { 
 
    position: fixed; 
 
    max-width: 1200px; 
 
    width: 100%; 
 
    z-index: 0; 
 
    
 
    /* Center #navigation (dont forget vendor prefixes for transform)*/ 
 
    left: 50%; 
 
    transform: translate3d(-50%, 0, 0); 
 
} 
 
#navigation svg { 
 
    float: right; 
 
} 
 
#navigation svg polyline { 
 
    fill: #F7F7F7; 
 
    stroke: #B9D7D9; 
 
    stroke-width: 2; 
 
} 
 
#navigation ul { 
 
    position: absolute; 
 
    top: 3px; 
 
    right: 0.8rem; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #F7F7F7; 
 
} 
 
#navigation li { 
 
    float: left; 
 
} 
 

 
.clickable{ 
 
    display: inline-block; 
 
    position: relative; 
 
    z-index: 1; 
 
}

<div id="navigation"> 
 
    <svg height="50" width="400"> 
 
    <polyline points="0,0 400,0 400,50 70,50 0,0" /> 
 
    </svg> 
 
    <ul> 
 
    <li><a href="#">Projects</a> 
 
    </li> 
 
    <li><a href="#">About</a> 
 
    </li> 
 
    <li><a href="#">Contact</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<a href="#" class="clickable">Clickable</a>

來源

2016-10-01 10:42:19

這不是一個解決方案，它會使鏈接可點擊，但我的網站的其餘部分將通過導航欄可見，這沒有多大意義。 – Higeath

我解決了這個問題。由於我的最大寬度是1200像素，導航寬度是400像素，因此我需要將它推到右邊的800像素。

如果屏幕寬度超過1200像素，我將導航欄800像素右移，如果屏幕小於1200像素右：0，這意味着導航欄將連接到瀏覽器。

#navigation{ 
    position:fixed; 
    z-index: 0; 
    right: 0; 
} 

@media only screen and (min-width: 1200px) { 
    #navigation{ 
     margin-left:800px!important; 
     right: initial; 
    } 
}

來源

2016-10-01 12:42:25 Higeath

固定位置導航欄不是窗口的全寬度重疊鏈接等

回答

相關問題