ハンバーガーボタンの研究

画像がふわっと出るスクリプト

目標について

ふわっと出て、ふわっと収まるメニューを作ろうと思います。結論からいうと、どうやら、jQueryとCSSを利用するとよいらしい。

どんな知識が必要か？

jQuery＋CSS

display: none;

transition: .5s;

CSSの隣接セレクタでチェックボックスにチェック

ふわっと出てくる部分は「JQuery」がどうしても必要らしい。

【参照サイト】

https://webdesignday.jp/inspiration/technique/css/5316/

トラン十ションの動き制御>>

どうしたらできるのか？

jQuery・CSS

jQueryのtoggleメソッドを利用する事

slideToggle()がよい

やり方は複数あります。

キーワードは何か？

アコーディオンメニュー

jQueryとCSS

アイコンで表示・非表示状態

チェックボックス

レスポンシブレイアウト

【参照】

アコーディオンメニュー+トグルメソッド >>

アコーディオンメニュー見本>>

実際のトグルメソッド

toggle関数を使う

cursor: pointer;

マウスカーソルをリンクポインタに変更します。

参照>>

カーソルの詳細>>

JQuery

構文を覚えておくとよい。

$('セレクタ').on('click',function(){
ここに書く
});

セレクタ・・・どこを動かすのか指定する

「click」・・・この部分は、タイミングを指定できる。

セレクタと内容は「.」でつなぐ

$('.toggle_switch').on('click',function(){
$(this).toggleClass('open');
$(this).next('.toggle_contents').slideToggle();
});

toggleメソッド

3つある事を覚えておきましょう。

fadeToggle()

toggleClass()・・・追加と削除

slideToggle()・・・アコーディオンに使える

.toggleClass

.toggleClass・・・指定したCSSクラスに追加と削除ができます。カンタンに言うと、足したり、ひいたりしてくれる。という事です。

<p class="t_c01">クリックすると、線が付きます>></p>
<p> </p>

.t_test { margin: 4px;
font-size:16px;
font-weight:bolder;
color:blue;
cursor:pointer; }

.highlight { background:yellow; }

スクリプト部分

$("p").click(function () {
$(this).toggleClass("highlight");
});

</script>

pの部分に「highlight」クラスを追加するという意味です。

クリックしたら、テキストを黄色になります。

【テスト】

クリックすると、線が付きます>>

slideToggle

押すと降りてくるメニューを実装できます。アコーディオンメニューというものです。

縦方向にアニメーションしながら表示・非表示することができます。

$("#acMenu dt").on("click", function() {
$(this).next().slideToggle();
});

.slideToggle()・・・スライドアップ、またはダウンができる。

下の部分をスライドアップ・ダウンして、項目を表示したり覆い隠したりできる。

アコーディオンメニュー: openメニュー
アコーディオンメニュー: openメニュー
アコーディオンメニュー: openメニュー

トグルの使い方

クリックすると表示が消えたり、表示されたりします

クリックすると、表示されるスクリプトです。画像が消えます。

JQueryを利用すると、スライドが美しいです。cssだけでやろうとすると、かなり面倒なので、おすすめしません。

<p class="click01">ここをクリック</p>
<ul class="pho">
<li>こんにちわ</li>
<li>こんにちわ</li>
<li>こんにちわ</li>
</ul>

click01{
display: block;/*ブロックにすると幅がwidth通りになる*/
cursor:pointer;
background-color:#38D7DF;
line-height:50px;
text-align:center;
width: 200px;
height: 50px;
font-size: 0.8rem;
}

クリックする場所を<a>タグを利用しなくても押せるようにします。

cursor:pointer;　などが大事です。

シンプルにphoクラスがついている「ul」を表示したり、消したりができます。

ここをクリック

こんにちわ
こんにちわ
こんにちわ

どう考えてもこちらの方が楽なので、ぜひこちらのスクリプトで試してみてください。

スムージングも美しいですね。

inlineブロック

inline-block要素とは？

要素が平べったく、横に並んでいき、中身はブロックのように表示される。

各要素は、ちょっとづつ違う。

■block

p、div、ul、h1〜h6などのタグの初期値はコレ

横幅いっぱいまで広がる。
縦に並べるのによい

■inline
a、span、imgなどのタグの初期値はコレ

幅や高さは指定できない。

上下のmargin指定はができない。

左右のマージンと、パディングは指定できる。

■inline-block

幅と高さが指定できる。

inlineblockの参照 >>

::afterとは

::afterとは？

要素に「装飾的な内容」を追加するために用いられます

.toggle_switch::after {
content: "";
display: inline-block;
width: 18px;
height: 11px;
background: url(../img/arrow_down.svg) no-repeat center center;
background-size: contain;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 20px;
transition: transform .2s;
}