1. Tutorials
  2. Creating a Pop out Corner Menu using HTML, CSS, and JS Tutorial

Creating a Pop out Corner Menu using HTML, CSS, and JS Tutorial

Submitted by oretnom23 on Thursday, April 27, 2023 - 16:56.

In this tutorial, you can learn to create a simple Pop out Corner Menu using HTML, CSS, and JS. This tutorial aims to provide students and beginners with a reference for learning to create a useful and interactive component. Here, I will be providing a simple web page script that demonstrates the creation of a simple pop-out corner menu.

What is Pop Out Corner Menu?

The Pop-Out Corner Menu is a component that displays a menu button at the corner of the web page at first and pops outs the menu item link when clicked or hovered over. This component is often used or implemented in mobile applications which can also help to optimize the page space.

How to create a Pop-out Corner Menu?

Pop-out Corner Menu can be easily achieved using CSS and a little bit of JavaScript codes. Using the CSS useful properties, we can design the corner menu elements on how we wanted it should look and add some simple animations. Then, using some of the built-in event listeners and methods of JavaScript, we can pop out and hide the menu items when hovering over or when clicking the menu button. Check out the sample web page scripts that I created below to have a better understanding of this.

Sample Web Page Scripts

The scripts below result in a simple web page that contains a corner menu that pops out the menu item links in the icon view when the menu button is clicked. The corner menu also has a simple transition and animation to make it more interactive to the users.

Page Interface

Here's the HTML file script known as index.html. This file contains the HTML elements that of the page especially the elements of the corner menu and its menu items.

  1. <!DOCTYPE html>
  2. <html lang="en">
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Pop Out Corner Menu</title>
  7.     <link rel="stylesheet" href="style.css">
  8.     <link rel="preconnect" href="https://fonts.googleapis.com">
  9.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  10.     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
  11. </head>
  13.     <div class="container">
  14.     <h1 id="page-title">Creating a Pop Out Corner Menu using HTMl, CSS and JS</h1>
  15.     <hr id="title_hr">
  16.     </div>
  17.     <div id="corner-menu-wrapper" class="">
  18.     <div class="corner-menu-inner">
  19.         <div class="corner-menu-btn-holder">
  20.         <button id="corner-menu-btn"><span class="material-symbols-outlined">menu</span></button>
  21.         </div>
  22.         <div id="corner-menu-list">
  23.         <a href="#" class="corner-menu-item" title="Home Page"><span class="material-symbols-outlined">home</span></a>
  24.         <a href="#" class="corner-menu-item" title="Manage Account"><span class="material-symbols-outlined">manage_accounts</span></a>
  25.         <a href="#" class="corner-menu-item" title="Settings"><span class="material-symbols-outlined">settings</span></a>
  26.         <a href="#" class="corner-menu-item" title="Logout"><span class="material-symbols-outlined">logout</span></a>
  27.         </div>
  28.     </div>
  29.     </div>
  30.     <script src="script.js"></script>
  31. </body>
  32. </html>

CSS

Next, here's the CSS file script known as style.css. This file contains the stylesheet codes of the page layout and corner menu elements designs.

  1. @import url('https://fonts.googleapis.com/css2?family=Dongle:wght@300;400;700&family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet');
  2. *{
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6.     font-family: 'Dongle', sans-serif;
  7.     font-family: 'Roboto Mono', monospace;
  8. }
  9. ::selection{
  10.     color: #fff;
  11.     background: #4db2ec;
  12. }
  13. body{
  14.     display: flex;
  15.     align-items: center;
  16.     justify-content: center;
  17.     min-height: 100vh;
  18.     background: #4facfe;
  19.     background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
  20.     padding: 2em 0;
  21. }
  22. #page-title{
  23.     color: #fff;
  24.     text-align: center;
  25.     font-weight: 500;
  26.     text-shadow: 0px 0px 15px #0000003a;
  27. }
  28. #title_hr{
  29.     width:60px;
  30.     border: 2px solid #ffffff;
  31.     margin: .35em auto;
  32. }
  33. @media (min-width: 780px){
  34.     #page-title{
  35.     width: 780px;
  36.     }
  37. }
  38.  
  39. /* Corner Menu Wrapper */
  40. div#corner-menu-wrapper {
  41.     position: fixed;
  42.     bottom: 25px;
  43.     right: 25px;
  44. }
  45. /* Corner Menu Inner */
  46. .corner-menu-inner {
  47.     position: relative;
  48. }
  49. /* Corner Menu Button Holder */
  50. .corner-menu-btn-holder{
  51.     position: relative;
  52.     z-index: 2;
  53. }
  54. /* Corner Menu Button */
  55. button#corner-menu-btn {
  56.     width: 40px;
  57.     height: 40px;
  58.     display: flex;
  59.     align-items: center;
  60.     justify-content: center;
  61.     background: #2c2b2b;
  62.     outline: none;
  63.     color: #fff;
  64.     border: none;
  65.     border-radius: 50%;
  66.     box-shadow: 1px 1px 10px #00000070;
  67.     cursor: pointer;
  68.     transition:all .2s ease;
  69.     animation: spin2 .4s ease forwards;
  70. }
  71. /* Corner Menu Button on hover */
  72. button#corner-menu-btn:hover{
  73.     transform: scale(1.02);
  74.     background: #131212;
  75.     box-shadow: 1px 1px 10px #00000094;
  76. }
  77. #corner-menu-wrapper.show #corner-menu-btn{
  78.     animation: spin .4s ease forwards;
  79. }
  80.  
  81. /* Corner Menu Spin Animation Keyframes */
  82. @keyframes spin {
  83.     0%{
  84.         rotate: 0deg;
  85.     }
  86.     100%{
  87.         rotate: 360deg;
  88.     }
  89. }
  90. @keyframes spin2 {
  91.     0%{
  92.     rotate: 360deg;
  93.     }
  94.     100%{
  95.     rotate: 0deg;
  96.     }
  97. }
  98. div#corner-menu-list {
  99.     position: absolute;
  100.     bottom: 0;
  101.     right: 0;
  102.     z-index: 1;
  103. }
  104. a.corner-menu-item {
  105.     background: #fff;
  106.     display: flex;
  107.     height: 42px;
  108.     width: 42px;
  109.     justify-content: center;
  110.     align-items: center;
  111.     text-decoration: none;
  112.     color: #000;
  113.     border-radius: 50%;
  114.     box-shadow: 1px 1px 10px #00000045;
  115.     transition: all .4s ease-in-out;
  116.     opacity: 0;
  117. }
  118. a.corner-menu-item:nth-child(1) {
  119.     transform: translate(1px, 127px) scale(.5);
  120. }
  121. a.corner-menu-item:nth-child(2) {
  122.     transform: translate(1px, 85px) scale(.5);
  123. }
  124. a.corner-menu-item:nth-child(3) {
  125.     transform: translate(1px, 43px) scale(.5);
  126. }
  127. a.corner-menu-item:nth-child(4) {
  128.     transform: translate(1px, 1px) scale(.5);
  129. }
  130. #corner-menu-wrapper.show a.corner-menu-item{
  131.     opacity: 1;
  132. }
  133. #corner-menu-wrapper.show a.corner-menu-item:nth-child(1) {
  134.     transform: translate(15px, 23px)  scale(1);
  135. }
  136. #corner-menu-wrapper.show a.corner-menu-item:nth-child(2) {
  137.     transform: translate(-48px, -9px)  scale(1);
  138. }
  139. #corner-menu-wrapper.show a.corner-menu-item:nth-child(3) {
  140.     transform: translate(-89px, -2px)  scale(1);
  141. }
  142. #corner-menu-wrapper.show a.corner-menu-item:nth-child(4) {
  143.     transform: translate(-95px, 17px)  scale(1);
  144. }
  145.  
  146.    

JavaScript

Lastly, here is the JavaScript file script known as script.js. This file contains the JS codes that trigger the menu items to pop out or hide when clicking the menu button. This file also contains the codes for updating the menu button icon.

  1. // Selecting Corner Menu Wrapper Element
  2. const cornerMenuWrapper = document.getElementById('corner-menu-wrapper')
  3.  
  4. // Pop out / Hiding Menu Items when Corner Menu button is clicked
  5. cornerMenuWrapper.querySelector('#corner-menu-btn').addEventListener('click', e=>{
  6.     // prevent default
  7.     e.preventDefault()
  8.  
  9.     if(cornerMenuWrapper.classList.contains('show')){
  10.         // Hide the Menu Items
  11.         cornerMenuWrapper.classList.remove('show')
  12.         // Update Menu Button Icon
  13.         cornerMenuWrapper.querySelector('#corner-menu-btn').innerHTML = `<span class="material-symbols-outlined">menu</span>`
  14.     }else{
  15.         // Show the Menu Items
  16.         cornerMenuWrapper.classList.add('show')
  17.         // Update Menu Button Icon
  18.         cornerMenuWrapper.querySelector('#corner-menu-btn').innerHTML = `<span class="material-symbols-outlined">close</span>`
  19.     }
  20. })

Snapshots

Here are some snapshots of the overall result of the scripts I have provided.

Page Interface (Hidden Menu Items)

Creating a Pop out corner menu using HTML, CSS, and JS

Page Interface (When Menu Items are shown)

Creating a Pop out corner menu using HTML, CSS, and JS

Corner Menu

Creating a Pop out corner menu using HTML, CSS, and JS

There you go! I have provided also the complete source code zip file on this website and it is free to download. The download button is located below this tutorial's content. Feel free to download and modify the source code to do some experiments.

That's it! I hope this Creating a Pop-out Corner Menu using HTML, CSS, and JS Tutorial will help you with what you are looking for and will be helpful for your current and future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Enjoy =)

Tags
HTML
CSS Code
CSS Tricks
CSS Tutorial
HTML Code
CSS Animation
Corner Menu Button
Javascript
js
Javascript Tutorial

Add new comment

About text formats
  • 571 views