如何在不使用任何框架的情况下响应菜单栏答案

【问题标题】：How to responsive menu bar without using any framework如何在不使用任何框架的情况下响应菜单栏
【发布时间】：2016-11-15 23:22:42
【问题描述】：

我正在尝试设计响应式菜单栏。这是我的 html 文件。

<body>
  <div class="header">
     <div class="container">
        <div class="span_1_of_12">
           <a href="#" class="logoImage"/></a>
        </div>

        <div class="span_11_of_12">
          <nav class="navigation full-right">
             <ul class="menubar">
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
             </ul>
          </nav>
        </div>
     </div>
  </div>

这是我的 CSS：

  .container{
     width: 960px;
     position: relative;
     margin: auto;
 }

 .span_1_of_12 {
    width: 7.416%;
    margin: 1% 0 1% 0%;
    float: left;
 }

 .span_11_of_12 {
    width: 91.58%;
    margin: 1% 0 1% 0%;
    float: left;
 }

当我尝试调整浏览器窗口的大小时。菜单栏在窗口右侧被剪切。我附上了截图。

我的假设是在将窗口大小调整为 800 像素时，不应在浏览器右侧切断菜单栏。因为我在 %age 中提到了宽度。它应该适应可用空间。如果这是错误的假设。请给我正确的建议。

【问题讨论】：

我假设 6 个主页按钮只是占位符，代表最终会出现的内容...

标签： jquery html css responsive-design responsive

【解决方案1】：

只需将 .container 宽度设置为 100% 或 100vw（视口宽度）即可。你不能有固定的像素宽度。

【讨论】：

如果我将容器宽度设为 100%，它会起作用，但我希望 body 容器应该是 960px；并对齐到浏览器的中心
设置最大宽度为960px？
工作正常。请你解释一下我什么时候应该使用最大宽度？
就像您问的那样，如果您希望您的网页以某种方式工作，直到您达到预期的最大尺寸（在本例中为 960 像素）。之后，网页应保持在 960 像素并在两侧添加边距

【解决方案2】：

你可以给你的 .container 一个 100% 的宽度并在里面创建另一个容器，宽度：960 像素，边距：0 自动

【讨论】：

【解决方案3】：

下面是响应式菜单栏的代码

   <body>
    <div class="header">
        <div class="sticky">
            <div class="container">
                <div class="span_1_of_12">
                    <a href="#" class="logoImage"/></a>
                </div>

                <div class="span_11_of_12">
                    <div class="menuDisplayOnMobileButton">Menu<span     class="menuIcon"></span></div>
                    <nav class="navigation full-right">
                        <ul class="menubar">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">About Us</a></li>
                            <li><a href="#">Services</a></li>
                            <li><a href="#">Portfolio</a></li>
                            <li><a href="#">Blog</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>

        <div class="mainBannerTextwrapper">
            <div class="container">
                <div class="span_12_of_12">
                    <div class="mainBannerTextDiv">
                        <p>Vikram</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="aboutUsSectionContainer">
        <div class="container">
            <div class="span_12_of_12">
                <div class="eachSectionHeading">
                    About US
                </div>
            </div>
        </div>

        <div class="container">

        </div>
    </div>
  </body>


JAVASCRIPT FILE 

     $(document).ready(function ()
     {
      $(window).scroll(function(){
       var sticky = $('.sticky'),
         scroll = $(window).scrollTop();

            if (scroll >= 100) 
                sticky.addClass('fixed');
           else
               sticky.removeClass('fixed');
      });



        $('.menuDisplayOnMobileButton').on('click', function()
         {
          $('.menubar').toggleClass('menubarMobile'); 
         }); 
         });

【讨论】：

【解决方案4】：

   responsive css file is

   .container{
    width: 100%;
    position: relative;
    margin: auto;
    max-width: 960px;
    overflow: hidden;
  }

 .span_12_of_12 {
    width: 100%;
    margin: 1% 0 1% 0%;
    float: left;
  }

  .span_11_of_12 {
    width: 91.58%;
    margin: 1% 0 1% 0%;
    float: left;
   }

  .span_10_of_12 {
    width: 83.16%;
    margin: 1% 0 1% 0%;
    float: left;
  }

 .span_9_of_12 {
     width: 74.75%;
     margin: 1% 0 1% 0%;
     float: left;
   }

 .span_8_of_12 {
     width: 66.33%;
     margin: 1% 0 1% 0%;
     float: left;
   }

 .span_7_of_12 {
       width: 57.91%;
       margin: 1% 0 1% 0%;
       float: left;
  }

 .span_6_of_12 {
      width: 49.5%;
      margin: 1% 0 1% 0%;
      float: left;
  }

  .span_5_of_12 {
      width: 41.08%;
      margin: 1% 0 1% 0%;
      float: left;
  }

 .span_4_of_12 {
      width: 32.66%;
      margin: 1% 0 1% 0%;
     float: left;
  }

 .span_3_of_12 {
    width: 24.25%;
    margin: 1% 0 1% 0%;
    float: left;
  } 

   .span_2_of_12 {
     width: 15.83%;
     float: left;
     margin: 1% 0 1% 0%;
  }

  .span_1_of_12 {
    width: 7.416%;
    margin: 1% 0 1% 0%;
    float: left;
   }

     /*  GO FULL WIDTH BELOW 480 PIXELS */
    @media only screen and (max-width: 480px) {

      .span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12,  .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 {
      width: 100%; 
      margin: 1% 0 1% 0%;
     }

    .logoImage{
       margin: 0 auto;    
     }

    .menubar{
       display: none;
    }    

   .menubarMobile{
      display: block;
     }    

   .menuDisplayOnMobileButton{
      display: block !important;
      cursor: pointer;
      text-align: center;
      font-weight: bold;
      background: red;
      padding: 10px;
     }

   .menubar li, .menubar a{
       width: 100%;
       text-align: center;
    }

   .menubar li{
       border-bottom: 1px solid #000;
       background: rebeccapurple;
    }
  }

   .full-left {
      float: left;
    }

    .full-right {
      float: right;
    }

     .header{
       background: red;
       overflow: hidden;
     }

     .logoImage{
         display: block;
         height: 50px;
         width: 50px;
         background: url(../images/logo.png) no-repeat transparent;
      }

    .menubar li{
        float: left;
        display: inline;
      }

    .menubar li a{
       display: block;
       padding: 10px;
       text-decoration: none;
       color: #000;
       font-weight: bold;
     }

    .menuDisplayOnMobileButton{
          display: none;
     }

   .header{
           background: url(../images/banner.jpg) no-repeat transparent;
           max-width: 100%;
           height: 500px;
           background-size: cover;
           background-position: center;
     }

      .mainBannerTextwrapper{
         margin: 10% 25% 0% 25%;
         overflow: hidden;
       }

      .mainBannerTextDiv{
        border: 10px solid #fff;
       }

     .fixed {
        position: fixed;
        top:0; 
       left:0;
       width: 100%;
       background: red;
       z-index: 1;
     }

    .eachSectionHeading{
       text-align: center;
       font-size: 30px;
       margin: 4% 0;
    }

【讨论】：