how do i display a box at the side of a button after a click?
HTML
<button><a href="#">Open box at side</a></button> <div id="link-box"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </div>
CSS
#link-box { padding: 5px; border: 1px solid black; } #link-box ul li { display: block; }
Advertisement
Answer
Pure CSS
way.
Click on Button
to Show and ANYWHERE
to DISMISS.
body { padding: 30px; display: inline-block; } button.toggle { border: 3px solid #000000; background: #fff; padding: 7px 15px; margin-right: 10px; } #link-box { width: 150px; height: 200px; display: none; float: right; border: 3px solid #000000; } .toggle:focus~#link-box { display: block; } #link-box > ul > li { list-style: none; padding: 10px; } #link-box > ul > li > a { text-decoration: none; color: #000000; }
<button class="toggle">Button</button> <div id="link-box"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul>