0
私はいくつかのコードを一緒に叩いてスライドyの水平ドロップダウンナビゲーションバーを作成しましたが、chromeとfirefoxで動作する間はインターネットエクスプローラでは機能しません。ここにコードがあります。私は本当にすべての助けに感謝します。 Internet ExplorerでまあドロップダウンメニューはInternet Explorerでは動作しません
$(function() {
$(".item").on("click", function() {
$(this)
.next().toggleClass("active");
});
$("#body").css("min-height", "100%");
});section {
width: 150%;
margin: 0px auto;
margin-left:-15px;
font-family: Raleway, sans-serif;
}
.item{
font-size: calc(8px + .8vw);
width:9%;
height: 40px;
float: left;
border-right: 3px solid #333333;
font: monospace;
padding: 10px;
cursor: pointer;
background-color: #B9E3C6;
transform: skew(-20deg);
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
text-align: center;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
font-family: Raleway, sans-serif;
}
.info{
font-size: calc(8px + .8vw);
float: left;
width:0%;
height: 40px;
background: #DEF9E3;
visibility: hidden;
font: monospace;
background-color: gr;
transform: skew(-20deg);
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
text-align: center;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
transition: width ease-out .3s, visibility ease-out .3s;
white-space: nowrap;
overflow:hidden;
padding: 10px 0;
font-family: Raleway, sans-serif;
}
.info.active{
visibility: visible;
width:12%;
font-family: Raleway, sans-serif;
}
.nitem{
font-size: calc(8px + .8vw);
width:9%;
height: 40px;
float: left;
border-right: 3px solid #333333;
font: monospace;
padding: 10px;
cursor: pointer;
background-color: #B9E3C6;
transform: skew(-20deg);
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
text-align: center;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
font-family: Raleway, sans-serif;
}<section>
\t <div class="item"> about <span style='font-size: 1.3vw;'>►</span></div>
\t <div class="info">lab | research</div>
\t <div class="item"> people <span style='font-size: 1.3vw;'>►</span></div>
\t <div class="info">current | alumni</div>
\t
\t <div class="nitem"> publications</div>
\t
\t <div class="nitem"> contact</div>
\t </section>
\t </div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
問題のあるIEのバージョンは何ですか？それは11とEDGEで私のために働く – happymacarts