Home Web Design CSS CSS Overlay Menu Example & Source Code

CSS Overlay Menu Example & Source Code

April 7, 2019

9783

Today I will give you an example of the CSS overlay menu. I think you have seen overlay popup in many websites. Mostly you can see overlay screen effect in pop-up login form or sing up form.

Basically, this overlay technique is used for displaying a window, without leaving the existing page. And this is a pretty good effect. In other words, it seems very attractive to see. Many websites use this effect for responsive & mostly for small screen size. ( i.e. mobiles, tablet, etc.) If you ever used bootstrap then you know: bootstrap also uses this effect in default for the mobile version of web page.

Preview

If you have not yet understood which point in the conversation or what is overlay menu? then let’s see a preview of it:

CSS Overlay Menu Source Code

This is an overlay menu with pure CSS, no JavaScript or JQuery. I just used HTML & CSS to create this small program or effect. For creating the menu I used HTML list properties <ul> & <li>. For the front screen, I had just put an <h1> tag and paragraph <p> tag.

That’s only things you have to do in HTML. Now left all work is CSS. CSS is an ocean & peoples know about CSS equal to one drop. Even I am not also a CSS expert.

You May Also Like Other CSS Stuff

CSS Progress Bar

Creative Slider in CSS

Toggle Button in CSS

Get Source Code

You have to create two files, one for HTML & other for CSS. There are lines of codes in the CSS file is more over than HTML file. Ratio of HTML & CSS in this overlay menu program is 1:4 ( 20% HTML & 80% CSS ). Now create two files named ‘index.html‘ & ‘style.css‘.

Index.html

Put these given codes below in ‘index.html‘ file.

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com ) -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
  <title>CSS Menu Overlay | Webdevtrick.com</title>
</head>
<body>
  <div class="menu-wrap">
    <input type="checkbox" class="toggler">
    <div class="hamburger"><div></div></div>
    <div class="menu">
      <div>
        <div>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <header class="showcase">
    <div class="container showcase-inner">
      <h1>CSS MENU</h1>
      <p>Click on menu for see effect in top left position. I share example source code and resource for web graphic designer & web developer.</p>
      <a href="https://webdevtrick.com" class="btn">VISIT WEBDEVTRICK</a>
    </div>
  </header>
</body>
</html>

<!DOCTYPE html>

<head>

<title>CSS Menu Overlay | Webdevtrick.com</title>

</head>

<body>

<div>

<ul>

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

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

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

</ul>

</div>

<p>Click on menu for see effect in top left position. I share example source code and resource for web graphic designer & web developer.</p>

<a href="https://webdevtrick.com" class="btn">VISIT WEBDEVTRICK</a>

</div>

</header>

</body>

</html>

Style.css

Now put these codes in ‘style.css‘ file.

/* code by webdevtrick ( webdevtrick.com) */
:root {
  --primary-color: rgba(13, 110, 139, 0.75);
  --overlay-color: rgba(24, 39, 51 , 0.85);
  --menu-speed: 0.75s;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.4;
}

.container {
  max-width: 960px;
  margin: auto;
  overflow: hidden;
  padding: 0 3rem;
}

.showcase {
  background: var(--primary-color);
  color: #fff;
  height: 100vh;
  position: relative;
}

.showcase:before {
  content: '';
  background: url('https://images.pexels.com/photos/1655166/pexels-photo-1655166.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260') no-repeat center center/cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.showcase .showcase-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}

.showcase h1 {
  font-size: 4rem;
}

.showcase p {
  font-size: 1.3rem;
}

.btn {
  display: inline-block;
  border: none;
  background: #333;
  color: #fff;
  padding: 0.75rem 1.5rem;
  margin-top: 1rem;
  transition: opacity 1s ease-in-out;
  text-decoration: none;
}

.btn:hover {
  opacity: 0.7;
}

/* MENU STYLES */
.menu-wrap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

.menu-wrap .toggler {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  cursor: pointer;
  width: 50px;
  height: 50px;
  opacity: 0;
}

.menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 60px;
  height: 60px;
  padding: 1rem;
  background: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hamburger Line */
.menu-wrap .hamburger > div {
  position: relative;
  flex: none;
  width: 100%;
  height: 2px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -10px;
  width: 100%;
  height: 2px;
  background: inherit;
}

/* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 10px;
}

/* Toggler Animation */
.menu-wrap .toggler:checked + .hamburger > div {
  transform: rotate(135deg);
}

/* Turns Lines Into X */
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after {
  top: 0;
  transform: rotate(90deg);
}

/* Rotate On Hover When Checked */
.menu-wrap .toggler:checked:hover + .hamburger > div {
  transform: rotate(225deg);
}

/* Show Menu */
.menu-wrap .toggler:checked ~ .menu {
  visibility: visible;
}

.menu-wrap .toggler:checked ~ .menu > div {
  transform: scale(1);
  transition-duration: var(--menu-speed);
}

.menu-wrap .toggler:checked ~ .menu > div > div {
  opacity: 1;
  transition:  opacity 0.4s ease 0.4s;
}

.menu-wrap .menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-wrap .menu > div {
  background: var(--overlay-color);
  border-radius: 50%;
  width: 200vw;
  height: 200vw;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  transition: all 0.4s ease;
}

.menu-wrap .menu > div > div {
  text-align: center;
  max-width: 90vw;
  max-height: 100vh;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.menu-wrap .menu > div > div > ul > li {
  list-style: none;
  color: #fff;
  font-size: 1.5rem;
  padding: 1rem;
}

.menu-wrap .menu > div > div > ul > li > a {
  color: inherit;
  text-decoration: none;
  transition: color 0.4s ease;
}

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

/* code by webdevtrick ( webdevtrick.com) */

:root {

--primary-color: rgba(13, 110, 139, 0.75);

--overlay-color: rgba(24, 39, 51 , 0.85);

--menu-speed: 0.75s;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Roboto', sans-serif;

line-height: 1.4;

}

.container {

max-width: 960px;

margin: auto;

overflow: hidden;

padding: 0 3rem;

}

.showcase {

background: var(--primary-color);

color: #fff;

height: 100vh;

position: relative;

}

.showcase:before {

content: '';

background: url('https://images.pexels.com/photos/1655166/pexels-photo-1655166.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260') no-repeat center center/cover;

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: -1;

}

.showcase .showcase-inner {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

text-align: center;

height: 100%;

}

.showcase h1 {

font-size: 4rem;

}

.showcase p {

font-size: 1.3rem;

}

.btn {

display: inline-block;

border: none;

background: #333;

color: #fff;

padding: 0.75rem 1.5rem;

margin-top: 1rem;

transition: opacity 1s ease-in-out;

text-decoration: none;

}

.btn:hover {

opacity: 0.7;

}

/* MENU STYLES */

.menu-wrap {

position: fixed;

top: 0;

left: 0;

z-index: 1;

}

.menu-wrap .toggler {

position: absolute;

top: 0;

left: 0;

z-index: 2;

cursor: pointer;

width: 50px;

height: 50px;

opacity: 0;

}

.menu-wrap .hamburger {

position: absolute;

top: 0;

left: 0;

z-index: 1;

width: 60px;

height: 60px;

padding: 1rem;

background: #333;

display: flex;

align-items: center;

justify-content: center;

}

/* Hamburger Line */

.menu-wrap .hamburger > div {

position: relative;

flex: none;

width: 100%;

height: 2px;

background: #fff;

display: flex;

align-items: center;

justify-content: center;

transition: all 0.4s ease;

}

/* Hamburger Lines - Top & Bottom */

.menu-wrap .hamburger > div::before,

.menu-wrap .hamburger > div::after {

content: '';

position: absolute;

z-index: 1;

top: -10px;

width: 100%;

height: 2px;

background: inherit;

}

/* Moves Line Down */

.menu-wrap .hamburger > div::after {

top: 10px;

}

/* Toggler Animation */

.menu-wrap .toggler:checked + .hamburger > div {

transform: rotate(135deg);

}

/* Turns Lines Into X */

.menu-wrap .toggler:checked + .hamburger > div:before,

.menu-wrap .toggler:checked + .hamburger > div:after {

top: 0;

transform: rotate(90deg);

}

/* Rotate On Hover When Checked */

.menu-wrap .toggler:checked:hover + .hamburger > div {

transform: rotate(225deg);

}

/* Show Menu */

.menu-wrap .toggler:checked ~ .menu {

visibility: visible;

}

.menu-wrap .toggler:checked ~ .menu > div {

transform: scale(1);

transition-duration: var(--menu-speed);

}

.menu-wrap .toggler:checked ~ .menu > div > div {

opacity: 1;

transition: opacity 0.4s ease 0.4s;

}

.menu-wrap .menu {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

visibility: hidden;

overflow: hidden;

display: flex;

align-items: center;

justify-content: center;

}

.menu-wrap .menu > div {

background: var(--overlay-color);

border-radius: 50%;

width: 200vw;

height: 200vw;

display: flex;

flex: none;

align-items: center;

justify-content: center;

transform: scale(0);

transition: all 0.4s ease;

}

.menu-wrap .menu > div > div {

text-align: center;

max-width: 90vw;

max-height: 100vh;

opacity: 0;

transition: opacity 0.4s ease;

}

.menu-wrap .menu > div > div > ul > li {

list-style: none;

color: #fff;

font-size: 1.5rem;

padding: 1rem;

}

.menu-wrap .menu > div > div > ul > li > a {

color: inherit;

text-decoration: none;

transition: color 0.4s ease;

}

That’s it. Now you have successfully created an overlay menu. If you have any doubt or suggestion comment down below.

Thanks For Visiting, Keep Visiting.

1 COMMENT

dirk April 30, 2019 At 1:11 pm

Thanks for the tutorial. I just do not manage to close the menu once a link is clicked (internal link with anchor). Is there a way, to close the menu in that case as well or does the Hamburger X has to be clicked all the time?

Reply

CSS Overlay Menu Example & Source Code

Preview

CSS Overlay Menu Source Code

Get Source Code

1 COMMENT

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

Unique Uses for Blockchain Technology

JavaScript Progress Clock | Day, Hour, Minute, Second, Progression

POPULAR CATEGORY