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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

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

Q&A

解決済

1回答

581閲覧

レスポンシブ時にハンバーガーメニューを作りたい

kinako3

総合スコア8

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

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

0グッド

0クリップ

投稿2020/02/03 13:33

今、あるサイトを模写しているのですが、レスポンシブでハンバーガーメニューをクリックしたときに画像のようなメニューを作りたいのですが、何から始めていいのかわかりません。javascriptが必要でしょうか?
イメージ説明
PCサイトは完成しました。

HTML

1<body> 2 <div class="header"> 3 <header> 4 5 <div class="page-header wrapper"> 6 <h1> 7 <a href="index.html"><img class="logo" src="img/logo.png" alt="logo"></a> 8 </h1> 9 <nav> 10 <ul class="main-nav"> 11 <li><a href="#top">TOP</a></li> 12 <li><a href="#product">PRODUCT</a></li> 13 <li><a href="#about">ABOUT</a></li> 14 <li><a href="#news">NEWS</a></li> 15 <li><a href="#contact">CONTACT</a></li> 16 </ul> 17 </nav> 18 19 </div> 20 <div class="m-mainvisual-arrow"> 21 <p>&or;</p> 22 </div> 23 </header> 24コード

CSS

1.header { 2 overflow: hidden; 3 background-color: #f6f6f6; 4} 5header { 6 7 background-image: url(img/main_visual.jpg); 8 9 height: 550px; 10 min-height: 90vh; 11 min-width: 100vh; 12 background-size: cover; 13 background-position: center center; 14 background-repeat: no-repeat; 15 border-bottom-left-radius: 2000px 300px; 16 border-bottom-right-radius: 2000px 300px; 17 margin-left: -100px; 18 margin-right: -100px; 19 padding-left: 100px; 20 padding-right: 100px; 21 22} 23a { 24 text-decoration: none; 25} 26header .logo { 27 width: 277px; 28 height: 72px; 29 margin-left: 30%; 30 margin-top: 20px; 31 transition: 0.5s; 32} 33.logo:hover { 34 opacity: 0.5; 35} 36.main-nav { 37 list-style: none; 38 display: flex; 39 text-transform: uppercase; 40 font-size: 14px; 41 margin-top: 70px; 42 padding-right: 20%; 43} 44.main-nav li { 45 padding-left: 40px; 46 47} 48.main-nav a { 49 color: white; 50 letter-spacing: 1.7px; 51 transition: 0.3s; 52 padding:10px 0; 53} 54.main-nav a:hover { 55 border-bottom:solid 2px white; 56} 57.page-header { 58 59 display: flex; 60 justify-content: space-between; 61 62} 63.m-mainvisual-arrow { 64 text-align: center; 65 padding-top: 25%; 66 color:white; 67 font-size:30px; 68} 69コード

どなたかコードを書いてもらえないでしょうか?

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

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

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

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

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

guest

回答1

0

ベストアンサー

「コードを書いてもらえないでしょうか?」というのはただのお仕事の依頼になってしまうので、かなり反感買うと思いますよ。
参考リンクつけておきますね。
https://saruwakakun.com/html-css/reference/nav-drawer

投稿2020/02/03 15:38

H40831

総合スコア973

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

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

kinako3

2020/02/03 20:30

そうなのですね。無知ですみません。教えていただいたリンクを参考にもう少し考えてみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問