How we can create a menu with frosted glass type overlay? Solution: See this JavaScript Frosted Glass Menu With CSS, Sideout Sliding Menu.
Previously I have shared sidebar menu, but it has frosted glass overlay feature and submenu items. Basically, side out or sidebar menu uses on modern websites nowadays. Earlier this type of side menu used in the mobile or small screen device, but now you can see it on a large screen also. This type of menu can give an attractive look to your website.
Today you will learn to create Sideout Sliding Menu. Basically, there is a menu button on the top-left side, a background image, and a text in the background. When you will click on the menu button, then the sidebar menu will reveal with a smooth slide effect. And after revealing the menu button will change to cross or close button. Also, there are some sub-menu items, you can click on the menu items to see those and with sub-menu, there will back button appear to go back.
So, Today I am sharing JavaScript Frosted Glass Menu With CSS. There I have used pure JavaScript for functioning, did not used jquery or any other library. If we use jQuery then work will be easy and we also can save a lot time. And this program will be the best practice for beginners, and also you can use this program on your website.
If you are thinking now how this frosted glass menu actually is, then see the preview.
Preview Of Sideout Sliding Menu
See this video preview to getting an idea of how this sidebar menu looks like.
Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
JavaScript Frosted Glass Menu With CSS Source Code
Before sharing source code, let’s talk about it. First I have created the navigation section using HTML <nav> tag and placed all the elements inside it. Inside the nav, I have created 2 div for the menu button and back button. After that, I have created a list for creating the menu items using HTML <ul> <li> <ol> tags.
Now using CSS I have placed all the elements in the right place, as you can see in the preview. And there are two icons for social links in the follow section, I have used the font-awesome library for placing those. There I have used CSS variables --var for advance CSS functioning (info). The menu icon converts to a close icon using the rotate command.
JavaScipt handling the important features of the program. Basically, JavaScript and CSS both have equal priority in this program In other words, both are important. I have used JS if{} else{} statement for creating the toggle feature of the menu and submenu. With JavaScript and CSS I have done so many works, that I can’t explain in writing.
You will understand the whole program after getting the codes, if you have good knowledge of HTML, CSS, and JS. For creating this program you have to create 3 files. First for HTML, second for CSS, and the third is for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>Frosted Glass Menu | Webdevtrick.com</title> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css'> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Frosted Glass Menu</h1> <nav> <div class="menu-btn"> <div class="line line__1"></div> <div class="line line__2"></div> <div class="line line__3"></div> </div> <div class="back-button"> <div class="line line__1"></div> <div class="line line__2"></div> </div> <ul class="nav-items"> <li class="link"> <a href="#">Home</a> </li> <li class="link"> <a href="#">About</a> <ol> <li><a href="#">pricing</a></li> <li><a href="#">services</a></li> </ol> </li> <li class="link"> <a href="#">Work</a> <ol> <li><a href="#">web</a></li> <li><a href="#">graphic </a></li> <li><a href="#">seo </a></li> </ol> </li> <li class="link"> <a href="#">Contact</a> <ol> <li><a href="#">Email</a></li> <li><a href="#">Social</a></li> </ol> </li> <li class="link"> <a href="#">follow me</a> <ol> <li> <a target="_blank" href="#"> Facebook <i class="fab fa-facebook"></i> </a> </li> <li> <a target="_blank" href="#"> Instagram <i class="fab fa-instagram"></i> </a> </li> </ol> </li> </ul> </nav> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ @import url('https://fonts.googleapis.com/css?family=Alatsi&display=swap'); * { box-sizing: border-box; margin: 0; padding: 0; } body { position: relative; width: 100%; height: 100vh; font-family: 'Alatsi', sans-serif; background-image: url("https://source.unsplash.com/1200x900/?tech,code"); background-size: cover; overflow: hidden; z-index: 1; } body::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.35); } h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgba(255, 255, 255, 0.8); font-size: 3rem; text-transform: uppercase; letter-spacing: 5px; text-shadow: 0 2px 15px rgba(0, 0, 0, 0.2); white-space: nowrap; z-index: 3; } nav { --transition-time: 500ms; position: relative; width: 400px; height: 100%; display: flex; align-items: center; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(20px); transform: translateX(-100%); transition: all 800ms cubic-bezier(0.8, 0, 0.33, 1); z-index: 4; } nav a { text-transform: uppercase; font-size: 1.4rem; font-weight: 900; letter-spacing: 3px; text-decoration: none; user-select: none; color: #fff; } nav .nav-items { --link-height: 60px; position: relative; width: 100%; } nav .nav-items li { display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: var(--link-height); list-style: none; opacity: 0; transform: translateX(-50%); transition: all var(--transition-time) cubic-bezier(0.8, 0, 0.33, 0.9); transition-delay: calc(30ms + var(--delay)); cursor: pointer; z-index: 8; } nav .nav-items li:hover { color: rgba(255, 255, 255, 0.85); } nav .nav-items li a { pointer-events: none; } nav .nav-items li ol { display: none; } nav .nav-items .hover-el { position: absolute; width: 100%; height: var(--link-height); top: var(--y); left: var(--x); opacity: 0; background: radial-gradient(circle at var(--mousex) var(--mousey), rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.45) 100%); transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1); pointer-events: none; z-index: 5; } nav .sub-menu { --link-height: 60px; position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); } nav .sub-menu ol { list-style: none; } nav .sub-menu ol li { display: flex; justify-content: center; align-items: center; height: var(--link-height); transition: all var(--transition-time) ease; transition-delay: calc(30ms + var(--delay)); cursor: pointer; } nav .sub-menu ol li:hover { background: rgba(0, 0, 0, 0.25); } nav .sub-menu ol li.off-menu { opacity: 0; transform: translateY(30%); } nav .sub-menu ol li.on-menu { opacity: 1; transform: translateY(0%); } nav .sub-menu ol li a { font-size: 1.2rem; font-weight: normal; } nav .back-button { --icon-width: 40px; position: absolute; top: 6%; left: 10%; width: var(--icon-width); height: var(--icon-width); background: rgba(0, 0, 0, 0.25); border-radius: 5px; opacity: 0; transform: translateX(-100%); transition: all var(--transition-time) cubic-bezier(0.8, 0, 0.33, 1.25); cursor: pointer; z-index: 8; pointer-events: none; } nav .back-button .line { width: calc(var(--icon-width) - 28px); height: 2px; background: #fff; display: flex; flex-direction: column; margin: 12px 10px; } nav .back-button .line__1 { transform-origin: left; transform: rotate(-35deg) translate(-1px, 8px); } nav .back-button .line__2 { transform-origin: left; transform: rotate(35deg) translate(-1px, -8px); } nav .menu-btn { display: flex; justify-content: center; align-items: center; --icon-width: 25px; position: absolute; top: 5%; right: -15%; width: calc(var(--icon-width) + 25px); height: calc(var(--icon-width) + 25px); flex-direction: column; transition: all calc(100ms + var(--transition-time)) cubic-bezier(0.8, 0, 0.33, 1.25); cursor: pointer; z-index: 10; } nav .menu-btn.close .line__1 { transform: rotate(45deg) translate(2px, -3px); } nav .menu-btn.close .line__2 { transform: rotate(-45deg); } nav .menu-btn.close .line__3 { transform: rotate(45deg) translate(-2px, 3px); } nav .menu-btn .line { width: var(--icon-width); background: #fff; height: 2px; margin: 3px 0; transition: all calc(var(--transition-time) + 100ms) cubic-bezier(0.9, 0, 0.33, 1); } nav .menu-btn .line__1 { width: var(--icon-width); transform-origin: left; } nav .menu-btn .line__2 { width: var(--icon-width); transform-origin: center; } nav .menu-btn .line__3 { width: var(--icon-width); transform-origin: right; } nav.nav-open { transform: translateX(0%); } nav.nav-open .menu-btn { right: 10%; } nav.nav-open .nav-items li { transform: translateX(0); opacity: 1; } nav.sub-menu-open .back-button { opacity: 1; transform: translateX(0); pointer-events: all; } nav.sub-menu-open .nav-items li { pointer-events: none; opacity: 0; transform: translateY(-10%); } nav.sub-menu-open .nav-items .hover-el { opacity: 0; } @media (max-width:750px) { h1 { font-size: 1rem; } } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
//Code By Webdevtrick ( https://webdevtrick.com ) console.clear(); const nav = document.querySelector("nav"); const navLinksContainer = document.querySelector(".nav-items"); const navLinks = [...document.querySelectorAll(".link")]; const menuBtn = document.querySelector(".menu-btn"); const subMenuBtn = document.querySelector(".back-button"); function createHoverEl() { let hoverEl = document.createElement("div"); hoverEl.className = "hover-el"; hoverEl.style.setProperty("--y", "0px"); hoverEl.style.setProperty("--mousex", "0px"); hoverEl.style.setProperty("--mousey", "0px"); navLinksContainer.appendChild(hoverEl); } createHoverEl(); navLinks.forEach((link, index) => { let hoverEl = navLinksContainer.querySelector(".hover-el"); link.style.setProperty("--delay", `${index * 50}ms`); link.addEventListener("mousemove", function(e) { hoverEl.style.setProperty("--y", `${index * 60}px`); hoverEl.style.setProperty("opacity", "1"); hoverEl.style.setProperty("--mousex", `${e.pageX - hoverEl.offsetLeft}px`); hoverEl.style.setProperty("--mousey", `${e.pageY - hoverEl.offsetTop}px`); }); navLinksContainer.addEventListener("mouseout", function() { hoverEl.style.setProperty("opacity", "0"); }); link.addEventListener("click", function() { let hoverEl = navLinksContainer.querySelector(".hover-el"); hoverEl.style.opacity = '0'; toggleSubmenu(link); }); }); menuBtn.addEventListener("click", function() { nav.classList.toggle("nav-open"); menuBtn.classList.toggle("close"); }); subMenuBtn.addEventListener("click", function() { nav.classList.toggle("sub-menu-open"); removeSubmenu(); }); function toggleSubmenu(el) { let subMenu = nav.querySelector(".sub-menu"); if (el.children[1]) { createSubmenu(el); } else if (nav.contains(subMenu)) { removeSubmenu(); } else { return; } } function createSubmenu(el) { let subMenuContainer = document.createElement("div"); subMenuContainer.className = "sub-menu"; let subMenuItem = el.children[1].cloneNode(true); let subMenuItemList = [...subMenuItem.children]; subMenuItemList.forEach((item, index) => { item.classList.add("off-menu"); item.style.setProperty("--delay", `${index * 40}ms`); }); nav.classList.toggle("sub-menu-open"); nav.appendChild(subMenuContainer); subMenuContainer.appendChild(subMenuItem); setTimeout(function() { subMenuItemList.forEach(item => { item.classList.remove("off-menu"); item.classList.add("on-menu"); }); }, 200); } function removeSubmenu() { let subMenu = nav.querySelector(".sub-menu"); let subMenuItemList = [...subMenu.children[0].children]; if (nav.contains(subMenu)) { subMenuItemList.forEach(item => { item.classList.add("off-menu"); item.classList.remove("on-menu"); }); setTimeout(function() { nav.removeChild(subMenu); }, 500); } } |
That’s It. Now you have successfully created JavaScript Frosted Glass Menu With CSS, Sideout Sliding Menu. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
