コピペで使えるHTMLとJavascriptでバーガーメニュー
本ページの左上にあるバーガーメニュー(ハンバーガーメニュー)を作成するHTML及びJavascriptです。
htmlおよびJavascript
<nav class="mamSideMenu"> <ul> <li style="font-weight:bold;border-bottom:2px solid #000;">■メニューサンプル</li> <li><a href="/javascript/css_nav_vertical_menu.html">HTML+CSSで縦メニュー</a></li> <li><a href="/javascript/css_nav_vertical_menu2.html">円弧のメニュー</a></li> <li><a href="/javascript/css_nav_vertical_menu3.html">HTML+CSSでカラフル縦メニュー1</a></li> <li><a href="/javascript/css_nav_vertical_menu4.html">HTML+CSSでカラフル縦メニュー2</a></li> <li><a href="/javascript/css_nav_vertical_menu5.html">HTML+CSSで立体縦メニュー</a></li> <li><a href="/javascript/css_nav_vertical_menu6.html">HTML+CSSで立体カラフル縦メニュー</a></li> <li><a href="/javascript/css_nav_horizontal_menu.html">HTML+CSSで横メニュー</a></li> <li><a href="/javascript/css_nav_horizontal_menu2.html">SVGアイコン配置の横メニュー</a></li> <li><a href="/javascript/css_nav_horizontal_sub_menu.html">HTML+CSSで横メニュー(サブ付)</a></li> </ul> </nav> <script> class TMamSideMenu{ constructor(horizontalPos,menuWidth,burgerWH,vertBurgerPos){ burgerWH=parseInt(burgerWH); if(isNaN(burgerWH)){burgerWH=48;} if(burgerWH<16){burgerWH=16;} this.bw=burgerWH; this.bh=burgerWH; let p=this.bh/20; let ww=4; if(horizontalPos=='right'){ this.pos='right'; this.shadow='-4px'; }else{ this.pos='left'; this.shadow='4px'; } if(menuWidth){ this.w=menuWidth; }else{ this.w='200px'; } if(vertBurgerPos){ this.bpos=vertBurgerPos; }else{ this.bpos='4px'; } this.isOpen=false; //スタイルシートの登録 let style=document.createElement("style"); document.head.appendChild(style); /* サイドメニューのCSS <div class=".mamSideMenu> <ul> <li><a>メニュー</a></li> <li><a>メニュー</a></li> </ul> </div> */ //サイドメニューの大外の<div>のCSS style.sheet.insertRule( 'nav.mamSideMenu{'+ 'position:fixed;top:0;bottom:6px;'+this.pos+':0;width:0;height:calc(100vh - 6px);overflow-x:hidden;overflow-y:hidden;'+ 'margin:0:padding:4px;box-sizing:border-box;display:block;background:#fff;box-shadow:'+this.shadow+' 4px 6px rgba(0,0,0,0.2);'+ 'z-index:2147483646;}' ,0); style.sheet.insertRule( 'nav.mamSideMenu>ul{'+ 'list-style:none;margin:0;padding:'+(this.bh+8)+'px 0px 0px 0px;border:none;'+ 'border-radius:0px;background:none;width:'+this.w+';box-sizing:border-box;}' ,0); style.sheet.insertRule( 'nav.mamSideMenu>ul>li{margin:0;padding:4px;border:none;width:100%;box-sizing:border-box;}' ,0); //サイドメニューの<a>タグのCSS style.sheet.insertRule( 'nav.mamSideMenu>ul>li>a{margin:0;padding:4px 8px;width:100%;text-decoration:none;border-bottom:1px dotted #888;'+ 'display:block;box-sizing:border-box;font-size:calc('+this.w+' / 12);font-weight:bold;color:#333;text-shadow:0px 0px 0px rgba(0,0,0,0.3);}' ,0); style.sheet.insertRule( 'nav.mamSideMenu>ul>li>a:active{text-shadow:2px 2px 2px rgba(0,0,255,0.3);box-shadow:2px 2px 2px rgba(0,0,0,0.3) inset;border-radius:4px;}' ,0); style.sheet.insertRule( 'nav.mamSideMenu>ul>li>a:hover{box-shadow:2px 2px 2px rgba(0,0,0,0.3);border-radius:4px;}' ,0); style.sheet.insertRule( 'nav.mamSideMenuOpen{animation:mamSideMenuOpenAni 0.3s linear 0.0s normal both running;}' ,0); style.sheet.insertRule( 'nav.mamSideMenuClose{animation:mamSideMenuCloseAni 0.3s linear 0.0s normal both running;}' ,0); style.sheet.insertRule( '@keyframes mamSideMenuOpenAni{'+ ' 0%{width:0px;} 99%{width:'+this.w+';overflow-y:hidden;}'+ '100%{width:'+this.w+';overflow-y:auto;}'+ '}' ,0); style.sheet.insertRule( '@keyframes mamSideMenuCloseAni{0%{width:'+this.w+';overflow-y:hidden;} 100%{width:0px;}}' ,0); /*ハンバーガーボタンのCSS <div class="mamBurgerButton"> <span>横棒</span> <span>横棒</span> <span>横棒</span> <span>open</span> <span>close</span> </div> */ style.sheet.insertRule( 'div.mamBurgerButton{'+ ' position:fixed;width:'+this.bw+'px;height:'+this.bh+'px;background:#111;border-radius:8px;'+ ' box-shadow:4px 4px 4px rgba(0,0,0,0.4);left:6px;top:6px;cursor:pointer;opacity:0.7;z-index:2147483647;'+ '}' ,0); style.sheet.insertRule( 'div.mamBurgerButton:active{box-shadow:-4px -4px 4px rgba(0,0,0,0.3);}' ,0); style.sheet.insertRule( 'div.mamBurgerButton:hover{box-shadow:-2px -2px 2px rgba(0,0,0,0.3);}' ,0); style.sheet.insertRule( 'div.mamBurgerButton>span{'+ 'display:inline-block;position:absolute;width:100%;text-align:center;transition:all 0.3s;'+ 'transform-origin:0% 50%;}' ,0); style.sheet.insertRule( 'div.mamBurgerButton>span:nth-of-type(1){'+ 'width:'+(p*10)+'px;height:'+ww+'px;background:#fff;top:'+(p*2)+'px;left:'+p*5+'px;border-radius:'+ww/2+'px;}' ,0); style.sheet.insertRule( 'div.mamBurgerButton>span:nth-of-type(2){'+ 'width:'+(p*10)+'px;height:'+ww+'px;background:#fff;top:'+(p*7)+'px;left:'+p*5+'px;border-radius:'+ww/2+'px;}' ,0); style.sheet.insertRule( 'div.mamBurgerButton>span:nth-of-type(3){'+ 'width:'+(p*10)+'px;height:'+ww+'px;background:#fff;top:'+(p*12)+'px;left:'+p*5+'px;border-radius:'+ww/2+'px;}' ,0); style.sheet.insertRule( 'div.mamBurgerButton>span:nth-of-type(4){bottom:0;left:0;right:0;font-size:'+p*3+'px;color:#fff;opacity:1;}' ,0); style.sheet.insertRule( 'div.mamBurgerButton>span:nth-of-type(5){bottom:0;left:0;right:0;font-size:'+p*3+'px;color:#fff;opacity:0;}' ,0); style.sheet.insertRule( 'div.mamBurgerClose>span:nth-of-type(1){transform:rotate( 45deg) scale(1.4,1.4);}' ,0); style.sheet.insertRule('div.mamBurgerClose>span:nth-of-type(2){opacity:0;}',0); style.sheet.insertRule( 'div.mamBurgerClose>span:nth-of-type(3){transform:rotate(-45deg) scale(1.4,1.4);}' ,0); style.sheet.insertRule('div.mamBurgerClose>span:nth-of-type(4){opacity:0 !important;}',0); style.sheet.insertRule('div.mamBurgerClose>span:nth-of-type(5){opacity:1 !important;}',0); style.sheet.insertRule( 'div.mamBurgerOpen>span:nth-of-type(1){transform:rotate( 0deg) scale(1,1);}' ,0); style.sheet.insertRule( 'div.mamBurgerOpen>span:nth-of-type(2){opacity:1;}',0); style.sheet.insertRule( 'div.mamBurgerOpen>span:nth-of-type(3){transform:rotate( 0deg) scale(1,1);}' ,0); style.sheet.insertRule( 'div.mamBurgerOpen>span:nth-of-type(4){opacity:1 !important;}',0); style.sheet.insertRule( 'div.mamBurgerOpen>span:nth-of-type(5){opacity:0 !important;}',0); //ハンバーガーボタン this.burger=document.createElement("div"); this.burger.classList.add('mamBurgerButton'); this.burger.innerHTML= '<span></span><span></span><span></span><span>Open</span><span>Close</span>'; document.body.appendChild(this.burger); this.burger.style.top=this.bpos; if(this.pos=='left'){ this.burger.style.left='6px'; }else{ let scrollbarWidth = window.innerWidth - document.body.clientWidth; this.burger.style.left='calc(100vw - '+burgerWH+'px - '+scrollbarWidth+'px)'; } window.addEventListener("resize",function(){ //右側配置の場合はスクロールバーに配慮する必要がある if(this.pos!='left'){ let scrollbarWidth = window.innerWidth - document.body.clientWidth; this.burger.style.left='calc(100vw - '+burgerWH+'px - '+scrollbarWidth+'px)'; } }.bind(this)); //サイドメニューの開閉設定 this.menu=document.querySelector('.mamSideMenu'); if(this.menu){ this.burger.addEventListener('click',function(){ if(this.menu.classList.contains('mamSideMenuOpen')){ this.menu.classList.remove('mamSideMenuOpen'); this.menu.classList.add('mamSideMenuClose'); this.burger.classList.remove('mamBurgerClose'); this.burger.classList.add('mamBurgerOpen'); this.isOpen=false; }else{ this.menu.classList.remove('mamSideMenuClose'); this.menu.classList.add('mamSideMenuOpen'); this.burger.classList.remove('mamBurgerOpen'); this.burger.classList.add('mamBurgerClose'); this.isOpen=true; } }.bind(this)); } //ハンバーガー又はサイドメニュー以外がクリックされたらサイドメニューを閉じる処理 if(this.menu){ document.addEventListener('click',function(){ if(!event.target.closest('div.mamBurgerButton')&&!event.target.closest('nav.mamSideMenu')){ if(this.isOpen){ this.menu.classList.remove('mamSideMenuOpen'); this.menu.classList.add('mamSideMenuClose'); this.burger.classList.remove('mamBurgerClose'); this.burger.classList.add('mamBurgerOpen'); this.isOpen=false; } } }.bind(this)); } } } window.addEventListener('DOMContentLoaded',function(){ //引数 // メニューとバーガーの位置('left' 又は 'right'), // メニューの幅('200px' など), // ハンバーガーボタンの幅をピクセル単位で指定する(48 など), MamSideMenu=new TMamSideMenu('left','200px',48); }); </script>
縦並び・横並びメニューのサンプル一覧
nav,ul,liタグとCSSを使って縦並びのメニューをつくる
CSSとJavascriptで円弧に沿った形の縦並びのメニューを作る
nav,ul,liタグとCSSを使ってカラフルなボタンの縦並びのメニューをつくる
nav,ul,liタグとCSSを使ってカラフルな縦並びのメニューをつくる
nav,ul,liタグとCSSを使って立体ボタンの縦並びのメニューをつくる
nav,ul,liタグとCSSを使って立体ボタンのカラフルな縦並びのメニューをつくる
nav,ul,liタグとCSSを使って横並びのメニューをつくる
CSSでSVGアイコンを下部に固定した横並びのメニューがあるページ作る
nav,ul,liタグとCSSを使ってサブメニューがある横並びのメニューをつくる