ページ応答タブ

Question

サイズ変更中のページに対応する3列レイアウトを作成したいと考えています。私はそれがどのようにしてESPNしますか。私は、中程度のサイズでは2つの列しか表示せず、メニューが上にポップアップして、3つ目の列がすべて消えてしまったのを見ることができるようにしたいと思います。それを説明する最善の方法は、ESPNのウェブサイトで、左右にサイズを変更することです。私はディスプレイなしで/ブロックを "onclick"を使用しようとしましたが、それはどのように私がそれを書いていたと動作していませんでした。

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

<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>

Answer 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()とそれらを隠す隠し。