質問編集履歴

3

退会済みユーザー

退会済みユーザー

2019/08/30 17:32  投稿
ドロップダウンメニューの実装
### 前提・実現したいこと
ここに質問の内容を詳しく書いてください。
htmlでサイドメニューを作っています。
メニュー項目をタップすると具体的に分岐するドロップダウンメニュー実装中にドロップダウンメニューが表示されません。
Strategyというメニュー項目を押したら、b1というメニュー項目を表示したいのですが、表示されません。
### 該当のソースコード
```html
header><link rel="stylesheet" type="text/css" href="ham-01.css">
         <div id="nav-drawer">
             <input id="nav-input" type="checkbox" class="nav-unshown">
            <label id="nav-open" for="nav-input"><span></span></label>
             <label class="nav-unshown" id="nav-close" for="nav-input"></label>
         <div id="nav-content" clss="nav">
                 <a href="ev_index.html">test-1</a>
       <a href="ev_exp.html">test-1</a>
       <a href="#">test-3</a>
       <a href="">test-3</a>
       <a href="ev_school.html">test-4</a>
       <a href="ev_access.html">test-5</a>
       <a href="#">test-5</a><br>
       <a href="#" target="top">test-6</a>
       <a href="#"><font color="#00BFFF">test-7</font></a>
<li><a href="#">Strategy</a>  
<ul>  
<li><a href="#">b1</a></li>  
<li><a href="#">b1</a>  
         </div>
   </header>
```
  ```css
   header {
             padding:10px;
       }
       #nav-content a {
             display: block;
             text-align: center;
             width: 80%;
             max-width: 300px;
             margin: 1rem auto;
             padding: 0.5rem 0;
             background: #777;
             color: #fff;
             font-famile: sans-serif;
             text-decoration: none
       }
       #nav-drawer {
             position: fixed;top: 0:left:0;
       }
       /*チェックボックス等は非表示に*/
       .nav-unshown {
             display:none;
       }
       /*アイコンのスペース*/
       #nav-open {
             display: inline-block;
             width: 30px;
             height: 22px;
             vertical-align: middle;
       }
       /*ハンバーガーアイコンをCSSだけで表現*/
       #nav-open span, #nav-open span:before, #nav-open span:after {
             position: absolute;
             height: 3px;/*線の太さ*/
             width: 25px;/*長さ*/
             border-radius: 3px;
             background: #555;
             display: block;
             content: '';
             cursor: pointer;
       }
       #nav-open span:before {
             bottom: -8px;
       }
       #nav-open span:after {
             bottom: -16px;
       }
       /*閉じる用の薄黒カバー*/
       #nav-close {
         display: none;/*はじめは隠しておく*/
         position: fixed;
         z-index: 99;
         top: 0;/*全体に広がるように*/
         left: 0;
         width: 100%;
         height: 100%;
         background: black;
         opacity: 0;
         transition: .3s ease-in-out;
       }   
       /*中身*/
       #nav-content {
             overflow: auto;
         position: fixed;
         top: 0;
         left: 0;
         z-index: 9999;/*最前面に*/
        width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
         max-width: 330px;/*最大幅（調整してください）*/
         height: 100%;
         background: #333;/*背景色*/
         transition: .3s ease-in-out;/*滑らかに表示*/
         -webkit-transform: translateX(-105%);
         transform: translateX(-105%);/*左に隠しておく*/
       }
       /*チェックが入ったらもろもろ表示*/
       #nav-input:checked ~ #nav-close {
         display: block;/*カバーを表示*/
         opacity: .5;
       }
       #nav-input:checked ~ #nav-content {
           -webkit-transform: translateX(0%);
           transform: translateX(0%);/*中身を表示（右へスライド）*/
           box-shadow: 6px 0 25px rgba(0,0,0,.15);
       }
             
       }
       .site-header{
           background: #fff;
           display: flex;
           padding: 60px 20px;
           position: fixed;
           justify-content: space-between;
           width: 100%;
       }
       .site-logo img{
           height: 20px;
           width: auto;
       }
       .gnav__menu{
           display: flex;
       }
       .gnav__menu__item{
           margin-left: 20px;
       }
       .gnav__menu__item a{
           color: #333;
           text-decoration: none;
       }
       .hero{
           max-height: 500px;
           overflow: hidden;
       }
       .hero img{
           height: auto;
           width: 100%;
       }
       .content{
           line-height: 1.6;
           margin: 0 auto;
           padding-top: 100px;
           width: 800px;
       }
       .content p{
           margin-bottom: 40px;
       }
       .site-footer{
           background: #333;
           padding: 80px 0;
       }
       .copyright{
           color: #fff;
           font-size: 12px;
           text-align: center;
       }
    /* 試した事*/
.nav {
 width: 750px;
 height: 40px;
 margin: 0 auto;
 padding: 0;
 display: flex;
}
.nav li {
```
### 試したこと
cssの試した事というコメントから最後まで試しました。
  • HTML

    24973 questions

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

  • CSS

    17804 questions

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

退会済みユーザー

退会済みユーザー

2019/08/30 17:29  投稿
ドロップダウンメニューの実装
### 前提・実現したいこと
ここに質問の内容を詳しく書いてください。
htmlでサイドメニューを作っています。
メニュー項目をタップすると具体的に分岐するドロップダウンメニュー実装中にドロップダウンメニューが表示されません。
### 該当のソースコード
```html
header><link rel="stylesheet" type="text/css" href="ham-01.css">
<div id="nav-drawer">
<input id="nav-input" type="checkbox" class="nav-unshown">
<label id="nav-open" for="nav-input"><span></span></label>
<label class="nav-unshown" id="nav-close" for="nav-input"></label>
<div id="nav-content" clss="nav">
<a href="ev_index.html">test-1</a>
<a href="ev_exp.html">test-1</a>
<a href="#">test-3</a>
<a href="">test-3</a>
<a href="ev_school.html">test-4</a>
<a href="ev_access.html">test-5</a>
<a href="#">test-5</a><br>
<a href="#" target="top">test-6</a>
<a href="#"><font color="#00BFFF">test-7</font></a>
</div>
</header>
```
```css
header {
padding:10px;
}
#nav-content a {
display: block;
text-align: center;
width: 80%;
max-width: 300px;
margin: 1rem auto;
padding: 0.5rem 0;
background: #777;
color: #fff;
font-famile: sans-serif;
text-decoration: none
}
#nav-drawer {
position: fixed;top: 0:left:0;
}
/*チェックボックス等は非表示に*/
.nav-unshown {
display:none;
}
/*アイコンのスペース*/
#nav-open {
display: inline-block;
width: 30px;
height: 22px;
vertical-align: middle;
}
/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
position: absolute;
height: 3px;/*線の太さ*/
width: 25px;/*長さ*/
border-radius: 3px;
background: #555;
display: block;
content: '';
cursor: pointer;
}
#nav-open span:before {
bottom: -8px;
}
#nav-open span:after {
bottom: -16px;
}
/*閉じる用の薄黒カバー*/
#nav-close {
display: none;/*はじめは隠しておく*/
position: fixed;
z-index: 99;
top: 0;/*全体に広がるように*/
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .3s ease-in-out;
}
/*中身*/
#nav-content {
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;/*最前面に*/
width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
max-width: 330px;/*最大幅（調整してください）*/
height: 100%;
background: #333;/*背景色*/
transition: .3s ease-in-out;/*滑らかに表示*/
-webkit-transform: translateX(-105%);
transform: translateX(-105%);/*左に隠しておく*/
}
/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
display: block;/*カバーを表示*/
opacity: .5;
}
#nav-input:checked ~ #nav-content {
-webkit-transform: translateX(0%);
transform: translateX(0%);/*中身を表示（右へスライド）*/
box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
}
.site-header{
background: #fff;
display: flex;
padding: 60px 20px;
position: fixed;
justify-content: space-between;
width: 100%;
}
.site-logo img{
height: 20px;
width: auto;
}
.gnav__menu{
display: flex;
}
.gnav__menu__item{
margin-left: 20px;
}
.gnav__menu__item a{
color: #333;
text-decoration: none;
}
.hero{
max-height: 500px;
overflow: hidden;
}
.hero img{
height: auto;
width: 100%;
}
.content{
line-height: 1.6;
margin: 0 auto;
padding-top: 100px;
width: 800px;
}
.content p{
margin-bottom: 40px;
}
.site-footer{
background: #333;
padding: 80px 0;
}
.copyright{
color: #fff;
font-size: 12px;
text-align: center;
}
/* 試した事*/
.nav {
width: 750px;
height: 40px;
margin: 0 auto;
padding: 0;
display: flex;
}
.nav li {
```
### 試したこと
cssの試した事というコメントから最後まで試しました。
  • HTML

    24973 questions

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

  • CSS

    17804 questions

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

    13587 questions

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

  • JavaScript

    38721 questions

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

退会済みユーザー

退会済みユーザー

2019/08/30 17:25  投稿
ドロップダウンメニューの実装
### 前提・実現したいこと
ここに質問の内容を詳しく書いてください。
htmlでサイドメニューを作っています。
メニュー項目をタップすると具体的に分岐するドロップダウンメニュー実装中にドロップダウンメニューが表示されません。
### 該当のソースコード
```html
header><link rel="stylesheet" type="text/css" href="ham-01.css">
         <div id="nav-drawer">
             <input id="nav-input" type="checkbox" class="nav-unshown">
            <label id="nav-open" for="nav-input"><span></span></label>
             <label class="nav-unshown" id="nav-close" for="nav-input"></label>
         <div id="nav-content" clss="nav">
                 <a href="ev_index.html">test-1</a>
       <a href="ev_exp.html">test-1</a>
       <a href="#">test-3</a>
       <a href="">test-3</a>
       <a href="ev_school.html">test-4</a>
       <a href="ev_access.html">test-5</a>
       <a href="#">test-5</a><br>
       <a href="#" target="top">test-6</a>
       <a href="#"><font color="#00BFFF">test-7</font></a>
         </div>
   </header>
```
  ```css
   header {
             padding:10px;
       }
       #nav-content a {
             display: block;
             text-align: center;
             width: 80%;
             max-width: 300px;
             margin: 1rem auto;
             padding: 0.5rem 0;
             background: #777;
             color: #fff;
             font-famile: sans-serif;
             text-decoration: none
       }
       #nav-drawer {
             position: fixed;top: 0:left:0;
       }
       /*チェックボックス等は非表示に*/
       .nav-unshown {
             display:none;
       }
       /*アイコンのスペース*/
       #nav-open {
             display: inline-block;
             width: 30px;
             height: 22px;
             vertical-align: middle;
       }
       /*ハンバーガーアイコンをCSSだけで表現*/
       #nav-open span, #nav-open span:before, #nav-open span:after {
             position: absolute;
             height: 3px;/*線の太さ*/
             width: 25px;/*長さ*/
             border-radius: 3px;
             background: #555;
             display: block;
             content: '';
             cursor: pointer;
       }
       #nav-open span:before {
             bottom: -8px;
       }
       #nav-open span:after {
             bottom: -16px;
       }
       /*閉じる用の薄黒カバー*/
       #nav-close {
         display: none;/*はじめは隠しておく*/
         position: fixed;
         z-index: 99;
         top: 0;/*全体に広がるように*/
         left: 0;
         width: 100%;
         height: 100%;
         background: black;
         opacity: 0;
         transition: .3s ease-in-out;
       }   
       /*中身*/
       #nav-content {
             overflow: auto;
         position: fixed;
         top: 0;
         left: 0;
         z-index: 9999;/*最前面に*/
        width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
         max-width: 330px;/*最大幅（調整してください）*/
         height: 100%;
         background: #333;/*背景色*/
         transition: .3s ease-in-out;/*滑らかに表示*/
         -webkit-transform: translateX(-105%);
         transform: translateX(-105%);/*左に隠しておく*/
       }
       /*チェックが入ったらもろもろ表示*/
       #nav-input:checked ~ #nav-close {
         display: block;/*カバーを表示*/
         opacity: .5;
       }
       #nav-input:checked ~ #nav-content {
           -webkit-transform: translateX(0%);
           transform: translateX(0%);/*中身を表示（右へスライド）*/
           box-shadow: 6px 0 25px rgba(0,0,0,.15);
       }
             
       }
       .site-header{
           background: #fff;
           display: flex;
           padding: 60px 20px;
           position: fixed;
           justify-content: space-between;
           width: 100%;
       }
       .site-logo img{
           height: 20px;
           width: auto;
       }
       .gnav__menu{
           display: flex;
       }
       .gnav__menu__item{
           margin-left: 20px;
       }
       .gnav__menu__item a{
           color: #333;
           text-decoration: none;
       }
       .hero{
           max-height: 500px;
           overflow: hidden;
       }
       .hero img{
           height: auto;
           width: 100%;
       }
       .content{
           line-height: 1.6;
           margin: 0 auto;
           padding-top: 100px;
           width: 800px;
       }
       .content p{
           margin-bottom: 40px;
       }
       .site-footer{
           background: #333;
           padding: 80px 0;
       }
       .copyright{
           color: #fff;
           font-size: 12px;
           text-align: center;
       }
    /* 試した事*/
.nav {
 width: 750px;
 height: 40px;
 margin: 0 auto;
 padding: 0;
 display: flex;
}
.nav li {
```
### 試したこと
ここに問題に対して試したことを記載してください。
### 補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
cssの試した事というコメントから最後まで試しました。
  • JavaScript

    38721 questions

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

  • HTML

    24973 questions

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

  • CSS

    17804 questions

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

  • jQuery

    13587 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る