Question

我为我正在制作的网站创建了一个水平固定导航栏。我正在尝试解决一些细节问题。我已经读过引导程序可以执行这些操作，但是我尝试将它实现到具有许多自己的CSS的站点中是一团糟。如果有必要，我愿意使用jquery。

我希望导航栏固定在页面顶部，并跨越页面的整个宽度。到目前为止，非常好。
我想在用户开始滚动时改变导航栏的不透明度，也许是颜色。（不透明。）
我希望网站徽标左对齐，并且几个导航按钮要右对齐，我希望按钮和徽标根据屏幕大小进行响应缩放。我不希望右对齐和左对齐元素触摸页面边缘。我想要一些填充。

我还没有找到实现不透明度更改的方法，或者保留徽标和按钮并正确缩放。

我有什么，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) 
    {
    }
});

或使用easy 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属性。我更喜欢使用%。要回复有关填充的问题，请不要使用padding-left: 50px;使用padding-left: 5%;

我总是更喜欢使用媒体查询来进行基于响应的设计。这对于所有类型的设备输出都是最佳解决方案。

创建自定义，响应式网站导航栏/菜单

2 个答案: