-1
どうすればjavascriptをウィンドウ幅に反応させることができますか？
function mobileMenu() {
\t document.getElementById("my_nav_menu").style.cssText = "padding: 0 26px 26px 26px; height: 530px;";
\t document.getElementById("the_overlay").style.cssText = "visibility: visible; opacity: .3;";
\t document.getElementById("the_clicker").style.cssText = "opacity: 0; visibility: hidden; display: none;";
\t document.getElementById("the_closer").style.cssText = "opacity: 1; visibility: visible; display: block;";
}
function closeMenu() {
\t document.getElementById("my_nav_menu").style.cssText = "padding: 0; height: 0;";
\t document.getElementById("the_overlay").style.cssText = "visibility: hidden; opacity: 0;";
\t document.getElementById("the_clicker").style.cssText = "opacity: 1; visibility: visible;";
\t document.getElementById("the_closer").style.cssText = "opacity: 0; visibility: hidden;";
}/* Welcome to Compass. Use this file to write IE specific override styles.
* Import this file using the following HTML or equivalent:
* <!--[if IE]>
* <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
* <![endif]--> */
/* Welcome to Compass. Use this file to define print styles.
* Import this file using the following HTML or equivalent:
* <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> */
/* Welcome to Compass.
* In this file you should write your main styles. (or centralize your imports)
* Import this file using the following HTML or equivalent:
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* line 5, ../../../../.rvm/gems/ruby-2.4.1/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
/* line 22, ../../../../.rvm/gems/ruby-2.4.1/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html {
line-height: 1;
}
/* line 24, ../../../../.rvm/gems/ruby-2.4.1/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
ol, ul {
list-style: none;
}
/* line 26, ../../../../.rvm/gems/ruby-2.4.1/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* line 28, ../../../../.rvm/gems/ruby-2.4.1/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
/* line 30, ../../../../.rvm/gems/ruby-2.4.1/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
quotes: none;
}
/* line 103, ../../../../.rvm/gems/ruby-2.4.1/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
/* line 32, ../../../../.rvm/gems/ruby-2.4.1/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
a img {
border: none;
}
/* line 116, ../../../../.rvm/gems/ruby-2.4.1/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
/*
*
* IMPORTANT OVERS
*
*/
/* line 7, ../sass/partials/_def.sass */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* line 10, ../sass/partials/_def.sass */
body {
width: 100%;
padding: 0;
margin: 0;
}
/*
*
* GENERALS
*
*/
/* line 21, ../sass/partials/_def.sass */
#the_overlay {
position: fixed;
width: 100%;
height: 100%;
background-color: black;
z-index: 900;
visibility: hidden;
opacity: 0;
-moz-transition-duration: 500ms;
-o-transition-duration: 500ms;
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
}
/* line 30, ../sass/partials/_def.sass */
.nav_wrap {
padding: 15px 20px;
background-color: lightblue;
width: 100%;
height: 5em;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
align-items: center;
position: relative;
z-index: 999;
}
/* line 40, ../sass/partials/_def.sass */
.nav_wrap a {
height: 100%;
color: inherit;
}
/* line 43, ../sass/partials/_def.sass */
.nav_wrap a #main_logo {
transition: 300ms;
height: 100%;
width: auto;
}
/* line 47, ../sass/partials/_def.sass */
.nav_wrap a #main_logo:hover {
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
/* line 50, ../sass/partials/_def.sass */
#my_nav_menu {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-justify-content: flex-end;
justify-content: flex-end;
height: 1em;
-moz-transition-duration: 400ms;
-o-transition-duration: 400ms;
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
}
/* line 58, ../sass/partials/_def.sass */
#my_nav_menu .my_nav_links {
text-transform: uppercase;
text-decoration: none;
font: 900 0.9em "Arial", sans-serif;
margin: 0 8px;
transition: 300ms;
}
/* line 64, ../sass/partials/_def.sass */
#my_nav_menu .my_nav_links:hover {
color: red;
}
/* line 67, ../sass/partials/_def.sass */
#my_nav_menu .drop-wrap {
height: 20px;
height: 3em;
position: relative;
}
/* line 71, ../sass/partials/_def.sass */
#my_nav_menu .drop-wrap:hover > .dropper {
padding: 10px;
margin-top: 1.9em;
height: auto;
}
/* line 76, ../sass/partials/_def.sass */
#my_nav_menu .drop-wrap .dropper {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
position: absolute;
width: 10em;
background-color: gold;
overflow: hidden;
transition: 300ms;
padding: 0;
margin-top: 0;
height: 0;
}
/* line 88, ../sass/partials/_def.sass */
#my_nav_menu .drop-wrap .dropper .drops {
padding: 5px 8px;
margin: 0;
}
/*
*
* THE BURGER
*
*/
/* line 99, ../sass/partials/_def.sass */
._burger {
cursor: pointer;
display: none;
-moz-transition-duration: 200ms;
-o-transition-duration: 200ms;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
}
/* line 104, ../sass/partials/_def.sass */
._closewin {
cursor: pointer;
display: none;
-moz-transition-duration: 300ms;
-o-transition-duration: 300ms;
-webkit-transition-duration: 300ms;
transition-duration: 300ms;
}
@media only screen and (max-width: 800px) {
/*
*
* GENERALS
*
*/
/* line 116, ../sass/partials/_def.sass */
.nav_wrap {
width: 100%;
height: 5em;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
align-items: center;
}
/* line 122, ../sass/partials/_def.sass */
.nav_wrap a {
height: 100%;
color: inherit;
}
/* line 125, ../sass/partials/_def.sass */
.nav_wrap a #main_logo {
transition: 300ms;
height: 100%;
width: auto;
}
/* line 129, ../sass/partials/_def.sass */
.nav_wrap a #main_logo:hover {
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
/* line 132, ../sass/partials/_def.sass */
#my_nav_menu {
display: block;
background-color: lightblue;
overflow: hidden;
position: absolute;
top: 80px;
right: 0;
padding: 0;
height: 0;
width: 210px;
z-index: 999;
}
/* line 143, ../sass/partials/_def.sass */
#my_nav_menu .my_nav_links {
margin: 6px;
float: left;
clear: both;
height: auto;
}
/* line 149, ../sass/partials/_def.sass */
#my_nav_menu .drop-wrap {
height: auto;
position: relative;
}
/* line 152, ../sass/partials/_def.sass */
#my_nav_menu .drop-wrap:hover > .dropper {
padding: 0;
margin-top: 0;
height: auto;
}
/* line 157, ../sass/partials/_def.sass */
#my_nav_menu .drop-wrap .dropper {
display: block;
position: relative;
width: auto;
height: auto;
float: left;
clear: both;
}
/* line 164, ../sass/partials/_def.sass */
#my_nav_menu .drop-wrap .dropper .drops {
padding: 0;
margin: 6px;
}
/*
*
* THE BURGER
*
*/
/* line 175, ../sass/partials/_def.sass */
._burger {
display: block;
}
/* line 178, ../sass/partials/_def.sass */
._closewin {
display: none;
}
}<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags-->
<!--meta(http-equiv='refresh' content='1')-->
<title>strangeNav</title>
<!-- THAT SASSY SHIT-->
<link rel="stylesheet" href="stylesheets/style.css">
<!-- FONT AWESOME-->
<script src="https://use.fontawesome.com/7997cedcfb.js"></script>
<script src="javascripts/nav.js"></script>
</head>
<body>
<div id="the_overlay" onclick="closeMenu()"></div>
<div class="nav_wrap"><a href="#"><img id="main_logo" src="http://via.placeholder.com/350x150"></a>
<div id="my_nav_menu"><a class="my_nav_links" href="#">Explore</a>
<div class="drop-wrap"><a class="my_nav_links" href="#">Eat</a>
<div class="dropper"><a class="my_nav_links drops" href="#">Brunch</a><a class="my_nav_links drops" href="#">Lunch</a><a class="my_nav_links drops" href="#">Dinner</a></div>
</div>
<div class="drop-wrap"><a class="my_nav_links" href="#">Play</a>
<div class="dropper"><a class="my_nav_links drops" href="#">Art</a><a class="my_nav_links drops" href="#">Museums</a><a class="my_nav_links drops" href="#">Parks</a></div>
</div>
<div class="drop-wrap"><a class="my_nav_links" href="#">Nightlife</a>
<div class="dropper"><a class="my_nav_links drops" href="#">Bars</a><a class="my_nav_links drops" href="#">Clubs</a></div>
</div>
<a class="my_nav_links" href="#">History</a>
<a class="my_nav_links" href="#">Tours</a>
<a class="my_nav_links" href="#">Video</a>
<a class="my_nav_links" href="#">Shop</a>
<a class="my_nav_links" href="#">About</a>
<a class="my_nav_links" href="#">Contact</a>
</div><i class="fa fa-bars _burger" id="the_clicker" aria-hidden="true" onclick="mobileMenu()"></i><i class="fa fa-times _closewin" id="the_closer" aria-hidden="true" onclick="closeMenu()"></i>
</div>
</body>これが私の最初のスクリプトです。それは非常に基本的ですが、今は私の目的に多少役立っています。私はこのスクリプトが非常にノブの状態であることを知っていますが、私が言ったように、それは私の目的に役立ちます。私の質問です：私は何をしようとするよりスムーズな方法はありますか？
ところで、私はJQUERYを望んでいません...それに対して何も、私はいつもそれを使用します。しかし、私はjavascriptを学ぼうとしています...少なくとも私のウェブサイトをもう少しsnazzyにするには十分です...
私はそれがモバイルとタブレットのためにしたいと思っている方法は何ですか？しかし、ブラウザウィンドウのサイズを変更すると、navメニューのスタイルがデスクトップバージョンに戻らない...
言い換えれば：タブレットとモバイルIDの場合、navメニューの高さは0pxですが、ブラウザがデスクトップにリサイズすると、navメニューが必要になります。
私が追加したスニペットは、現在私が持っているものですが、私はオンラインで見たものをたくさん試しました。私は私が実際に正しく必要としていることを言っていないことを恐れる
JavaScriptは完全にこのために間違ったことです。 CSSのメディアクエリを使用します。 – ceejayoz
質問に直接答えるには、[j *でサイズ変更イベントを処理できます]（https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onresize）、前の2つのコメントほとんどの場合、このためにCSSメディアクエリを使用しているはずです。 – Nick
参考：[メディアクエリの使用]（https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries）と[レスポンシブデザイン]（https://developer.mozilla.org）を参照してください。/ja-US/Apps /プログレッシブ/レスポンシブ）。 – showdev