htmlコーディング、もっともっと知りたくなった

先週、案件をいただきました。ありがたいことです。
そして、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から使う記号を探したら、右上にコードがあります。
下に山がある記号と山が上に向いてる記号の2つ。

で、最初は下層ページを表示したくない
(アコーディオンを畳んでおきたい)ので、

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>

もっともっと知りたいです。大変だけど、楽しいです。

コメントを残す

%d人のブロガーが「いいね」をつけました。