Home Web Development JavaScript JavaScript Frosted Glass Menu With CSS | Sideout Sliding Menu

JavaScript Frosted Glass Menu With CSS | Sideout Sliding Menu

November 30, 2019

3194

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.

https://webdevtrick.com/wp-content/uploads/sideout-glass-menu.mp4?_=1

Live Demo

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.

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.

<!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>

<!DOCTYPE html>

<head>

<title>Frosted Glass Menu | Webdevtrick.com</title>

</head>

<body>

<h1>Frosted Glass Menu</h1>

<nav>

</div>

</div>

</li>

<a href="#">About</a>

<ol>

<li><a href="#">pricing</a></li>

<li><a href="#">services</a></li>

</ol>

</li>

<ol>

<li><a href="#">graphic </a></li>

</ol>

</li>

<a href="#">Contact</a>

<ol>

<li><a href="#">Email</a></li>

<li><a href="#">Social</a></li>

</ol>

</li>

<a href="#">follow me</a>

<ol>

<li>

Facebook <i class="fab fa-facebook"></i>

</a>

</li>

<li>

Instagram <i class="fab fa-instagram"></i>

</a>

</li>

</ol>

</li>

</ul>

</nav>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* 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;
       }
}

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.

//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);
	}
}

//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.