固定位置导航栏不是窗口的全宽度重叠链接等

我想创建一个固定的位置导航栏，它不是窗口的全部宽度，并且没有附加到浏览器窗口。因此，在最大宽度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

固定位置导航栏不是窗口的全宽度重叠链接等

回答

相关问题