下記はページ内ジャンプに対応しています。
下記は ほんのチョッピリだけ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>
|
|
掲示板に書き込む前に必ず この ”注意書き”を お読み下さい．
http://ashtarte.hotcom-web.com/utf8/smt.cgi?r+rpr/ を ご利用 下さい。
