CSS，HTML：侧边栏，动画为1按钮，不是2

Question

I got side menu with one button "M" that opens the menu, but when the menu is opened instead of 10 buttons i get 20 like B-Button, B is image and Button is text. When the menu is opened they need to be the same button not 2 separate ones, I know they are coded to be 2 separate buttons but in what direction should i go to make them 1 button only when the menu is opened

Code:

  function MenuButton() { if (document.getElementById("mySidenav").style.width == "150px") { document.getElementById("mySidenav").style.width = "0px"; } else { document.getElementById("mySidenav").style.width = "150px"; } } 

 .sidenav { height: 100%; width: 0; position: fixed; top: 34px; left: 49px; z-index: 2; background-color: #111; overflow: hidden; transition: 0.5s; padding-top: 55px; } .sidenav a { font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-variant-numeric: normal; font-weight: normal; font-stretch: normal; font-size: 25px; line-height: 1; padding: 8px 8px 8px 15px; text-decoration: none; display: block; color: white; transition: 0.3s; white-space: nowrap; } .sidenav a:hover { background-color: #3498db; } .buttons { height: 100%; width: 50px; position: fixed; margin: 0 auto; top: 34px; left: 0; z-index: 1; background-color: #111; overflow: hidden; transition: 0.5s; padding-top: 14px; } .buttons a{ font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-variant-numeric: normal; font-weight: normal; font-stretch: normal; font-size:25px; line-height: 1; padding: 8px 8px 8px 15px; text-decoration: none; color: white; display: block; transition: 0.3s; cursor: pointer; } .buttons a:hover{ background-color: #3498db; } 

 <div id="mySidenav" class="sidenav"> <a>B</a> <a>B</a> <a>B</a> <a>B</a> <a>B</a> <a>B</a> <a>B</a> <a>B</a> <a>B</a> <a>B</a> </div> <div id="buttonside" class="buttons"> <a><span onclick="MenuButton()">M</span></a> <a>B</a> <a>B</a> <a>B</a> <a>B</a> <a>B</a> <a>B</a> <a>B</a> <a>B</a> <a>B</a> <a>B</a> </div> 

JSFiddle Link

Answer 1

Try to wrap your icons or images into a span with some width like below

 function MenuButton() { if (document.getElementById("buttonside").style.width == "150px") { document.getElementById("buttonside").style.width = "50px"; } else { document.getElementById("buttonside").style.width = "150px"; } } 

 .sidenav { background-color: #111; overflow: hidden; transition: 0.5s; } .sidenav a:hover { background-color: #3498db; } .buttons { width: 50px; background-color: #111; overflow: hidden; transition: 0.5s; padding-top: 14px; } .buttons a { font-size: 25px; line-height: 1; padding: 8px 0px; text-decoration: none; color: white; display: block; transition: 0.3s; cursor: pointer; white-space: nowrap; } .buttons a span { width: 50px; display: inline-block; text-align: center; } .buttons a:hover { background-color: #3498db; } 

 <div id="buttonside" class="buttons"> <a onclick="MenuButton()"><span>M</span></a> <div id="mySidenav" class="sidenav"> <a><span>B</span>Link</a> <a><span>B</span>Link</a> <a><span>B</span>Link</a> <a><span>B</span>Link</a> <a><span>B</span>Link</a> <a><span>B</span>Link</a> <a><span>B</span>Link</a> <a><span>B</span>Link</a> <a><span>B</span>Link</a> <a><span>B</span>Link</a> <a><span>B</span>Link</a> <a><span>B</span>Link</a> </div> </div>