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

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

ただいまの
回答率

88.91%

Airbnbのヘッダー(ナビゲーションメニュ)はJqueryを使わないとできませんか?

受付中

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 332

yuiran

score 3

現在、Airbnbのサイト模写をしています。

https://www.airbnb.jp/host/homes?_set_bev_on_new_domain=1584630624_ZTBiZjM2ZDZiMWU0

最後の砦となっているのは、ヘッダー(またはナビゲーション)部分です。

携帯〜PCサイズ(横幅1127px)くらいまでは、左上にあるロゴをクリックすると
上から、collapsメニューがスルスル通りてくるものです。

横幅1128px以上からだと、ヘッダーメニューは、サイトの上部に表示されています。

問題は、携帯〜PCサイズ(横幅1127px)の部分なのですが
現在ついている先生的にはこの模写はHTMLとCSS(フレックスボックスやBootstrap4)の知識を使って行うこと、
とのことで、Jqueryは使わないでしてほしいそうです。
(先生には、いろいろあって詳しい質問ができない状態です)

私の方でもいろいろ調べたのですが、上記のようにヘッダーを作成する場合は、Jqueryを使う方法が数多く検索されます。

cssのみの場合だと、ハンバーガーメニューにする方法で記載があるのですが
それだと、エアビーサイトのようにロゴをクリックすると、ページの上端からスルスルとページが降りて
クリックしたロゴ部分の位置や機能(クリックして、メニューを出し入れする)が保持されているという方法ではなく、クリックしたロゴの下の領域から、アコーディオンでメニューが出てくる感じになります。

私が模写しようとしている、部分は、Jqueryの機能を使わないとできないものでしょうか?
それとも、CSSまでの知識でできるのでしょうか?

もし、できるのなら具体的な方法を教えていただけますと助かります。

よろしくお願いたします。

現在試したコード
<div class="jumbotron jumbotron-fluid"> 
<header>
<div class="menu fixed-top">
<label for="menu_bar01"><i class="fab fa-airbnb fa-2x l-arrow"><i class="fas fa-angle-down fa-3x"></i></i></label> 
<input type="checkbox" id="menu_bar01" class="accordion" />
<ul id="links01">
<li><a href="">概要</a></li>
<li><a href="">準備</a></li>
<li><a href="">安全</a></li>
<li><a href="">マネープラン</a></li>
</ul>
</div>
</header>

</div>

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

+3

タイトルにだけ答えます。

Airbnbのヘッダー(ナビゲーションメニュ)はJqueryを使わないとできませんか?

jQueryはJavaScriptのライブラリなので、JavaScriptで書かれています。
なので、極論言うと、jQueryが内部でやっているようなJavaScriptの記述を書けば、できます。
有志が下記のような記事を書いてくれています。

jQuery→JavaScript書き換え一覧表
【脱jQuery!】ネイティブなJavaScript(Vanilla JS)への書き換え方まとめ

しかしおかしいですね。

現在ついている先生的にはこの模写はHTMLとCSS(フレックスボックスやBootstrap4)の知識を使って行うこと、
とのことで、Jqueryは使わないでしてほしいそうです。

BootstrapはガッツリjQueryに依存しているCSSフレームワークのはずですが・・・。
introductionでもslim.minを読み込ませています。
講師がBootstrap4を引き合いに出した意図が良く分かりません。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/07/05 20:58

    面白い記事ですね。ついつい読み込んでしまいました。
    なんだかんだで、、、実務ではまだまだjQueryガッツリ使ってますね。
    4前提のアプリケーションも少なくはないですし。

    キャンセル

  • 2020/07/06 16:22

    ご回答ありがとうございます。実はわたしはネットや書籍などで独学の状態なのです。先生というのは私がそう思って参考にさせているプログラミングの記事を書いている方のことです。まだこの方に直接相談できる状態ではないので、書かれた内容をもとに、類推で勉強しているのです。その情報から、HTMLとCSSの知識の範囲内で模写をしろ、ということかかなと思い取り組んでいるのです。

    キャンセル

  • 2020/07/06 19:00

    情報は自己の解釈ではなく事実を確実におさえてください。少しでも矛盾があれば、書いた通りにしか動かないプログラムには適応できません。

    キャンセル

0

私はガッツリ手打ちなのでBootstrap無視ですが
cssだけでいけますよ

検証していないので確実ではありませんが、、、
ザックリと方向性だけ

一設定が面倒なので ulをラップ

<div class="wrap">
  <ul id="links01">
  <li><a href="">概要</a></li>
  <li><a href="">準備</a></li>
  <li><a href="">安全</a></li>
  <li><a href="">マネープラン</a></li>
  </ul>
</div>
  1. メニューの横並びを解除
  2. .wrap ⇒ height と width で画面一杯にして、transform で画面上(外)に移動
  3. label を positionで固定。
  4. .menu_bar01:checked + .wrap ⇒ .wrap を transformで画面に下してくる

あとは 
.wrap もpositionかけてlabelが上になるように
.wrap とulの位置調整
transitionでスライドの時間を調整

という感じでしょうか^^

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/07/06 16:23

    ご回答ありがとうございます。
    こちら現在検証しています。
    結果が出たらこちらでまた報告いたします。

    キャンセル

  • 2020/07/15 18:10

    先日はお世話になりました。
    頂いた回答をもとに色々してみました。

    HTML
    <div class="jumbotron jumbotron-fluid"> <!--ジャンボトロン-->
    <header>
    <div class="menu fixed-top"> 
    <label for="menu_bar01"><i class="fab fa-airbnb fa-2x l-arrow"><i class="fas fa-angle-down fa-3x"></i></i></label> <!-ロゴ-->
    <input type="checkbox" id="menu_bar01" class="accordion" />
     
    <ul id="links01">
    <li><a href="">概要</a></li>
    <li><a href="">準備</a></li>
    <li><a href="">安全</a></li>
    <li><a href="">マネープラン</a></li>
    </ul>

    </div>
    </header>

    <div class="jh1 container-fluid">
    <h1>Airbnbホストになって、暮らしをレベルアップ</h1>
    </div> <!--container-fluid 終わり-->
    </div> <!--jumbotron jumbotron-fluid 終わり-->

    CSS

    .menu {
    width: 100%;
    position: absolute;
    top:0;
    left: 0;  
    }

    .menu a {
    display: block;
    padding: 15px;
    text-decoration: none;
    color: #000;
    }

    label {
    display: block;
    margin: 0 0 4px 0;
    padding : 15px;
    line-height: 1;
    color :#fff;
    background :;
    opacity:;
    cursor :pointer;
    position: fixed;
    }

    input {
    display: none;
    }

    .menu ul {
    margin: 0;
    padding: 20px 0 0 0 150px;
    background :#f4f4f4;
    list-style: none;
    width: 100%;
    height:auto;
    }

    .menu li {
    height: 0;
    overflow: hidden;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    }

    #menu_bar01:checked ~ #links01 li,
    #menu_bar02:checked ~ #links02 li {
    height: 54px;
    opacity: 1;
    }

    .fa-airbnb {
    color: #008080;
    }

    /*BS4オリジナルcss*/
    .fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    }

    input[type="radio"],
    input[type="checkbox"] {
    box-sizing: border-box;
    padding: 0;
    }

    .btn-group-toggle > .btn input[type="radio"],
    .btn-group-toggle > .btn input[type="checkbox"],
    .btn-group-toggle > .btn-group > .btn input[type="radio"],
    .btn-group-toggle > .btn-group > .btn input[type="checkbox"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
    }

    .input-group-text input[type="radio"],
    .input-group-text input[type="checkbox"] {
    margin-top: 0;
    }

    .custom-checkbox .custom-control-label::before {
    border-radius: 0.25rem;
    }

    .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg&#039; width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
    }

    .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
    border-color: #007bff;
    background-color: #007bff;
    }

    .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg&#039; width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
    }

    .custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: rgba(0, 123, 255, 0.5);
    }

    .custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
    background-color: rgba(0, 123, 255, 0.5);
    }

    /*あまり関係ないかも*/
    .accordion > .card {
    overflow: hidden;
    }

    .accordion > .card:not(:last-of-type) {
    border-bottom: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    }

    .accordion > .card:not(:first-of-type) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    }

    .accordion > .card > .card-header {
    border-radius: 0;
    margin-bottom: -1px;
    }
    /*あまり関係ないかも*/

    これで、ロゴをクリックするとアコーディオンでメニューが現れるのですが、お手本のように、ロゴのクリック前後でロゴの色が白→青に変わったりはしません。これは流石にCSSのみでは無理でしょうか?

    あと、Bootstrap4のCSSの影響かと思うのですが、ページ上部に空白が出てしまいます。
    上部のみ空白行です。
    検証や、指定したクラス名などすべて確認したのですが原因がわからず、BootstrapではないCSSで作成したときには現れません。ただ、その場合にはアコーディオンが機能しなくなってしまいました。

    もし、上記について、アドバイスいただけましたら幸いと思います。

    よろしくお願いいたします。

    キャンセル

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

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

関連した質問

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