页面响应标签

时间：2016-12-25 02:23:16

标签： javascript html css

我希望有一个3列布局，可以响应正在调整大小的页面。我想知道ESPN是怎么做到的。我希望这样，当它是一个中等大小时，它只显示两列，并在顶部弹出一个菜单，让你可以选择看到它自己消失的第三列。解释它的最佳方式是ESPN的网站，并左右调整大小。我尝试过使用＆＃34; onclick＆＃34;显示无/阻止，但它并没有处理我的写作方式。

＆＃13;
＆＃13; 
.global-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1400px;
  display: flex;
  margin-top: 75px;
}
.center-container {
  height: auto;
  margin-bottom: 9px;
  margin-right: 1%;
  margin-left: 1%;
  display: inline-block;
  width: 80%;
}
.left-container {
  float: left;
  width: 28%;
  margin-left: .5%;
}
.right-container {
  float: left;
  width: 28%;
}
.responsive-menu {
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}
.responsive-menu>ul {
  justify-content: space-between;
  list-style-type: none;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  position: relative;
  vertical-align: top;
  width: 100%;
  display: none;
  padding-top: 44px;
}
.responsive-menu>ul li {
  display: block;
  width: 100%;
  -webkit-box-flex: 1;
  flex: 1;
  text-transform: uppercase;
}
.responsive-menu>ul>li {
  line-height: 44px;
  list-style-type: none;
  text-align: center;
  display: inline-block;
  position: relative;
  vertical-align: top;
}
.responsive-menu>ul li a {
  display: block;
  font-size: 12px;
  line-height: 44px;
  position: relative;
  text-align: center;
  width: 100%;
  text-decoration: none;
  color: #000;
}
.responsive-menu>ul li a:hover {
  color: blue;
}
.active {
  border-bottom: 3px solid #1E88E5;
  width: 60px;
}
.cards {
  width: 100%;
  height: auto;
  background-color: #fff;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
  border-radius: 3px;
  min-height: 50px;
}
@media screen and (max-width: 1000px) {
  .right-container {
    display: none;
  }
  div.responsive-menu ul {
    display: inline-flex;
  }
  .global-container {
    margin-top: 10px;
  }
  #left-card {
    display: none;
  }
}
/*When smaller than 767 pixels*/

@media screen and (max-width: 767px) {
  .menu-button {
    display: block;
  }
  .top-nav {
    display: none;
  }
  .left-container {
    display: none;
  }
  .center-container {
    width: 100%;
  }
  #left-card {
    display: inherit;
  }
}
＆＃13; 
<div class="responsive-menu">
  <ul>
    <li id="left-card"><a href="#tab-1">Left</a>
    </li>
    <li id="center-card" class="active"><a href="#tab-2">Middle</a>
    </li>
    <li id="right-card"><a href="#tab-3">Right</a>
    </li>
  </ul>
</div>
<div class="global-container">
  <div class="left-container" id="tab-1">
    <div class="cards">Content for left container goes here</div>
  </div>
  <div class="center-container" id="tab-2">
    <div class="cards">Content for class center container Goes Here</div>
  </div>
  <div class="right-container" id="tab-3">
    <div class="cards">Content for right container goes here</div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

好的，经过测试和工作。

JSfiddle 

$(function() {

  var $lef = $(".left-container");
  var $cen = $(".center-container");
  var $rig = $(".right-container");

  var $cards = $(".responsive-menu li");
  var $lefC = $("#left-card");
  var $cenC = $("#center-card");
  var $rigC = $("#right-card");

  function resize() {

    if (($(window).width() < 1000 || document.width < 1000) && $rigC.hasClass("active")) {
      $rig.show();
    } else {
      $rig.hide();
    };

    if (($(window).width() < 767 || document.width < 767) && !$rigC.hasClass("active")) {
      $lef.hide();
    } else if (($(window).width() > 767 || document.width > 767) && $lefC.hasClass("active")) {
      $cards.removeClass("active");
      $cenC.addClass("active");
      $cen.show();
    } else {
      $lef.show();
    };

    if ($(window).width() > 1000 || document.width > 1000) {
      $lef.add($cen).add($rig).show();
    }
  }
  resize();
  $(window).resize(function() {
    resize();
  });

  $cards.click(function() {
    $(".responsive-menu li").removeClass("active");
    $(this).addClass("active");
  });

  $lefC.click(function() {
    $lef.addClass("show").fadeIn(1000);
    $cen.fadeOut(1000);
    $rig.removeClass("show").fadeOut(1000);
  });

  $rigC.click(function() {
    $lef.removeClass("show").fadeOut(1000);
    $cen.fadeOut(1000);
    $rig.addClass("show").fadeIn(1000);
  });

  $cenC.click(function() {
    if ($(window).width() < 767 || document.width < 767) {
      $lef.removeClass("show").fadeOut(1000);
      $cen.fadeIn(1000);
      $rig.removeClass("show").fadeOut(1000);
    } else {
      $lef.removeClass("show").fadeIn(1000);
      $cen.fadeIn(1000);
      $rig.removeClass("show").fadeOut(1000);
    }

  });


});
.global-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1400px;
  display: flex;
  position: relative;
}
.center-container {
  height: auto;
  margin-bottom: 9px;
  margin-right: 1%;
  margin-left: 1%;
  display: inline-block;
  width: 80%;
}
.left-container {
  float: left;
  width: 28%;
  margin-left: .5%;
  display: none;
}
.right-container {
  float: left;
  width: 28%;
  display: none;
}
.responsive-menu {
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}
.responsive-menu>ul {
  justify-content: space-between;
  list-style-type: none;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  position: relative;
  vertical-align: top;
  width: 100%;
  display: none;
  padding-top: 44px;
}
.responsive-menu>ul li {
  display: block;
  width: 100%;
  -webkit-box-flex: 1;
  flex: 1;
  text-transform: uppercase;
}
.responsive-menu>ul>li {
  line-height: 44px;
  list-style-type: none;
  text-align: center;
  display: inline-block;
  position: relative;
  vertical-align: top;
}
.responsive-menu>ul li a {
  display: block;
  font-size: 12px;
  line-height: 44px;
  position: relative;
  text-align: center;
  width: 100%;
  text-decoration: none;
  color: #000;
}
.responsive-menu>ul li a:hover {
  color: blue;
}
.active {
  border-bottom: 3px solid #1E88E5;
  width: 60px;
}
.cards {
  width: 100%;
  height: auto;
  background-color: #fff;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
  border-radius: 3px;
  min-height: 50px;
}
@media screen and (max-width: 1000px) {
  .global-container {
    margin-top: 75px;
  }
  div.responsive-menu ul {
    display: inline-flex;
  }
  .global-container {
    margin-top: 10px;
  }
  #left-card {
    display: none;
  }
  .right-container.show {
    width: 100%;
    position: absolute;
  }
}
/*When smaller than 767 pixels*/

@media screen and (max-width: 767px) {
  .menu-button {
    display: block;
  }
  .top-nav {
    display: none;
  }
  .center-container {
    width: 100%;
  }
  #left-card {
    display: inherit;
  }
  .left-container.show {
    width: 100%;
    position: absolute;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="responsive-menu">
  <ul>
    <li id="left-card"><a href="#tab-1">Left</a>
    </li>
    <li id="center-card" class="active"><a href="#tab-2">Middle</a>
    </li>
    <li id="right-card"><a href="#tab-3">Right</a>
    </li>
  </ul>
</div>
<div class="global-container">
  <div class="left-container" id="tab-1">
    <div class="cards">LEFT</div>
  </div>
  <div class="center-container" id="tab-2">
    <div class="cards">CENTER</div>
  </div>
  <div class="right-container" id="tab-3">
    <div class="cards">RIGHT</div>
  </div>
</div>

使用fadeIn()和fadeOut()的jQuery动画，隐藏它们，并使用show()和hide()显示和隐藏它们。

相关问题
最新问题