1
私はJavascriptを使い慣れていないので、これに助けを求めるのに約3時間を費やしていて、私に特有のものは何も見つかりません。Javascript if/else文の画面サイズ
私は、デスクトップ上で見たときにナビゲーションオーバーレイが画面の左から100％の幅でスライドするスライドナビゲーションを設計しています。しかし、タブレット/モバイルでは、デバイスの高さの100％まで上から下にスライドします。
ありがとうございました！
/* Open Nav */
function openNav() {
\t \t
\t if (screen.width >= 768) {
document.getElementById("myNav").style.width = "100%";
\t } else {
\t document.getElementById("myNav").style.height = "100%"; \t
\t }
}
\t
/* Close Nav */
function closeNav() {
\t \t
\t if (screen.width >= 768) {
document.getElementById("myNav").style.width = "0%";
\t } else {
\t document.getElementById("myNav").style.height = "0%";
\t }
} /****************************** OVERLAY MENU START ***********************/
.overlay {
/* Height & width depends on how you want to reveal the overlay (see JS below) */
height: 100%;
\t min-height: 500px;
\t width: 100%;
position: fixed; /* Stay in place */
z-index: 1000; /* Sit on top */
left: 0;
\t top: 0;
background-color: #000000;
overflow-x: hidden; /* Disable horizontal scroll */
transition: 0.4s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
/* Position the content inside the overlay */
.overlay-content {
width: 100%; /* 100% width */
\t margin-left:auto;
\t margin-right:auto;
text-align: center; /* Centered text/links */
}
/* The navigation links inside the overlay */
.overlay a {
padding: 22px;
\t font-family: 'gothammedium', Arial, sans-serif;
text-decoration: none;
font-size: 16px;
\t text-transform:uppercase;
\t letter-spacing: 3px;
color: #ffffff;
display: block; /* Display block instead of inline */
transition: 0.3s; /* Transition effects on hover (color) */
\t text-align:center;
}
/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
color: #292929;
\t text-decoration:none;
\t transition: 0.3s; /* Transition effects on hover (color) */
}
/* Position the logo (top) */
.overlay a.logo img {
\t position: absolute;
\t top: 0;
\t left: 0;
\t right: 0;
\t margin-top:45px;
\t margin-left:auto;
\t margin-right:auto;
\t width: 35px;
\t height: 40px;
}
/* Position the close button (bottom) */
.overlay a.closebtn img {
position: absolute;
\t bottom: 0;
\t left:0;
\t right:0;
\t margin-bottom: 50px;
\t margin-left:auto;
\t margin-right:auto;
\t width: 25px;
\t height: 25px;
}
.overlay .main_menu {
\t position:absolute;
\t top:30%;
\t bottom: 70%;
\t left:0;
\t right:0;
\t display:block;
\t margin-left:auto;
\t margin-right:auto;
\t white-space: nowrap;
}
.menu_link {
\t text-align:center;
\t
}
.current_page {
\t white-space: nowrap;
\t color: #292929 !important;
\t text-decoration:none;
}
/****************************** OVERLAY MENU FINISH ***********************/<div id="btns">
<button onClick="openNav();">Open</button>
</div>
<!-- Overlay content -->
<div id="myNav" class="overlay" style="width:0px;">
<div class="overlay-content">
<a class="logo"><img src="images/logo.png" alt="logo"></a>
<!--Website Menu-->
<div class="main_menu">
<a class="menu_link current_page" href="#">work</a>
<a class="menu_link" href="#">about</a>
<a class="menu_link" href="#">contact</a>
</div>
<!--Website Menu End-->
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">
<img src="images/burger-nav-close.png" alt="burger-nav"></a>
</div>
</div>
<!--Overlay End-->私はそれはあなたが必要とするすべてのコードだと思います。あなたがもう必要であれば教えてください:)もう一度、ありがとう！
このコードをどこでもトリガーしていますか？ –
すべての場合に、 'width'と' height'の両方を更新する必要があります。現在のところ、関連すると思われるものだけを更新しますが、これによってカバーされないケースがあります。 –
あなたは何を期待していますか？両方の水平スライドだけ？ –