先週、案件をいただきました。ありがたいことです。
そして、htmlコーディングして、1度目の修正を終え、少し休憩の状態です＾＾
今回、初めてするコーディングがありました。
うまくできず、原因探しをするために色々キーワードを変えてググったり。
文字を変えて「この部分だけを教えてください！」て知り合いに聞いたり。
その中に、個人的にすごい感動した(笑)コーディングがありまして、
ヘッダー内のメニューの中の一つに
マウスオーバーすると
下層ページをアコーディオンで表示させる。
というもの。
なんでだろー。
なんか、自分が作ったものが思うとおりに動いたときって
テンション上がりますよね♪＾＾
jQueryを使うので、</body>の直前にjQueryが使えるようにCDNコードをコピペ。
CDNって、ネット上にあるjQueryに動けって命令を出してくれるありがたいコードです(笑)
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script><nav class="nav">
<ul>
<li class="header_list">
<a href="#">HOME</a>
</li>
<li class="header_list_about">
<a href="#">〇〇〇</a>
<ul class="header_list_sub">
<li ><a href="#">△△△</a></li>
<li><a href="#">□□□</a></li>
</ul>
</li>
<li class="header_list"><a href="#">★★★</a></li>
<li class="header_list"><a href="#">◎◎◎</a></li>
</ul>
</nav>↑ HTMLです。メニューなのでリストで書きます。
この時は下層ページが必要なのはリストの2番目。この部分。
<li class=”header_list_about”><a href=”#”>〇〇〇</a>
このリストの中に下層ページリストを作ります。
<li class="header_list_about">
<a href="#">〇〇〇</a>
<ul class="header_list_sub">
<li><a href="#">△△△</a></li>
<li><a href="#">□□□</a></li>
</ul>
</li>で、CSS ↓
.header_list_about:before,
.header_list_about .active:before{
font-family:"Font Awesome 5 Free";
position:absolute;
top:30%;
right:-15px;
}
.header_list_about:before{
content:"\f107";
right:3px;
}
.header_list_about.active:before{
content:"\f106";
right:3px;
}
.header_list_sub{
display: none;
}
.header_list_about{
position:relative;
}
.header_list_sub{
overflow:hidden;
position: absolute;
left:0;
top:0;
padding-top:10px;
width:100%;
min-height:0;
height:0;
z-index:3;
transition:height 0.5s;
background-color: #FFFFFF;
margin: 20px 0 0 -10px;
}
.header_list_sub{
pointer-events:none;
}アコーディオンに矢印つけたいので
FontAwesomeの記号を使います。
好きなんです。FontAwesome(笑)
開いた時と閉じた時の矢印の向きは変わるので、
1行目～15行目の指定をしました。
class名が長くてすみません。見づらいかも。
短くすると自分でこんがらがるので、長くなりました
この場所にFontAwesomeを使うよ。の指定をします。
FontAwesomeのHPから使う記号を探したら、右上にコードがあります。
下に山がある記号と山が上に向いてる記号の２つ。
で、最初は下層ページを表示したくない
（アコーディオンを畳んでおきたい）ので、
display:none; を header_list_sub に指定します。
で、ヘッダーメニューなので、アコーディオンを開くたびにヘッダーの高さが変わってしまいました。
ので、ヘッダーの高さを変えないようにpositionで固定します。
header_list_aboutには基準となるようにposition:relative;
header_list_subはその下に開くのでposition:absolute;
を指定します。
header_list_subは開いたときに見やすいようにpaddingを入れたり
高さを指定したりします。
その時にpositionを使ったけれど、topは0にした方がいいです。
top:3px;など、隙間を開けるためにトップ位置を指定してしまうと
header_list_aboutと別要素。と判断するらしく、
下層ページ上にマウスオーバーするとアコーディオンが閉じちゃいます。
隙間を開けたいならpaddingで。
で、一瞬で開け閉めするより気持ちゆっくり開け閉めしてほしいので
transitionを使います。
で、スマホでは開け閉めしたいけどフルページでは開け閉めしたくない。
またはフルページでは開け閉めしたいけどスマホでは開け閉めしなくていい
という場合のみ最後の3行を追加します。
さっき、FontAwesomeを使うって話をしました。
次はFontAwesomeを読み込むためのコードを
jQueryのCDNコードを入れた所にコピペします。
私は何となくjQueryのCDNコードの下に
FontAwesomeのコードをコピペしたけど、逆でも構いません。
こんな感じです ↓
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>で、その次に自分でjQueryのコードを入れます。
先ほども書いたようにhtmlの中の下の方
</footer>と</body>の間に上記のCDNコードを書き
その下に<script></script>を書いて、この中に
自作のコードを入れるという決まりがあります。
jQueryのコードはこれ ↓
$(function(){
$('.header_list_about').hover(function(){
$(this).toggleClass('active');
$('.header_list_sub').toggleClass('active');
});
});header_list_aboutをマウスオーバーした時に次の操作を行う
これをマウスオーバーしたらactiveクラスが付き、マウスが離れたら閉じる
それに合わせてheader_list_subにもactiveクラスが付き、開いたり閉じたりする
となります。
<script>の部分を</footer>から</body>までがこちら ↓
</footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>
<script>
$(function(){
$('.header_list_what').hover(function(){
$(this).toggleClass('active');
$('.header_list_sub').toggleClass('active');
});
});
</script>
</body>もっともっと知りたいです。大変だけど、楽しいです。
