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

"Twilight"

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

   
   

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











<Number>: [00000281]  <Date>: 2021/12/26 11:02:51
<Title>: CSSデモ/ハンバーガー・メニュー016
<Name>: amanojaku@管理人



下記はページ内ジャンプに対応しています。
下記は ほんのチョッピリだけJavaScriptを使ってますが、最大限 気にならないレベルに抑えて有るので ご安心ください(逆に言うとページ内ジャンプに対応するにはJavaScriptが必須)。
ページ内ジャンプをする場合は、Footerの後に必ず、その「DummyTail」のようなモノを付けることを推奨します(そうしないとFooterに近い所に飛べないので)。

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


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!--
metaタグでcharsetをUTF-8に設定しています。
(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
-->
  <TITLE></TITLE>
  <style>
    :root {
      --Border_Weight_1: calc(1rem / 16);
      --Border_Weight_1p31: calc(var(--Border_Weight_1) * 1.31);
      --InnerRadius: 0.75rem;
      --InnerDiameter: calc(var(--InnerRadius) * 2);
      --OuterRadius: calc(var(--InnerRadius) + var(--Border_Weight_1));
      --OuterDiameter: calc(var(--OuterRadius) * 2);
      --Hamburger_Content_PaddingHorizon: 0.35rem;
      --Hamburger_Content_PaddingVertical: 0.15rem;
      --Hamburger_DummyCloser_Container_PaddingTop:
        calc(var(--Hamburger_Switcher_AbsoluteTop) - var(--Border_Weight_1));
      --Hamburger_Exterior_PaddingTop: var(--Hamburger_DummyCloser_Container_PaddingTop);
      --Hamburger_Switcher_AbsolutePosition: 
      calc(var(--Hamburger_Content_PaddingHorizon) + var(--Border_Weight_1));
      --Hamburger_Switcher_AbsoluteHorizon: var(--Hamburger_Switcher_AbsolutePosition);
      --Hamburger_Switcher_AbsoluteTop: var(--Hamburger_Switcher_AbsolutePosition);
      --Hamburger_EmptySwitcherMask_Width: calc(var(--Hamburger_Switcher_AbsoluteHorizon) + var(--OuterDiameter)); 
      --Hamburger_EmptySwitcherMask_Height: calc(var(--Hamburger_Switcher_AbsoluteTop) + var(--OuterDiameter));
    }

    .Border {
      border: solid thin #000;
    }

    .Display_None {
      display: none;
    }

    .Display_InlineBlock {
      display: inline-block;
    }

    .Position_Relative {
      position: relative;
    }

    .Position_Absolute {
      position: absolute;
    }

    .WhiteSpace_Nowrap {
      white-space: nowrap;
    }

    .UserSelect_None {
      user-select: none;
    }

    .Visibility_Hidden {
      visibility: hidden;
    }

    .Circle_Naked {
      border: none 0 #000;
      border-radius: var(--OuterRadius);
      width: var(--OuterDiameter);
      height: var(--OuterDiameter);
    }

    .Circle_Border {
      box-sizing: border-box;
      border: solid var(--Border_Weight_1) #000;
      border-radius: var(--OuterRadius);
      width: var(--OuterDiameter);
      height: var(--OuterDiameter);
    }

    .Position_Fixed_0_0 {
      position: fixed;
      top: 0;
      left: 0;
    }

    .Radio_HamburgerButton {
      display: none;
    }

    .Hamburger_Container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
    }

    .Hamburger_BaseSwitcher {
      display: inline-flex;
      justify-content: center;
      z-index: 2147483647;
      /* z-indexの最大値 */
      background-color: #0ee;
      box-sizing: border-box;
      border: solid var(--Border_Weight_1) #000;
      border-radius: var(--OuterRadius);
      width: var(--OuterDiameter);
      height: var(--OuterDiameter);
      user-select: none;
    }

    .Hamburger_Opener {
      position: absolute;
      top: var(--Hamburger_Switcher_AbsoluteTop);
      left: var(--Hamburger_Switcher_AbsoluteHorizon);
      /*right: var(--Hamburger_BaseSwitcher_AbsoluteHorizon);*/
    }

    .Hamburger_Closer {
      display: none;
      position: absolute;
      top: var(--Hamburger_Switcher_AbsoluteTop);
      left: var(--Hamburger_Switcher_AbsoluteHorizon);
      /*right: var(--Hamburger_Switcher_AbsoluteHorizon);*/
    }

    .Hamburger_Checkbox:checked~.Hamburger_Closer {
      display: inline-flex;
    }

    .Hamburger_DummyCloser_Container {
      display: flex;
      justify-content: flex-start;
      padding: var(--Hamburger_DummyCloser_Container_PaddingTop) 0 var(--Hamburger_Content_PaddingVertical) 0;
    }

    .Hamburger_DummyCloser {
      border: none 0 #000;
      background-color: #fff;
      /*visibility: visible;*/
      visibility: hidden;
    }

    .Hamburger_Content {
      display: inline-block;
      z-index: 2147483647;
      /* z-indexの最大値 */
      background-color: #0cc;
      position: absolute;
      left: 0;
      top: 0;
      white-space: nowrap;
      box-sizing: border-box;
      border: solid var(--Border_Weight_1) #000;
      border-radius: var(--OuterRadius);
      padding: 0 var(--Hamburger_Content_PaddingHorizon) var(--Hamburger_Content_PaddingVertical) var(--Hamburger_Content_PaddingHorizon);
      transform: translateX(-101%);
    }

    .Hamburger_Checkbox:checked~.Hamburger_Content {
      left: 0;
      transform: translateX(0%);
      transition: 0.3s ease-in-out;
    }

    .Hamburger_Filter {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2147483647;
      /* z-indexの最大値 */
      width: 100%;
      height: 100vh;
      background-color: #000;
      opacity: 0.5;
    }

    .Hamburger_Checkbox:checked~.Hamburger_Filter {
      display: block;
    }

    .DummyTail {
      width: 50vw;
      height: 100vh;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <header>
    <nav class="Hamburger_Container">
      <input type="checkbox" id="Hamburger_Checkbox" class="Hamburger_Checkbox ">
      <div class="Hamburger_Filter"></div>
      <label name="Hamburger_Opener" for="Hamburger_Checkbox" class="Hamburger_Opener Hamburger_BaseSwitcher">
        ≡
      </label>
      <div class="Hamburger_Content UserSelect_None">
        <div class="Hamburger_DummyCloser_Container">
          <label for="Hamburger_Checkbox" class="Hamburger_BaseSwitcher Hamburger_DummyCloser ">
            ×
          </label>
        </div>
        <label for="Hamburger_Checkbox" onclick="location='#iroha';">
          いろはにほへと<br>
        </label>
        <label for="Hamburger_Checkbox" onclick="location='#tunena';">
          つねならむ<br>
        </label>
        <label for="Hamburger_Checkbox" onclick="location='#ehimo';">
          ゑひもせす<br>
        </label>
      </div>
      <label name="Hamburger_Closer" for="Hamburger_Checkbox" class="Hamburger_BaseSwitcher Hamburger_Closer ">
        ×
      </label>
    </nav>
  </header>
  <br>
  いろは歌<br>
  <br>
  <a id="iroha"></a>
  いろはにほへと<br>
  ちりぬるを<br>
  わかよたれそ<br>
  <a id="tunena"></a>
  つねならむ<br>
  うゐのおくやま<br>
  けふこえて<br>
  あさきゆめみし<br>
  <a id="ehimo"></a>
  ゑひもせす<br>
  <br>
  <footer>
    【Footer】
  </footer>
  <div class="DummyTail "></div>
</body>
</html>


<Number>: [00000282]  <Date>: 2022/01/11 00:50:53
<Title>: CSSデモ(+JavaScript)/ハンバーガー・メニュー019
<Name>: amanojaku@管理人



下記はページ内ジャンプに対応しています。
下記は マウス・ホバーに対応していますが、普通のハンバーガー・メニューに慣れていると、逆に使いにくいかもしれません。
ほんの数行のJavaScriptを使ってますが、基本的にはラジオボタンをONしている関数なので、そんなに難しいことは無いでしょう。
ページ内ジャンプをする場合は、Footerの後に必ず、その「DummyTail」のようなモノを付けることを推奨します(そうしないとFooterに近い所に飛べないので)。

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


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!--
metaタグでcharsetをUTF-8に設定しています。
(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
-->
  <TITLE></TITLE>
  <style>
    :root {
      --Border_Weight_1: calc(1rem / 16);
      --Border_Weight_1p31: calc(var(--Border_Weight_1) * 1.31);
      --InnerRadius: 0.75rem;
      --InnerDiameter: calc(var(--InnerRadius) * 2);
      --OuterRadius: calc(var(--InnerRadius) + var(--Border_Weight_1));
      --OuterDiameter: calc(var(--OuterRadius) * 2);
      --Hamburger_Content_PaddingHorizon: 0.35rem;
      --Hamburger_Content_PaddingVertical: 0.15rem;
      --Hamburger_DummyCloser_Container_PaddingTop:
        calc(var(--Hamburger_Switcher_AbsoluteTop) - var(--Border_Weight_1));
      --Hamburger_Exterior_PaddingTop: var(--Hamburger_DummyCloser_Container_PaddingTop);
      --Hamburger_Switcher_AbsolutePosition: 
      calc(var(--Hamburger_Content_PaddingHorizon) + var(--Border_Weight_1));
      --Hamburger_Switcher_AbsoluteHorizon: var(--Hamburger_Switcher_AbsolutePosition);
      --Hamburger_Switcher_AbsoluteTop: var(--Hamburger_Switcher_AbsolutePosition);
      --Hamburger_EmptySwitcherMask_Width: calc(var(--Hamburger_Switcher_AbsoluteHorizon) + var(--OuterDiameter)); 
      --Hamburger_EmptySwitcherMask_Height: calc(var(--Hamburger_Switcher_AbsoluteTop) + var(--OuterDiameter));
    }

    .Border {
      border: solid thin #000;
    }

    .Display_None {
      display: none;
    }

    .Display_InlineBlock {
      display: inline-block;
    }

    .Position_Relative {
      position: relative;
    }

    .Position_Absolute {
      position: absolute;
    }

    .WhiteSpace_Nowrap {
      white-space: nowrap;
    }

    .UserSelect_None {
      user-select: none;
    }

    .Visibility_Hidden {
      visibility: hidden;
    }

    .Circle_Naked {
      border: none 0 #000;
      border-radius: var(--OuterRadius);
      width: var(--OuterDiameter);
      height: var(--OuterDiameter);
    }

    .Circle_Border {
      box-sizing: border-box;
      border: solid var(--Border_Weight_1) #000;
      border-radius: var(--OuterRadius);
      width: var(--OuterDiameter);
      height: var(--OuterDiameter);
    }

    .Position_Fixed_0_0 {
      position: fixed;
      top: 0;
      left: 0;
    }

    .Radio_HamburgerButton {
      display: none;
    }

    .Hamburger_Container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
    }

    .Hamburger_BaseSwitcher {
      display: inline-flex;
      justify-content: center;
      background-color: #0ee;
      box-sizing: border-box;
      border: solid var(--Border_Weight_1) #000;
      border-radius: var(--OuterRadius) ;
      width: var(--OuterDiameter);
      height: var(--OuterDiameter);
      user-select: none;
    }

    .Hamburger_EmptySwitcher {
      display: none;
      position: absolute;
      z-index: 2147483647;
      /* z-indexの最大値 */
      left: var(--Hamburger_Switcher_AbsoluteHorizon);
      top: var(--Hamburger_Switcher_AbsoluteTop);
    }

    .Hamburger_EmptySwitcherMask {
      display: none;
      position: absolute;
      z-index: 2147483647;
      opacity: 0;
      background-color: #000;
      left: 0;
      top: 0;
      /*border-bottom-left-radius: var(--OuterRadius);*/
      border-bottom-right-radius: var(--OuterRadius);
      width: var(--Hamburger_EmptySwitcherMask_Width); 
      height: var(--Hamburger_EmptySwitcherMask_Height);
    }

    .Hamburger_Opener {
      position: absolute;
      z-index: 2147483647;
      /* z-indexの最大値 */
      left: var(--Hamburger_Switcher_AbsoluteHorizon);
      top: var(--Hamburger_Switcher_AbsoluteTop);
    }

    .Hamburger_Closer {
      display: none;
      position: absolute;
      z-index: 2147483647;
      /* z-indexの最大値 */
      left: var(--Hamburger_Switcher_AbsoluteHorizon);
      top: var(--Hamburger_Switcher_AbsoluteTop);
    }

    .Radio_Hamburger_On:checked~.Hamburger_Closer {
      display: inline-flex;
    }

    .Hamburger_Closer:hover {
      display: inline-flex;
    }

    .Hamburger_DummyCloser_Container {
      display: flex;
      justify-content: flex-start;
      padding: 0;
    }

    .Hamburger_DummyCloser {
      border: none 0 #000;
      background-color: #fff;
      visibility: hidden;
      /*visibility: visible;*/
    }

    .Hamburger_Exterior {
      display: inline-block;
      position: absolute;
      z-index: 2147483647;
      /* z-indexの最大値 */
      background-color: #0cc;
      left: 0;
      top: 0;
      margin: 0;
      padding: var(--Hamburger_Exterior_PaddingTop) 0 0 var(--Hamburger_Content_PaddingHorizon);
      box-sizing: border-box;
      border: solid var(--Border_Weight_1p31) #000;
      border-radius: var(--OuterRadius);
      transform: translateX(-101%);
    }

    .Hamburger_Content {
      display: inline-block;
      background-color: #0cc;
      left: var(--Hamburger_Switcher_AbsoluteHorizon);
      top: var(--Hamburger_Switcher_AbsoluteTop);
      margin: 0;
      padding: 0 var(--Hamburger_Content_PaddingHorizon) var(--Hamburger_Content_PaddingVertical) 0;
      border: none 0 #000;
      border-radius: var(--OuterRadius);
      white-space: nowrap;
    }

    .Radio_Hamburger_On:checked~.Hamburger_Exterior {
      transform: translateX(0%);
      transition: 0.3s ease-in-out;
    }

    .Radio_Hamburger_Switch_On:checked~.Hamburger_EmptySwitcher {
      display: inline-flex;
    }

    .Radio_Hamburger_Switch_On:checked~.Hamburger_EmptySwitcherMask {
      display: inline-block;
    }

    .Hamburger_Filter {
      display: none;
      position: absolute;
      z-index: 2147483647;
      /* z-indexの最大値 */
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background-color: #000;
      opacity: 0.5;
    }

    .Radio_Hamburger_On:checked~.Hamburger_Filter {
      display: block;
    }

    .DummyTail {
      width: 50vw;
      height: 100vh;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <header>
    <nav class="Hamburger_Container">
      <input type="radio" name="Radio_Hamburger" id="idRadio_Hamburger_On" class="Radio_HamburgerButton Radio_Hamburger_On ">
      <input type="radio" name="Radio_Hamburger" id="idRadio_Hamburger_Off" class="Radio_HamburgerButton Radio_Hamburger_Off ">
      <div class="Hamburger_Filter" onmouseenter="MouseEvent_Hamburger_Switch('idRadio_Hamburger_Off');"></div>
      <label name="Hamburger_Opener" for="idRadio_Hamburger_On" class="Hamburger_Opener Hamburger_BaseSwitcher" onmouseover="MouseEvent_Hamburger_Switch('idRadio_Hamburger_On'); MouseEvent_Hamburger_Switch('idRadio_Hamburger_Switch_On');">
        ≡
      </label>
      <div class="Hamburger_Exterior" onmouseover="MouseEvent_Hamburger_Switch('idRadio_Hamburger_Off');">
        <div class="Hamburger_Content UserSelect_None" onmouseover="MouseEvent_Hamburger_Switch()">
          <div class="Hamburger_DummyCloser_Container">
            <label for="idRadio_Hamburger_Off" class="Hamburger_BaseSwitcher Hamburger_DummyCloser ">
              <br>
            </label>
          </div>
          <label for="idRadio_Hamburger_Off" onclick="location='#iroha';">
            いろはにほへと<br>
          </label>
          <label for="idRadio_Hamburger_Off" onclick="location='#tunena';">
            つねならむ<br>
          </label>
          <label for="idRadio_Hamburger_Off" onclick="location='#ehimo';">
            ゑひもせす<br>
          </label>
        </div>
      </div>
      <label name="Hamburger_Closer" for="idRadio_Hamburger_Off" class="Hamburger_BaseSwitcher Hamburger_Closer ">
        ×
      </label>
      <input type="radio" name="Radio_Hamburger_Switcher" id="idRadio_Hamburger_Switch_On" class="Radio_HamburgerButton Radio_Hamburger_Switch_On ">
      <input type="radio" name="Radio_Hamburger_Switcher" id="idRadio_Hamburger_Switch_Off" class="Radio_HamburgerButton Radio_Hamburger_Switch_Off ">
      <label name="Hamburger_EmptySwitcher" class="Hamburger_BaseSwitcher Hamburger_EmptySwitcher" onclick="MouseEvent_Hamburger_Switch('idRadio_Hamburger_Switch_Off');" onmouseout="MouseEvent_Hamburger_Switch('idRadio_Hamburger_Switch_Off');">
        <br>
      </label>
      <label name="Hamburger_EmptySwitcherMask" class="Hamburger_EmptySwitcherMask" onclick="MouseEvent_Hamburger_Switch('idRadio_Hamburger_Switch_Off');" onmouseout="MouseEvent_Hamburger_Switch('idRadio_Hamburger_Switch_Off');">
      </label>
    </nav>
  </header>
  <br>
  いろは歌<br>
  <br>
  <a id="iroha"></a>
  いろはにほへと<br>
  ちりぬるを<br>
  わかよたれそ<br>
  <a id="tunena"></a>
  つねならむ<br>
  うゐのおくやま<br>
  けふこえて<br>
  あさきゆめみし<br>
  <a id="ehimo"></a>
  ゑひもせす<br>
  <br>
  <footer>
    【Footer】
  </footer>
  <div class="DummyTail "></div>
</body>
<script>
  function MouseEvent_Hamburger_Switch(idHR) {
    if (idHR) {
      let wHR = document.getElementById(idHR);
      wHR.checked = true; // false; //
    }
    event.stopPropagation();
    // return false; // true; //
  }
</script>
</html>


<Number>: [000002D5]  <Date>: 2022/02/04 03:06:58
<Title>: CSSデモ(+JavaScript)/ハンバーガー・メニュー051
<Name>: amanojaku@管理人



下記はページ内ジャンプに対応しています。
下記は マウス・ホバーに対応していますが、普通のハンバーガー・メニューに慣れていると、逆に使いにくいかもしれません。
ほんの数行のJavaScriptを使ってますが、基本的にはラジオボタンをONしている関数なので、そんなに難しいことは無いでしょう。
ページ内ジャンプをする場合は、Footerの後に必ず、その「DummyTail」のようなモノを付けることを推奨します(そうしないとFooterに近い所に飛べないので)。

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


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!--
metaタグでcharsetをUTF-8に設定しています。
(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
-->
  <TITLE></TITLE>
  <style>
    :root {
      --Border_Weight_1: calc(1rem / 16);
      --Border_Weight_1p31: calc(var(--Border_Weight_1) * 1.31);
      --InnerRadius: 0.75rem;
      --InnerDiameter: calc(var(--InnerRadius) * 2);
      --OuterRadius: calc(var(--InnerRadius) + var(--Border_Weight_1));
      --OuterDiameter: calc(var(--OuterRadius) * 2);
      --Hamburger_Content_PaddingHorizon: 0.35rem;
      --Hamburger_Content_PaddingVertical: 0.15rem;
      --Hamburger_DummyLCloser_Container_PaddingTop:
        calc(var(--Hamburger_LSwitcher_AbsoluteTop) - var(--Border_Weight_1));
      --Hamburger_Exterior_PaddingTop: var(--Hamburger_DummyLCloser_Container_PaddingTop);
      --Hamburger_LSwitcher_AbsolutePosition: 
      calc(var(--Hamburger_Content_PaddingHorizon) + var(--Border_Weight_1));
      --Hamburger_LSwitcher_AbsoluteHorizon: var(--Hamburger_LSwitcher_AbsolutePosition);
      --Hamburger_LSwitcher_AbsoluteTop: var(--Hamburger_LSwitcher_AbsolutePosition);
      --Hamburger_MaskLSwitcher_Width: calc(var(--Hamburger_LSwitcher_AbsoluteHorizon) + var(--OuterDiameter)); 
      --Hamburger_MaskLSwitcher_Height: calc(var(--Hamburger_LSwitcher_AbsoluteTop) + var(--OuterDiameter));
    }

    .Border {
      border: solid thin #000;
    }

    .Display_None {
      display: none;
    }

    .Display_InlineBlock {
      display: inline-block;
    }

    .Position_Relative {
      position: relative;
    }

    .Position_Absolute {
      position: absolute;
    }

    .WhiteSpace_Nowrap {
      white-space: nowrap;
    }

    .UserSelect_None {
      user-select: none;
    }

    .Visibility_Hidden {
      visibility: hidden;
    }

    .Circle_Naked {
      border: none 0 #000;
      border-radius: var(--OuterRadius);
      width: var(--OuterDiameter);
      height: var(--OuterDiameter);
    }

    .Circle_Border {
      box-sizing: border-box;
      border: solid var(--Border_Weight_1) #000;
      border-radius: var(--OuterRadius);
      width: var(--OuterDiameter);
      height: var(--OuterDiameter);
    }

    .Position_Fixed_0_0 {
      position: fixed;
      top: 0;
      left: 0;
    }

    .Hamburger_Container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
    }

    .Hamburger_BaseLSwitcher {
      display: inline-flex;
      justify-content: center;
      background-color: #0ee;
      box-sizing: border-box;
      border: solid var(--Border_Weight_1) #000;
      border-radius: var(--OuterRadius) ;
      width: var(--OuterDiameter);
      height: var(--OuterDiameter);
      user-select: none;
    }

    .Hamburger_EmptyLSwitcher {
      display: none;
      position: absolute;
      z-index: 2147483647;
      /* z-indexの最大値 */
      left: var(--Hamburger_LSwitcher_AbsoluteHorizon);
      top: var(--Hamburger_LSwitcher_AbsoluteTop);
    }

    .Hamburger_MaskLSwitcher {
      display: none;
      position: absolute;
      z-index: 2147483647;
      opacity: 0;
      background-color: #000;
      left: 0;
      top: 0;
      /*border-bottom-left-radius: var(--OuterRadius);*/
      border-bottom-right-radius: var(--OuterRadius);
      width: var(--Hamburger_MaskLSwitcher_Width); 
      height: var(--Hamburger_MaskLSwitcher_Height);
    }

    .Hamburger_LOpener {
      position: absolute;
      z-index: 2147483647;
      /* z-indexの最大値 */
      left: var(--Hamburger_LSwitcher_AbsoluteHorizon);
      top: var(--Hamburger_LSwitcher_AbsoluteTop);
    }

    .Hamburger_LCloser {
      display: none;
      position: absolute;
      z-index: 2147483647;
      /* z-indexの最大値 */
      left: var(--Hamburger_LSwitcher_AbsoluteHorizon);
      top: var(--Hamburger_LSwitcher_AbsoluteTop);
    }

    .Hamburger_MenuISwitch_On:checked~.Hamburger_LCloser {
      display: inline-flex;
    }

    .Hamburger_LCloser:hover {
      display: inline-flex;
    }

    .Hamburger_DummyLCloser_Container {
      display: flex;
      justify-content: flex-start;
      padding: 0;
    }

    .Hamburger_DummyLCloser {
      border: none 0 #000;
      background-color: #fff;
      visibility: hidden;
      /*visibility: visible;*/
    }

    .Hamburger_Exterior {
      display: inline-block;
      position: absolute;
      z-index: 2147483647;
      /* z-indexの最大値 */
      background-color: #0cc;
      left: 0;
      top: 0;
      margin: 0;
      padding: var(--Hamburger_Exterior_PaddingTop) 0 0 var(--Hamburger_Content_PaddingHorizon);
      box-sizing: border-box;
      border: solid var(--Border_Weight_1p31) #000;
      border-radius: var(--OuterRadius);
      transform: translateX(-101%);
    }

    .Hamburger_Content {
      display: inline-block;
      background-color: #0cc;
      left: var(--Hamburger_LSwitcher_AbsoluteHorizon);
      top: var(--Hamburger_LSwitcher_AbsoluteTop);
      margin: 0;
      padding: 0 var(--Hamburger_Content_PaddingHorizon) var(--Hamburger_Content_PaddingVertical) 0;
      border: none 0 #000;
      border-radius: var(--OuterRadius);
      white-space: nowrap;
    }

    .Hamburger_MenuISwitch_On:checked~.Hamburger_Exterior {
      transform: translateX(0%);
      transition: 0.3s ease-in-out;
    }

    .Hamburger_MaskISwitch_On:checked~.Hamburger_EmptyLSwitcher {
      display: inline-flex;
    }

    .Hamburger_MaskISwitch_On:checked~.Hamburger_MaskLSwitcher {
      display: inline-block;
    }

    .Hamburger_Filter {
      display: none;
      position: absolute;
      z-index: 2147483647;
      /* z-indexの最大値 */
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background-color: #000;
      opacity: 0.5;
    }

    .Hamburger_MenuISwitch_On:checked~.Hamburger_Filter {
      display: block;
    }

    .DummyTail {
      width: 50vw;
      height: 100vh;
      margin: 0 auto;
    }

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

  </style>
</head>

<body>
  <header>
    <nav class="Hamburger_Container">
      <input type="radio" name="Hamburger_MenuISwitch" id="idHamburger_MenuISwitch_On" class="Hamburger_MenuISwitch_On ">
      <input type="radio" name="Hamburger_MenuISwitch" id="idHamburger_MenuISwitch_Off" class="Hamburger_MenuISwitch_Off ">
      <div class="Hamburger_Filter" onmouseenter="RadioSwitch('idHamburger_MenuISwitch_Off');"></div>
      <label name="Hamburger_LOpener" for="idHamburger_MenuISwitch_On" class="Hamburger_LOpener Hamburger_BaseLSwitcher" onmouseover="RadioSwitch('idHamburger_MenuISwitch_On'); RadioSwitch('idHamburger_MaskISwitch_On');">
        ≡
      </label>
      <div class="Hamburger_Exterior" onmouseover="RadioSwitch('idHamburger_MenuISwitch_Off');">
        <div class="Hamburger_Content UserSelect_None" onmouseover="RadioSwitch()">
          <div class="Hamburger_DummyLCloser_Container">
            <label for="idHamburger_MenuISwitch_Off" class="Hamburger_BaseLSwitcher Hamburger_DummyLCloser ">
              <br>
            </label>
          </div>
          <label for="idHamburger_MenuISwitch_Off" onclick="location='#iroha';">
            いろはにほへと<br>
          </label>
          <label for="idHamburger_MenuISwitch_Off" onclick="location='#tunena';">
            つねならむ<br>
          </label>
          <label for="idHamburger_MenuISwitch_Off" onclick="location='#ehimo';">
            ゑひもせす<br>
          </label>
        </div>
      </div>
      <label name="Hamburger_LCloser" for="idHamburger_MenuISwitch_Off" class="Hamburger_BaseLSwitcher Hamburger_LCloser ">
        ×
      </label>
      <input type="radio" name="Hamburger_MaskISwitch" id="idHamburger_MaskISwitch_On" class="Hamburger_MaskISwitch_On ">
      <input type="radio" name="Hamburger_MaskISwitch" id="idHamburger_MaskISwitch_Off" class="Hamburger_MaskISwitch_Off ">
      <label name="Hamburger_EmptyLSwitcher" class="Hamburger_BaseLSwitcher Hamburger_EmptyLSwitcher" onclick="RadioSwitch('idHamburger_MaskISwitch_Off');" onmouseout="RadioSwitch('idHamburger_MaskISwitch_Off');">
        <br>
      </label>
      <label name="Hamburger_MaskLSwitcher" class="Hamburger_MaskLSwitcher" onclick="RadioSwitch('idHamburger_MaskISwitch_Off');" onmouseout="RadioSwitch('idHamburger_MaskISwitch_Off');">
      </label>
    </nav>
  </header>
  <br>
  いろは歌<br>
  <br>
  <a id="iroha"></a>
  いろはにほへと<br>
  ちりぬるを<br>
  わかよたれそ<br>
  <a id="tunena"></a>
  つねならむ<br>
  うゐのおくやま<br>
  けふこえて<br>
  あさきゆめみし<br>
  <a id="ehimo"></a>
  ゑひもせす<br>
  <br>
  <footer>
    【Footer】
  </footer>
  <div class="DummyTail "></div>
</body>
<script>
  function RadioSwitch(idHR) {
    if (idHR) {
      let wHR = document.getElementById(idHR);
      wHR.checked = true; // false; //
    }
    event.stopPropagation();
    // return false; // true; //
  }
</script>
</html>


<Number>: [000002D6]  <Date>: 2022/02/05 17:00:21
<Title>: CSSデモ/ハンバーガー・メニュー031
<Name>: amanojaku@管理人



下記はページ内ジャンプに対応しています。
下記は ほんのチョッピリだけJavaScriptを使ってますが、最大限 気にならないレベルに抑えて有るので ご安心ください(逆に言うとページ内ジャンプに対応するにはJavaScriptが必須)。
ページ内ジャンプをする場合は、Footerの後に必ず、その「DummyTail」のようなモノを付けることを推奨します(そうしないとFooterに近い所に飛べないので)。

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


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!--
metaタグでcharsetをUTF-8に設定しています。
(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
-->
  <TITLE></TITLE>
  <style>
    :root {
      --Border_Weight_1: calc(1rem / 16);
      --Border_Weight_1p31: calc(var(--Border_Weight_1) * 1.31);
      --InnerRadius: 0.75rem;
      --InnerDiameter: calc(var(--InnerRadius) * 2);
      --OuterRadius: calc(var(--InnerRadius) + var(--Border_Weight_1));
      --OuterDiameter: calc(var(--OuterRadius) * 2);
      --Hamburger_Content_PaddingHorizon: 0.35rem;
      --Hamburger_Content_PaddingVertical: 0.15rem;
      --Hamburger_DummyLCloser_Container_PaddingTop:
        calc(var(--Hamburger_LSwitcher_AbsoluteTop) - var(--Border_Weight_1));
      --Hamburger_Exterior_PaddingTop: var(--Hamburger_DummyLCloser_Container_PaddingTop);
      --Hamburger_LSwitcher_AbsolutePosition:
        calc(var(--Hamburger_Content_PaddingHorizon) + var(--Border_Weight_1));
      --Hamburger_LSwitcher_AbsoluteHorizon: var(--Hamburger_LSwitcher_AbsolutePosition);
      --Hamburger_LSwitcher_AbsoluteTop: var(--Hamburger_LSwitcher_AbsolutePosition);
      --Hamburger_EmptyLSwitcherMask_Width: calc(var(--Hamburger_LSwitcher_AbsoluteHorizon) + var(--OuterDiameter));
      --Hamburger_EmptyLSwitcherMask_Height: calc(var(--Hamburger_LSwitcher_AbsoluteTop) + var(--OuterDiameter));
    }

    .Border {
      border: solid thin #000;
    }

    .Display_None {
      display: none;
    }

    .Display_InlineBlock {
      display: inline-block;
    }

    .Position_Relative {
      position: relative;
    }

    .Position_Absolute {
      position: absolute;
    }

    .WhiteSpace_Nowrap {
      white-space: nowrap;
    }

    .UserSelect_None {
      user-select: none;
    }

    .Visibility_Hidden {
      visibility: hidden;
    }

    .Circle_Naked {
      border: none 0 #000;
      border-radius: var(--OuterRadius);
      width: var(--OuterDiameter);
      height: var(--OuterDiameter);
    }

    .Circle_Border {
      box-sizing: border-box;
      border: solid var(--Border_Weight_1) #000;
      border-radius: var(--OuterRadius);
      width: var(--OuterDiameter);
      height: var(--OuterDiameter);
    }

    .Position_Fixed_0_0 {
      position: fixed;
      top: 0;
      left: 0;
    }

    .Hamburger_Container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
    }

    .Hamburger_BaseLSwitcher {
      display: inline-flex;
      justify-content: center;
      z-index: 2147483647;
      /* z-indexの最大値 */
      background-color: #0ee;
      box-sizing: border-box;
      border: solid var(--Border_Weight_1) #000;
      border-radius: var(--OuterRadius);
      width: var(--OuterDiameter);
      height: var(--OuterDiameter);
      user-select: none;
    }

    .Hamburger_LOpener {
      position: absolute;
      top: var(--Hamburger_LSwitcher_AbsoluteTop);
      left: var(--Hamburger_LSwitcher_AbsoluteHorizon);
      /*right: var(--Hamburger_BaseLSwitcher_AbsoluteHorizon);*/
    }

    .Hamburger_LCloser {
      display: none;
      position: absolute;
      top: var(--Hamburger_LSwitcher_AbsoluteTop);
      left: var(--Hamburger_LSwitcher_AbsoluteHorizon);
      /*right: var(--Hamburger_LSwitcher_AbsoluteHorizon);*/
    }

    .Hamburger_MenuISwitch:checked~.Hamburger_LCloser {
      display: inline-flex;
    }

    .Hamburger_DummyLCloser_Container {
      display: flex;
      justify-content: flex-start;
      padding: var(--Hamburger_DummyLCloser_Container_PaddingTop) 0 var(--Hamburger_Content_PaddingVertical) 0;
    }

    .Hamburger_DummyLCloser {
      border: none 0 #000;
      background-color: #fff;
      /*visibility: visible;*/
      visibility: hidden;
    }

    .Hamburger_Content {
      display: inline-block;
      z-index: 2147483647;
      /* z-indexの最大値 */
      background-color: #0cc;
      position: absolute;
      left: 0;
      top: 0;
      white-space: nowrap;
      box-sizing: border-box;
      border: solid var(--Border_Weight_1) #000;
      border-radius: var(--OuterRadius);
      padding: 0 var(--Hamburger_Content_PaddingHorizon) var(--Hamburger_Content_PaddingVertical) var(--Hamburger_Content_PaddingHorizon);
      transform: translateX(-101%);
    }

    .Hamburger_MenuISwitch:checked~.Hamburger_Content {
      left: 0;
      transform: translateX(0%);
      transition: 0.3s ease-in-out;
    }

    .Hamburger_Filter {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2147483647;
      /* z-indexの最大値 */
      width: 100%;
      height: 100vh;
      background-color: #000;
      opacity: 0.5;
    }

    .Hamburger_MenuISwitch:checked~.Hamburger_Filter {
      display: block;
    }

    .DummyTail {
      width: 50vw;
      height: 100vh;
      margin: 0 auto;
    }

    .Hamburger_Container>input[type="checkbox"] {
      display: none;
    }

  </style>
</head>

<body>
  <header>
    <nav class="Hamburger_Container">
      <input type="checkbox" id="Hamburger_MenuISwitch" class="Hamburger_MenuISwitch ">
      <div class="Hamburger_Filter"></div>
      <label name="Hamburger_LOpener" for="Hamburger_MenuISwitch" class="Hamburger_LOpener Hamburger_BaseLSwitcher">
        ≡
      </label>
      <div class="Hamburger_Content UserSelect_None">
        <div class="Hamburger_DummyLCloser_Container">
          <label for="Hamburger_MenuISwitch" class="Hamburger_BaseLSwitcher Hamburger_DummyLCloser ">
            ×
          </label>
        </div>
        <label for="Hamburger_MenuISwitch" onclick="location='#iroha';">
          いろはにほへと<br>
        </label>
        <label for="Hamburger_MenuISwitch" onclick="location='#tunena';">
          つねならむ<br>
        </label>
        <label for="Hamburger_MenuISwitch" onclick="location='#ehimo';">
          ゑひもせす<br>
        </label>
      </div>
      <label name="Hamburger_LCloser" for="Hamburger_MenuISwitch" class="Hamburger_BaseLSwitcher Hamburger_LCloser ">
        ×
      </label>
    </nav>
  </header>
  <br>
  いろは歌<br>
  <br>
  <a id="iroha"></a>
  いろはにほへと<br>
  ちりぬるを<br>
  わかよたれそ<br>
  <a id="tunena"></a>
  つねならむ<br>
  うゐのおくやま<br>
  けふこえて<br>
  あさきゆめみし<br>
  <a id="ehimo"></a>
  ゑひもせす<br>
  <br>
  <footer>
    【Footer】
  </footer>
  <div class="DummyTail "></div>
</body>
</html>


<Number>: [000002D7]  <Date>: 2022/02/05 16:50:59
<Title>: CSSデモ/ハンバーガー・メニュー021
<Name>: amanojaku@管理人



下記はページ内ジャンプには対応していません。
下記デモは実在しないURLに飛ぶので、リンクをクリックするとエラーになります。

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


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!--
metaタグでcharsetをUTF-8に設定しています。
(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
-->
  <TITLE></TITLE>
  <style>
    :root {
      --Border_Weight_1: calc(1rem / 16);
      --Border_Weight_1p31: calc(var(--Border_Weight_1) * 1.31);
      --InnerRadius: 0.75rem;
      --InnerDiameter: calc(var(--InnerRadius) * 2);
      --OuterRadius: calc(var(--InnerRadius) + var(--Border_Weight_1));
      --OuterDiameter: calc(var(--OuterRadius) * 2);
      --Hamburger_Content_PaddingHorizon: 0.35rem;
      --Hamburger_Content_PaddingVertical: 0.15rem;
      --Hamburger_DummyLCloser_Container_PaddingTop:
        calc(var(--Hamburger_LSwitcher_AbsoluteTop) - var(--Border_Weight_1));
      --Hamburger_Exterior_PaddingTop: var(--Hamburger_DummyLCloser_Container_PaddingTop);
      --Hamburger_LSwitcher_AbsolutePosition: 
      calc(var(--Hamburger_Content_PaddingHorizon) + var(--Border_Weight_1));
      --Hamburger_LSwitcher_AbsoluteHorizon: var(--Hamburger_LSwitcher_AbsolutePosition);
      --Hamburger_LSwitcher_AbsoluteTop: var(--Hamburger_LSwitcher_AbsolutePosition);
      --Hamburger_EmptyLSwitcherMask_Width: calc(var(--Hamburger_LSwitcher_AbsoluteHorizon) + var(--OuterDiameter)); 
      --Hamburger_EmptyLSwitcherMask_Height: calc(var(--Hamburger_LSwitcher_AbsoluteTop) + var(--OuterDiameter));
    }

    .Border {
      border: solid thin #000;
    }

    .Display_None {
      display: none;
    }

    .Display_InlineBlock {
      display: inline-block;
    }

    .Position_Relative {
      position: relative;
    }

    .Position_Absolute {
      position: absolute;
    }

    .WhiteSpace_Nowrap {
      white-space: nowrap;
    }

    .UserSelect_None {
      user-select: none;
    }

    .Visibility_Hidden {
      visibility: hidden;
    }

    .Circle_Naked {
      border: none 0 #000;
      border-radius: var(--OuterRadius);
      width: var(--OuterDiameter);
      height: var(--OuterDiameter);
    }

    .Circle_Border {
      box-sizing: border-box;
      border: solid var(--Border_Weight_1) #000;
      border-radius: var(--OuterRadius);
      width: var(--OuterDiameter);
      height: var(--OuterDiameter);
    }

    .Position_Fixed_0_0 {
      position: fixed;
      top: 0;
      left: 0;
    }

    .Hamburger_Container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
    }

    .Hamburger_BaseLSwitcher {
      display: inline-flex;
      justify-content: center;
      z-index: 2147483647;
      /* z-indexの最大値 */
      background-color: #0ee;
      box-sizing: border-box;
      border: solid var(--Border_Weight_1) #000;
      border-radius: var(--OuterRadius);
      width: var(--OuterDiameter);
      height: var(--OuterDiameter);
      user-select: none;
    }

    .Hamburger_LOpener {
      position: absolute;
      top: var(--Hamburger_LSwitcher_AbsoluteTop);
      left: var(--Hamburger_LSwitcher_AbsoluteHorizon);
      /*right: var(--Hamburger_BaseLSwitcher_AbsoluteHorizon);*/
    }

    .Hamburger_LCloser {
      display: none;
      position: absolute;
      top: var(--Hamburger_LSwitcher_AbsoluteTop);
      left: var(--Hamburger_LSwitcher_AbsoluteHorizon);
      /*right: var(--Hamburger_LSwitcher_AbsoluteHorizon);*/
    }

    .Hamburger_MenuISwitch:checked~.Hamburger_LCloser {
      display: inline-flex;
    }

    .Hamburger_DummyLCloser_Container {
      display: flex;
      justify-content: flex-start;
      padding: var(--Hamburger_DummyLCloser_Container_PaddingTop) 0 var(--Hamburger_Content_PaddingVertical) 0;
    }

    .Hamburger_DummyLCloser {
      border: none 0 #000;
      background-color: #fff;
      /*visibility: visible;*/
      visibility: hidden;
    }

    .Hamburger_Content {
      display: inline-block;
      z-index: 2147483647;
      /* z-indexの最大値 */
      background-color: #0cc;
      position: absolute;
      left: 0;
      top: 0;
      white-space: nowrap;
      box-sizing: border-box;
      border: solid var(--Border_Weight_1) #000;
      border-radius: var(--OuterRadius);
      padding: 0 var(--Hamburger_Content_PaddingHorizon) var(--Hamburger_Content_PaddingVertical) var(--Hamburger_Content_PaddingHorizon);
      transform: translateX(-101%);
    }

    .Hamburger_MenuISwitch:checked~.Hamburger_Content {
      left: 0;
      transform: translateX(0%);
      transition: 0.3s ease-in-out;
    }

    .Hamburger_Filter {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2147483647;
      /* z-indexの最大値 */
      width: 100%;
      height: 100vh;
      background-color: #000;
      opacity: 0.5;
    }

    .Hamburger_MenuISwitch:checked~.Hamburger_Filter {
      display: block;
    }

    .DummyTail {
      width: 50vw;
      height: 100vh;
      margin: 0 auto;
    }

    .Hamburger_Container>input[type="checkbox"] {
      display: none;
    }

  </style>
</head>

<body>
  <header>
    <nav class="Hamburger_Container">
      <input type="checkbox" id="Hamburger_MenuISwitch" class="Hamburger_MenuISwitch ">
      <div class="Hamburger_Filter"></div>
      <label name="Hamburger_LOpener" for="Hamburger_MenuISwitch" class="Hamburger_LOpener Hamburger_BaseLSwitcher">
        ≡
      </label>
      <div class="Hamburger_Content UserSelect_None">
        <div class="Hamburger_DummyLCloser_Container">
          <label for="Hamburger_MenuISwitch" class="Hamburger_BaseLSwitcher Hamburger_DummyLCloser ">
            ×
          </label>
        </div>
        <label for="Hamburger_MenuISwitch">
          <a href="Page001.html">Page001<br></a>
        </label>
        <label for="Hamburger_MenuISwitch">
          <a href="Page002.html">Page002<br></a>
        </label>
        <label for="Hamburger_MenuISwitch">
          <a href="Page003.html">Page003<br></a>
        </label>
      </div>
      <label name="Hamburger_LCloser" for="Hamburger_MenuISwitch" class="Hamburger_BaseLSwitcher Hamburger_LCloser ">
        ×
      </label>
    </nav>
  </header>
  いろはにほへと<br>
  ちりぬるを<br>
  わかよたれそ<br>
  つねならむ<br>
  うゐのおくやま<br>
  けふこえて<br>
  あさきゆめみし<br>
  ゑひもせす<br>
  <footer>
    【Footer】
  </footer>
</body>
</html>

Block( Address 000002DB Identity 00000280 )










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

   
   

管理者用 Password:

  




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