質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

7811閲覧

ハンバーガーメニューの固定をしたい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/08/16 06:02

編集2019/08/16 06:03

【概要】
スマホでの、スクロールの際、メニューバーを固定しスクロールしてもついてくる様にしたいのですが、スクロールした際には、消えてしまいました。

試したコード

html

1<header> 2<link rel="stylesheet" type="text/css" href="ham-01.css"> 3 <div id="nav-drawer"> 4 <input id="nav-input" type="checkbox" class="nav-unshown"> 5 <label id="nav-open" for="nav-input"><span></span></label> 6 <label class="nav-unshown" id="nav-close" for="nav-input"></label> 7 <div id="nav-content"> 8 <a href="ev_index.html">HOME</a> 9 <a href="ev_school.html">SCHOOL</a> 10 <a href="ev_access.html">ACCESS</a> 11 <a href="ev_exp.html">EVENT</a> 12 <a href="#">ABOUT THIS SITE</a> 13 </div> 14</header>

css

1 header { 2 padding:10px; 3 /*background: skyblue;*/ 4 } 5 #nav-content a { 6 display: block; 7 text-align: center; 8 width: 80%; 9 max-width: 300px; 10 margin: 1rem auto; 11 padding: 0.5rem 0; 12 background: #777; 13 color: #fff; 14 font-famile: sans-serif; 15 text-decoration: none 16 } 17 #nav-drawer { 18 position: relative; 19 } 20 21 /*チェックボックス等は非表示に*/ 22 .nav-unshown { 23 display:none; 24 } 25 26 /*アイコンのスペース*/ 27 #nav-open { 28 display: inline-block; 29 width: 30px; 30 height: 22px; 31 vertical-align: middle; 32 } 33 34 /*ハンバーガーアイコンをCSSだけで表現*/ 35 #nav-open span, #nav-open span:before, #nav-open span:after { 36 position: absolute; 37 height: 3px;/*線の太さ*/ 38 width: 25px;/*長さ*/ 39 border-radius: 3px; 40 background: #555; 41 display: block; 42 content: ''; 43 cursor: pointer; 44 } 45 #nav-open span:before { 46 bottom: -8px; 47 } 48 #nav-open span:after { 49 bottom: -16px; 50 } 51 52 /*閉じる用の薄黒カバー*/ 53 #nav-close { 54 display: none;/*はじめは隠しておく*/ 55 position: fixed; 56 z-index: 99; 57 top: 0;/*全体に広がるように*/ 58 left: 0; 59 width: 100%; 60 height: 100%; 61 background: black; 62 opacity: 0; 63 transition: .3s ease-in-out; 64 } 65 66 /*中身*/ 67 #nav-content { 68 overflow: auto; 69 position: fixed; 70 top: 0; 71 left: 0; 72 z-index: 9999;/*最前面に*/ 73 width: 90%;/*右側に隙間を作る(閉じるカバーを表示)*/ 74 max-width: 330px;/*最大幅(調整してください)*/ 75 height: 100%; 76 background: #333;/*背景色*/ 77 transition: .3s ease-in-out;/*滑らかに表示*/ 78 -webkit-transform: translateX(-105%); 79 transform: translateX(-105%);/*左に隠しておく*/ 80 } 81 82 /*チェックが入ったらもろもろ表示*/ 83 #nav-input:checked ~ #nav-close { 84 display: block;/*カバーを表示*/ 85 opacity: .5; 86 } 87 88 #nav-input:checked ~ #nav-content { 89 -webkit-transform: translateX(0%); 90 transform: translateX(0%);/*中身を表示(右へスライド)*/ 91 box-shadow: 6px 0 25px rgba(0,0,0,.15); 92 } 93 94 body{ 95 background: #81bcd8; 96} 97.site-header{ 98 background: #fff; 99 display: flex; 100 padding: 60px 20px; 101 position: fixed; 102 justify-content: space-between; 103 width: 100%; 104} 105.site-logo img{ 106 height: 20px; 107 width: auto; 108} 109.gnav__menu{ 110 display: flex; 111} 112.gnav__menu__item{ 113 margin-left: 20px; 114} 115.gnav__menu__item a{ 116 color: #333; 117 text-decoration: none; 118} 119.hero{ 120 max-height: 500px; 121 overflow: hidden; 122} 123.hero img{ 124 height: auto; 125 width: 100%; 126} 127.content{ 128 line-height: 1.6; 129 margin: 0 auto; 130 padding-top: 100px; 131 width: 800px; 132} 133.content p{ 134 margin-bottom: 40px; 135} 136.site-footer{ 137 background: #333; 138 padding: 80px 0; 139} 140.copyright{ 141 color: #fff; 142 font-size: 12px; 143 text-align: center; 144}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

#nav-drawerpositionfixedにして、top: 0;left:0;を追加してください。

投稿2019/08/16 06:16

kyoya0819

総合スコア10429

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/08/16 06:54

完成できましたが、背景色が何もない方がいいのですが、水色になってしまいます。どこで、水色としているのでしょうか?
退会済みユーザー

退会済みユーザー

2019/08/16 06:57

自己解決しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問