Q&A
ご回答ありがとうございます。
こちら現在検証しています。
結果が出たらこちらでまた報告いたします。
現在、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>
回答2件
0
タイトルにだけ答えます。
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 11:49
総合スコア80875
0
私はガッツリ手打ちなのでBootstrap無視ですが
cssだけでいけますよ
検証していないので確実ではありませんが、、、
ザックリと方向性だけ
一設定が面倒なので ulをラップ
html
1<div class="wrap"> 2 <ul id="links01"> 3 <li><a href="">概要</a></li> 4 <li><a href="">準備</a></li> 5 <li><a href="">安全</a></li> 6 <li><a href="">マネープラン</a></li> 7 </ul> 8</div>
- メニューの横並びを解除
- .wrap ⇒ height と width で画面一杯にして、transform で画面上(外)に移動
- label を positionで固定。
- .menu_bar01:checked + .wrap ⇒ .wrap を transformで画面に下してくる
あとは
.wrap もpositionかけてlabelが上になるように
.wrap とulの位置調整
transitionでスライドの時間を調整
という感じでしょうか^^
投稿2020/07/05 13:36
編集2020/07/05 15:29
総合スコア676
先日はお世話になりました。
頂いた回答をもとに色々してみました。
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' 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' 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で作成したときには現れません。ただ、その場合にはアコーディオンが機能しなくなってしまいました。
もし、上記について、アドバイスいただけましたら幸いと思います。
よろしくお願いいたします。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/07/05 11:54 編集
2020/07/05 11:57
2020/07/05 11:58
2020/07/06 07:22
2020/07/06 10:00