創建自定義的響應式網站導航欄/菜單

Question

我為正在工作的網站創建了水平固定導航欄。 我正在嘗試找出一些細節。 我讀過Bootstrap可以做這些事情，但是我嘗試將它實現到具有很多CSS的站點中是一團糟。 我願意在必要時使用jquery。

1. 我想將導航欄固定在頁面頂部，並跨越頁面的整個寬度。 到現在為止還挺好。

2. 我希望導航欄的不透明度，甚至顏色可以在用戶開始滾動時改變。 （不透明。）

3. 我希望網站徽標左對齊，而幾個導航按鈕則右對齊，並且我希望這些按鈕和徽標能夠根據屏幕尺寸進行響應縮放。 我不希望左右對齊的元素接觸頁面邊緣。 我想要一些填充物。

我還沒有找到實現不透明度更改或將徽標和按鈕保持在適當位置並正確縮放的方法。

我所擁有的HTML：

<div id="navbar">
     <ul>
<li><a href="index.html"><img src="logo.png" align="left"></a></li>
<li><a href="#1"><img src="button1.png"></a></li>
<li><a href="#2"><img src="button1.png"></a></li>
<li><a href="#3"><img src="button1.png"></a></li>
    </ul>
</div>

和CSS：

#navbar ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: right;
}

#navbar ul li {
display: inline;
text-decoration: none;
}

#navbar {
position:fixed;
width:100%;
height:40px;
background:rgba(0, 0, 0, 0.6);
text-decoration:none;
margin:0px;
padding-left:500px;
padding-right:500px;
padding-top:8px;
top:0;
word-spacing:40px;
}

有任何想法嗎？

Answer 1

使用jQuery

$(window).resize(function(){
    if(window.innerWidth > 768) 
    {
 //add sheet external css
 //$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
 //Remove the entire style attribute:
 //$("#nav").removeAttr("style");
 //add css
 /*$("#voltaic_holder").css(
         {"position":"relative", 
          "top":"10px",
          "width": "500px";
         });
  */
    }
    else if(window.innerWidth > 1000) 
    {
    }
    else if(window.innerWidth > 1200) 
    {
    }
    else(window.innerWidth > 2000) 
    {
    }
});

或使用簡單的CSS

@media all and (max-width: 800px) {
  .class {
    width: 200px;
    }
}

@media all and (min-width: 600px) {
  .class { 
         width: 100px; 
         }
}

Answer 2

使用簡單的CSS Mediaqueries而不是使用jquery

@media all and (max-width: 800px) {
  .class {
    width: 100%;
    }
}

@media screen(max-width: 768px) and (orientation: portrait/landscape) {
 .applelandscape {
      width: 30%;
      float: right;
         }
}

@media all and (min-width: 600px) {
  .class { 
         width: 20%; 
         }
}

注意：避免在像素使用CSS屬性或points.I盡量使用%來代替。 要回答有關填充的問題，請不要使用padding-left: 50px; 使用像padding-left: 5%;

我總是喜歡將媒體查詢用於響應式設計。 對於所有類型的設備輸出來說，這都是最佳解決方案。