トップ・ページの表示 注意書きの表示 掲示板に書き込む前に必ず この ”注意書き”を お読み下さい.

"Twilight"

Index Menu
(1)<FirstTitle>:JavaFXデモ/Sceneの遷移 <FirstUser>:amanojaku@管理人 (1)<FirstTitle>:Javaデモ/うるう年 <FirstUser>:amanojaku@管理人

   
   

ページの表示順:{ 新しい順/ 古い順}.
初期・ページの表示・位置:{ 先頭ページ/ 末尾ページ}.
1ページ内のスレッド表示数:











<Number>: [0000029F]  <Date>: 2022/01/11 00:41:39
<Title>: CSSデモ/アコーディオン・メニュー021
<Name>: amanojaku@管理人



1ヵ所しか開かないアコーディオン・メニュー。
逆に使いにくいかもしれない。

改造する場合に注目する所は「Tab-ggg」、「Tab-ggg-sss」です。
「ggg」はグループ番号、「sss」はシリアル番号。

実際のページ
http://xd305417.html.xdomain.jp/demo/Accordion021.htm


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!--
metaタグでcharsetをUTF-8に設定しています。
(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
-->
  <title></title>
  <style>
    .Accordion_Container {
      width: 90%;
      margin: 0 auto;
    }
 
    .Accordion_Label_Opener {
      display: block;
      font-weight: bold;
      color: #fef;
      background: #0bb;
      margin: 0.1rem 0;
      padding: 0.2em 1em;
    }
 
    .Accordion_Label_Closer {
      display: none;
      font-weight: bold;
      color: #767;
      background: #8f8;
      margin: 0.1rem 0;
      padding: 0.2em 1em;
    }
 
    .Accordion_Content {
      display: none;
      border: solid thin #000;
    }
 
    .Accordion_Checkbox:checked+.Accordion_Label_Opener {
      font-weight: bold;
      color: #767;
      background: #0f7;
    }
 
    .Accordion_Radio:checked+.Accordion_Label_Opener+.Accordion_Label_Closer+.Accordion_Content {
      display: block;
    }
 
    .Accordion_Radio:checked+.Accordion_Label_Opener+.Accordion_Label_Closer {
      display: block;
    }
 
    .Accordion_Radio:checked+.Accordion_Label_Opener {
      display: none;
    }
 
    .Accordion_Label_Opener:hover {
      font-weight: bold;
      color: #767;
      background: #5ef;
    }
 
    .Accordion_Label_Closer:hover {
      font-weight: bold;
      color: #767;
      background: #5ef;
    }
 
    .Accordion_Container>input[type="radio"] {
      display: none;
    }
  </style>
</head>
<body>
  <div class="Accordion_Container">
    <input id="Tab-001" type="radio" name="Tab-001" class="Accordion_Radio" checked>

    <input id="Tab-001-001" type="radio" name="Tab-001" class="Accordion_Radio">
    <label class="Accordion_Label_Opener" for="Tab-001-001">001-001</label>
    <label class="Accordion_Label_Closer" for="Tab-001">001-001</label>
    <div class="Accordion_Content">
      いろはにほへと<br>
      ちりぬるをわかよたれそ<br>
      つねならむうゐのおくやま<br>
      けふこえてあさきゆめみし<br>
      ゑひもせす<br>
    </div>
 
    <input id="Tab-001-002" type="radio" name="Tab-001" class="Accordion_Radio">
    <label class="Accordion_Label_Opener" for="Tab-001-002">001-002</label>
    <label class="Accordion_Label_Closer" for="Tab-001">001-002</label>
    <div class="Accordion_Content">
      ちりぬるをわかよたれそ<br>
      つねならむうゐのおくやま<br>
      けふこえてあさきゆめみし<br>
      ゑひもせす<br>
    </div>
 
    <input id="Tab-001-003" type="radio" name="Tab-001" class="Accordion_Radio">
    <label class="Accordion_Label_Opener" for="Tab-001-003">001-003</label>
    <label class="Accordion_Label_Closer" for="Tab-001">001-003</label>
    <div class="Accordion_Content">
      つねならむうゐのおくやま<br>
      けふこえてあさきゆめみし<br>
      ゑひもせす<br>
    </div>
  </div>
</body>
</html>


<Number>: [000002A5]  <Date>: 2022/01/11 02:47:29
<Title>: CSSデモ/アコーディオン・メニュー031
<Name>: amanojaku@管理人



1ヵ所しか開かないアコーディオン・メニュー。
逆に使いにくいかもしれない。
transitionで ちょっぴりアニメーション風の装飾をしている。

改造する場合に注目する所は「Tab-ggg」、「Tab-ggg-sss」です。
「ggg」はグループ番号、「sss」はシリアル番号。

実際のページ
http://xd305417.html.xdomain.jp/demo/Accordion031.htm


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!--
metaタグでcharsetをUTF-8に設定しています。
(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
-->
  <title></title>
  <style>
    .Accordion_Container {
      width: 90%;
      margin: 0 auto;
    }

    .Accordion_Label_Opener {
      display: block;
      font-weight: bold;
      color: #fef;
      background: #0bb;
      margin: 0.1rem 0;
      padding: 0.2em 1em;
    }

    .Accordion_Label_Closer {
      display: none;
      font-weight: bold;
      color: #767;
      background: #8f8;
      margin: 0.1rem 0;
      padding: 0.2em 1em;
    }

    .Accordion_Content {
      display: block;
      border: solid thin #000;
      transform: scaleY(0);
      height: 0px;
    }

    .Accordion_Checkbox:checked+.Accordion_Label_Opener {
      font-weight: bold;
      color: #767;
      background: #0f7;
    }

    .Accordion_Radio:checked+.Accordion_Label_Opener+.Accordion_Label_Closer+.Accordion_Content {
      display: block;
      transition: none 0.3s linear 0s;
      /*transition: property duration timing-function delay;*/ 
      transition-property: transform;
      transform: scaleY(1);
      height: auto;
    }

    .Accordion_Radio:checked+.Accordion_Label_Opener+.Accordion_Label_Closer {
      display: block;
    }

    .Accordion_Radio:checked+.Accordion_Label_Opener {
      display: none;
    }

    .Accordion_Label_Opener:hover {
      font-weight: bold;
      color: #767;
      background: #5ef;
    }

    .Accordion_Label_Closer:hover {
      font-weight: bold;
      color: #767;
      background: #5ef;
    }

    .Accordion_Container>input[type="radio"] {
      display: none;
    }

  </style>
</head>
<body>
  <div class="Accordion_Container">
    <input id="Tab-001" type="radio" name="Tab-001" class="Accordion_Radio" checked>

    <input id="Tab-001-001" type="radio" name="Tab-001" class="Accordion_Radio">
    <label class="Accordion_Label_Opener" for="Tab-001-001">001-001</label>
    <label class="Accordion_Label_Closer" for="Tab-001">001-001</label>
    <div class="Accordion_Content">
      いろはにほへと<br>
      ちりぬるをわかよたれそ<br>
      つねならむうゐのおくやま<br>
      けふこえてあさきゆめみし<br>
      ゑひもせす<br>
    </div>

    <input id="Tab-001-002" type="radio" name="Tab-001" class="Accordion_Radio">
    <label class="Accordion_Label_Opener" for="Tab-001-002">001-002</label>
    <label class="Accordion_Label_Closer" for="Tab-001">001-002</label>
    <div class="Accordion_Content">
      ちりぬるをわかよたれそ<br>
      つねならむうゐのおくやま<br>
      けふこえてあさきゆめみし<br>
      ゑひもせす<br>
    </div>

    <input id="Tab-001-003" type="radio" name="Tab-001" class="Accordion_Radio">
    <label class="Accordion_Label_Opener" for="Tab-001-003">001-003</label>
    <label class="Accordion_Label_Closer" for="Tab-001">001-003</label>
    <div class="Accordion_Content">
      つねならむうゐのおくやま<br>
      けふこえてあさきゆめみし<br>
      ゑひもせす<br>
    </div>
  </div>
</body>
</html>

Block( Address 000002A5 Identity 0000029E )










ページの表示順:{ 新しい順/ 古い順}.
初期・ページの表示・位置:{ 先頭ページ/ 末尾ページ}.
1ページ内のスレッド表示数:

   
   

管理者用 Password:

  




SMT Version 8.022(+A) Release M6.
Author : amanojaku.