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

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

ただいまの
回答率

87.34%

スマホの時だけ、横からでてくるスライドメニューを実装したいです....。

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,900

score 6

前提・実現したいこと

PCメニューは、横並びの並列メニューで、レスポンシブの時だけ横からスライドするメニューを実装したいです。
(メインコンテンツもスライドするパターンです。)

なお、pcの時には、横並びの並列メニューの上にロゴがあります。

私は、javascriptが全くと言っていいほどわかりませんので、できればコードを頂きたいです。
よろしくお願いいたします。

発生している問題・エラーメッセージ

------pc画面------
pc画面

------スマホ画面------
現在の表示
現在の表示

下記のようにしたいのです。
やりたいこと

該当のソースコード

****html****
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body id="contents">
<header>
      <div class="headerinner">
    <h1>タイトルタイトル</h1>
    <div class="logoarea"> ロゴエリア </div>
      </div>
</header>
<div id="wrapper">
  <nav class="menu">
    <ul>
      <li><a href="#">MENU</a></li>
      <li><a href="#">MENU</a></li>
      <li><a href="#">MENU</a></li>
      <li><a href="#">MENU</a></li>
      <li><a href="#">MENU</a></li>
    </ul>
  </nav>
  <button type="button" id="nav-btn" class="hamburger"> <span class="bdr"></span> <span class="bdr"></span> <span class="bdr"></span> </button>
  <div>
    <div class="flexbox">
      <div class="item">テキストテキストテキストテキストテキストテキストテキストテキスト</div>
      <div class="item">テキストテキストテキストテキストテキストテキストテキストテキスト</div>
      <div class="item">テキストテキストテキストテキストテキストテキストテキストテキスト</div>
      <div class="item">テキストテキストテキストテキストテキストテキストテキストテキスト</div>
      <div class="item">テキストテキストテキストテキストテキストテキストテキストテキスト</div>
      <div class="item">テキストテキストテキストテキストテキストテキストテキストテキスト</div>
    </div>
  </div>
</div>
<!-- wrapper -->

<footer> footer </footer>
<script type = "text/javascript">

(function () {

  //ハンバーガーボタンクリック時の関数
  //querySelector:CSSセレクタで要素を取得
  const $hamburger = document.querySelector('.hamburger');
  //addEventListener:イベント処理(click)
  $hamburger.addEventListener('click', function(){
    //ON時はis-activeクラス付与、OFF時はis-activeクラス削除
    $hamburger.classList.toggle('is-active')
  });

  //全体を囲む要素をid[#wrapper]で指定
  const $wrapper = document.getElementById('wrapper');
  //メニューオープン・クローズのボタン要素をid[nav-btn]で指定
  const $navBtn = document.getElementById('nav-btn');

  //クリックしたら navToggle関数実行
  $navBtn.addEventListener('click', navToggle);

  //navToggleの関数
  function navToggle() {
    //contains:文字列が引数に指定した文字列を含まれているかどうか[nav-open]
    if ($wrapper.classList.contains('nav-open')) {
      //メニュークローズ時
      navCloseFunc();
    } else {
      //メニューオープン時
      navOpenFunc();
    }
  }

  //メニューオープン時の関数
  function navOpenFunc() {
    //wrapperのclass[nav-open]付与
    $wrapper.classList.add('nav-open');
  }
  //メニュークローズ時の関数
  function navCloseFunc() {
    //wrapperのclass[nav-open]削除
    $wrapper.classList.remove('nav-open');
  }

})();
</script>
</body>
</html>
****css***
* {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
a {
    color: #000;
    text-decoration: none;
}
h1 {
    font-size: 0.5em;
}
#wrapper {
    font-size: 1.2rem;
    width: 100%;
    text-align: center;
}
#contents {
    transform: translateX(0);
    transition: .4s transform;
}
#contents {
    background-color: #fff;
}
#nav-btn {
    display: none;
    outline: none;
}
.menu ul {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #5994FF;
}
.menu ul li {
    padding: 0 20px;
    transition: all .5s;
}
.menu ul li a {
    position: relative;
    display: inline-block;
    text-decoration: none;
}
.menu ul li a:after {
    position: absolute;
    bottom: -4px;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    background: #333;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: transform .3s;
}
.menu ul li a:hover::after {
    transform: scale(1, 1);
}

@media screen and (max-width: 768px) {
#nav-btn {
    display: block;
    position: fixed;
    z-index: 11;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
}
.hamburger {
    position: relative;
    display: block;
    width: 50px;
    height: 44px;
}
.hamburger .bdr {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background: #000;
    transition: all .5s;
}
.hamburger .bdr:nth-child(1) {
    top: 0;
}
.hamburger .bdr:nth-child(2) {
    top: 20px;
}
.hamburger .bdr:nth-child(3) {
    bottom: 0;
}
.hamburger.is-active .bdr {
    background: #000;
}
.hamburger.is-active .bdr:nth-child(1) {
    transform: translateY(20px) rotate(-45deg);
}
.hamburger.is-active .bdr:nth-child(2) {
    opacity: 0;
}
.hamburger.is-active .bdr:nth-child(3) {
    transform: translateY(-20px) rotate(45deg);
}
.menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 150px;
    height: 100%;
    padding-top: 70px;
    text-align: left;
    font-size: 13px;
    background: #5994FF;
    z-index: 1;
    transform: translateX(150px);
    transition: .4s all;
}
.menu ul {
    display: block;
    width: 150px;
    line-height: 70px;
    background: none;
    color: #000;
    text-align: center;
}
.menu ul li {
    transition: all .5s;
}
.menu ul li:hover {
    background: #fff;
}
.menu ul li a:after {
    display: none;
}
.nav-open .menu {
    transform: translateX(0);
}
.nav-open #contents {
    transform: translateX(-150px);
}
}

@media screen and (min-width: 768px) {
nav.menu {
    margin-bottom: 1.5em;
}
}
header {
    margin-bottom: 1.5em;
}
.flexbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    max-width: 980px;
    margin: 0 auto;
}
.headerinner {
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
}
.item {
    width: 33%;
    height: 200px;
    background: #83C3FF;
    display: block;
    margin-bottom: 10px;
}
.logoarea {
    width: 200px;
    height: 66px;
    color: #fff;
    line-height: 66px;
    background: #3D4490;
    margin: 0 auto;
}
footer {
    background: #3D4490;
    color: #ffffff;
    text-align: center;
    padding: 1em;
    margin-top: 1.5em;
}

試したこと

bodyタグに、contentsのクラス名を移動しました。

補足情報(FW/ツールのバージョンなど)

このサイト(https://www.evoworx.co.jp/blog/drawer/)を参考にして実装を試みました。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    2019/08/12 00:31

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

  • dyoshikawa

    2019/08/12 08:57 編集

    javascriptが全くわからないのなら、まずはjavascriptの入門書を通してください。
    それが学習だと思いますし、それをやらないのであれば作業依頼です。

    キャンセル

  • marlboro_tata

    2019/08/12 21:54

    もう一度、参考にしたサイトのコードに立ち返りましょう。ポイントは、メニューボタンを押してた時にメニューと連動して動いているのは div#contents の中身であるということです。参考サイトのコードをコピペして、メニューを開いた時に連動して動いて欲しい要素は全て div#contents の中に記述してみてください。(もう少し詳しく言えば div#wrapper に .nav-open と言うクラス名がついたり外れたりすることで動く仕掛けです。JSはこの挙動について書いてあるものです。div#wrapper の中に div#contents があるという構造は保たなければならないので、#contents を body 要素に付与しても意味がないです。)javascript は言語なので、書けなくても、ここまで丁寧に書かれてあるものであれば、コツを掴めば「読めます」。読むことができるようになれば、何をしているのかがわかるので、活用もできます。頑張りましょう。

    キャンセル

回答 1

+2

誰も掲載のURLのようなものを作りたいとは言っていないので、

javascriptが全くと言っていいほどわかりません

ならばCSSだけで作りましょう

デザイン性は最低限しか考えてません、

<header>
  <img src=https://placehold.jp/500x100.png alt=>
  <div class=menu>
    <a href=#>ABC</a>
    <a href=#>DEF</a>
    <a href=#>GHI</a>
    <a href=#>JKL</a>
  </div>
  <div class=menu-background></div>
</header>
* {
  margin: 0;
  padding: 0
}
@media screen and (max-width:680px) { 
  header img {
    height:50px
  }
  a {
    display: block
  }
  .menu::before {
    background-color: #f1f3f5;
    color: #333;
    content: "≡";
    display: block;
    font-size: 50px;
    height: 50px;
    line-height: 50px;
    position: absolute;
    right: 100%;
    text-align: center;
    top: 0;
    width: 50px
  }
  .menu:hover {
    transform: translate(-300px)
  }
  .menu-background {
    background-color: #333;
    display: block;
    height: 100%;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: all 0.3s linear 0s;
    width: 100%;
    z-index: -1
  }
  .menu:hover + .menu-background {
    opacity: 0.5;
    z-index: 999
  }
  .menu {
    background-color: #fff;
    box-sizing: border-box;
    height: 100%;
    padding: 10px 40px;
    position: fixed;
    right: -300px;
    top: 0;
    transition: transform 0.3s linear 0s;
    width: 300px;
    z-index: 1000
}
}
@media screen and (min-width:681px) { 
  header {
    text-align: center
  }
  a {
    margin: 0 1em
  }
}

これらを組むとこんな感じになります。

参考元

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/12 00:12 編集

    回答ありがとうございます。
    上記の形も検討したいとおもいます。

    質問内容を『質問への追記・修正』を元に修正しましたので、そちらもご確認いただけると幸いです。

    キャンセル

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

  • ただいまの回答率 87.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る