// メニュー開閉
-function SwitchMenu (){
+function SwitchMenu (command){
var open = "";
var close = "";
var menu = document.getElementById("bar-container");
var button = document.getElementById("open-sp-menu");
- if(menu.classList.contains("show-menu")){
+ function NemuClose() {
+ //console.log("Close!")
menu.classList.replace("show-menu", "hide-menu");
button.textContent = open;
- }else if(menu.classList.contains("hide-menu")){
+ }
+
+ function MenuOpen() {
+ //console.log("Open!")
menu.classList.replace("hide-menu", "show-menu");
button.textContent = close;
+ }
+
+ if (command){
+ if(command == "open"){
+ MenuOpen();
+ return;
+ }else if(command == "close"){
+ NemuClose();
+ return;
+ }
+ }
+ if(menu.classList.contains("show-menu")){
+ NemuClose();
+ }else if(menu.classList.contains("hide-menu")){
+ MenuOpen();
}else{
menu.classList.add("show-menu")
- button.textContent = open;
}
+
+
+
}
document.getElementById("open-sp-menu").addEventListener("click", SwitchMenu);
document.getElementById("open-sp-menu").addEventListener("load", SwitchMenu);
+
+window.addEventListener("load", function () {
+ // スマホCSSが適用されてる場合の処理
+ if (document.body.clientWidth < 799){
+ $("main").css({
+ paddingTop: $("header").outerHeight() + "px"
+ })
+ document.body.addEventListener("click", (e) => {
+ if(! (e.target.closest("#header") || e.target.closest("#open-sp-menu") )&& document.getElementById("bar-container").classList.contains("show-menu") ){
+ SwitchMenu("close");
+ }
+ })
+ }
+})
.show-menu{
display: inline-block !important;
}
+
+#header{
+ position: fixed;
+ top: 0;
+}
+
+#open-sp-menu{
+ position: fixed;
+ top:0;
+ left: 0;
+ padding-top: 1%;
+ padding-left: 1%;
+ z-index: 1000;
+ color: white;
+}
/* === ここまでメニューバー === */
+
/* === ここからサイドメニュー === */
#sidemenu-right{
display: none;
}
/* === ここまでサイドメニュー === */
+
+
+/* === ここから本文 === */
+main{
+ /* メインコンテンツの横の余白 */
+ padding-left: 1%;
+ padding-right: 1%;
+ margin: 1%;
+}
+/* === ここまで本文 === */
\ No newline at end of file