21.HTML.CSS-ドロップダウンリスト

サイトの紹介と使い方



概要

  1. 筆者は、このドロップダウンリストのコードをこのサイトのトップページのメインメニューに使っています。
  2. 以下のコードを改良すれば、汎用的に使えると思います。
  3. 尚、このドロップダウンリストはHTMLとCSSだけで作りました。

HTML部

<span class="my_dropdown_list">
  <ul>
    <li class="my_dropdown_list_parent">
      <a href="#">概要</a>
      <ul class="my_dropdown_list_child">
        <li><a href="https://aidendo-pilot.com/管理者">自己紹介</a></li>
        <li><a href="https://aidendo-pilot.com/目的-プログラムの学習と教育-二戸-一戸-軽米-九戸">目的</a></li>
        <li><a href="https://aidendo-pilot.com/お問合せページ-お気軽に連絡ください-i-will-answer/">お問合せ</a></li>
      </ul>
    </li>
    <li class="my_dropdown_list_parent">
      <a href="#">初心者</a>
      <ul class="my_dropdown_list_child">
        <li><a href="https://aidendo-pilot.com/cat_parent_パソコンの準備">パソコンの準備</a></li>
        <li><a href="https://aidendo-pilot.com/cat_parent_初めて">初めて</a></li>
        <li><a href="https://aidendo-pilot.com/cat_parent_初心者">初心者</a></li>
      </ul>
    </li>
    <li class="my_dropdown_list_parent">
      <a href="#">WEB</a>
      <ul class="my_dropdown_list_child">
        <li><a href="https://aidendo-pilot.com/cat_parent_wordpress/">wordpress</a></li>
        <li><a href="https://aidendo-pilot.com/cat_parent_サイト構築/">サイト構築</a></li>
        <li><a href="https://aidendo-pilot.com/cat_parent_ECサイト/">ECサイト</a></li>
      </ul>
    </li>
    <li class="my_dropdown_list_parent">
      <a href="#">実務</a>
      <ul class="my_dropdown_list_child">
        <li><a href="https://aidendo-pilot.com/cat_parent_人工知能">人工知能</a></li>
        <li><a href="https://aidendo-pilot.com/cat_parent_スマホアプリ/">スマホアプリ</a></li>
      </ul>
    </li>
    <li class="my_dropdown_list_parent">
      <a href="#">コンピュータの基礎</a>
      <ul class="my_dropdown_list_child">
        <li><a href="https://aidendo-pilot.com/cat_parent_コンピュータの基礎/">8086系</a></li>
      </ul>
    </li>
    <li class="my_dropdown_list_parent">
      <a href="#">数学</a>
      <ul class="my_dropdown_list_child">
        <li><a href="https://aidendo-pilot.com/cat_parent_図形と方程式">図形と方程式</a></li>
        <li><a href="https://aidendo-pilot.com/cat_parent_関数">関数</a></li>
        <li><a href="https://aidendo-pilot.com/cat_parent_最小二乗法">最小二乗法</a></li>
        <li><a href="https://aidendo-pilot.com/cat_parent_順列と組み合わせ">順列と組み合わせ</a></li>
        <li><a href="https://aidendo-pilot.com/cat_parent_巡回セールスマン問題">巡回セールスマン問題</a></li>
      </ul>
    </li>
    <li class="my_dropdown_list_parent">
      <a href="#">プラットフォーム</a>
      <ul class="my_dropdown_list_child">
        <li><a href="https://aidendo-pilot.com/cat_parent_さくらインターネット/">さくらインターネット</a></li>
        <li><a href="https://aidendo-pilot.com/cat_parent_Unix系OS/">Unix系OS</a></li>
      </ul>
    </li>
    <li class="my_dropdown_list_parent">
      <a href="#">プログラム言語</a>
      <ul class="my_dropdown_list_child">
        <li><a href="https://aidendo-pilot.com/プログラム言語について/">プログラム言語について</a></li>
        <li><a href="https://aidendo-pilot.com/cat_parent_html%e3%81%a8css/">HTMLとCSS</a></li>
        <li><a href="https://aidendo-pilot.com/cat_parent_php/">PHP</a></li>
        <li><a href="https://aidendo-pilot.com/cat_parent_オブジェクト指向/">オブジェクト指向</a></li>
        <li><a href="https://aidendo-pilot.com/cat_parent_python/">PYTHON</a></li>
      </ul>
    </li>
    <li class="my_dropdown_list_parent">
      <a href="#">その他</a>
      <ul class="my_dropdown_list_child">
        <li><a href="https://aidendo-pilot.com/cat_parent_エッセイ/">エッセイ</a></li>
        <li><a href="https://aidendo-pilot.com/cat_parent_アーカイブ/">アーカイブ</a></li>
        <li><a href="https://aidendo-pilot.com/ブログ記事の管理とtest/" target="_blank" rel="noopener">ブログ記事の管理とtest</a></li>
<!--        <li><a href="https://aidendo-pilot.com/cat_parent_satoru/">暁</a></li> -->
      </ul>
    </li>
  </ul>
</span>

CSS部

/* 0201 --- ドロップダウンリスト --->*/
.my_dropdown_list{
  width:      auto;
}
.my_dropdown_list_parent{
  display:          inline-block;
  width:            15.0rem;
  height:           3.0rem;
  font-size:        1.5rem;
  font-weight:      normal;
  text-align:       center;
  background-color: #00FFFF;
  list-style:       square-button;
  border-style:     solid;
  border-radius:    1.0rem;
}
.my_dropdown_list_parent:hover{
  background-color: #FFFF00;
}
.my_dropdown_list_parent a{
  text-decoration: none;
}
.my_dropdown_list_child{
  display: none;
  width:   10.0rem;
}
.my_dropdown_list_parent:hover .my_dropdown_list_child{
  display:  block;
  position: absolute;
}
.my_dropdown_list_child li{
  display:  block;
  position: relative;
}
.my_dropdown_list_child li a{
  display:          block;
  position:         relative;
  list-style-type:  inside;
  margin:           -0.2rem 0 -0.4rem -3.0rem;
  width:            15.0rem;
  height:           2.5rem;
  font-size:        1.2rem;
  background-color: #00FF00;
  text-decoration:  none;
  list-style:       square-button;
  border-style:     solid;
  border-radius:    1.0rem;
}
.my_dropdown_list_child li a:hover{
  background-color:	#008000;
}
/*<--- 0201*/
/* <--- 02xx */

表示結果

ステップ1
  1. 赤枠内のメインメニューが表示されます。
ステップ2
  1. 例えば、「概要」にマウスをあてると子メニューが表示されます。

お問合せ・御要望

  • お問合せ
  • トップへ戻る
    タイトルとURLをコピーしました