Question

我正在尝试设计响应式菜单栏。这是我的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;
 }

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

我的假设是当将窗口大小调整为800px时，不应该在浏览器的右侧切断菜单栏。因为我提到％年龄的宽度。它应该适应可用空间。如果这是错误的假设。请建议我正确的方式。

Answer 1

只需将.container宽度设置为100％或100vw（视口宽度）。您不能以像素为单位固定宽度。

Answer 2

你可以给你的.container 100％宽度并在里面制作另一个容器，宽度：960px和margin：0 auto

Answer 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'); 
         }); 
         });

Answer 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;
    }

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

4 个答案: