下記はページ内ジャンプに対応しています。
下記は マウス・ホバーに対応していますが、普通のハンバーガー・メニューに慣れていると、逆に使いにくいかもしれません。
ほんの数行のJavaScriptを使ってますが、基本的にはラジオボタンをONしている関数なので、そんなに難しいことは無いでしょう。
ページ内ジャンプをする場合は、Footerの後に必ず、その「DummyTail」のようなモノを付けることを推奨します(そうしないとFooterに近い所に飛べないので)。
実際のページ
http://xd305417.html.xdomain.jp/demo/Hamburger009.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_Switcher_On:checked~.Hamburger_EmptySwitcher {
display: inline-flex;
}
.Radio_Hamburger_Switcher_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_Switcher_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_Switcher_On" class="Radio_HamburgerButton Radio_Hamburger_Switcher_On ">
<input type="radio" name="Radio_Hamburger_Switcher" id="idRadio_Hamburger_Switcher_Off" class="Radio_HamburgerButton Radio_Hamburger_Switcher_Off ">
<label name="Hamburger_EmptySwitcher" class="Hamburger_BaseSwitcher Hamburger_EmptySwitcher" onclick="MouseEvent_Hamburger_Switch('idRadio_Hamburger_Switcher_Off');" onmouseout="MouseEvent_Hamburger_Switch('idRadio_Hamburger_Switcher_Off');">
<br>
</label>
<label name="Hamburger_EmptySwitcherMask" class="Hamburger_EmptySwitcherMask" onclick="MouseEvent_Hamburger_Switch('idRadio_Hamburger_Switcher_Off');" onmouseout="MouseEvent_Hamburger_Switch('idRadio_Hamburger_Switcher_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>
|
|