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

时间:2014-03-20 03:25:57

标签: jquery html css navbar navigationbar

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

  1. 我希望导航栏固定在页面顶部,并跨越页面的整个宽度。到目前为止,非常好。

  2. 我想在用户开始滚动时改变导航栏的不透明度,也许是颜色。 (不透明。)

  3. 我希望网站徽标左对齐,并且几个导航按钮要右对齐,我希望按钮和徽标根据屏幕大小进行响应缩放。我不希望右对齐和左对齐元素触摸页面边缘。我想要一些填充。

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

    我有什么,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;
    }
    

    有什么想法吗?

2 个答案:

答案 0 :(得分:0)

使用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; 
         }
}

答案 1 :(得分:0)

使用简单的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%;

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