CSS Multi Level Menu With Material Design | Navigation

In this tutorial, we learn how to create CSS Multi-Level Menu With Material Design using CSS?

In the previous tutorial, I have shared Navigation Menu Design, but this program is different from others, it’s we can called recent tasks, I hope you will aware recent tasks, if you don’t know, let’s me explain,

if you are using android mobile, then surely you know about. therefore it is a dedicated button, you can also be called switch and end tasks, to see recent tasks in a layer-wise, these layouts we created in this blog.

I think you will like this attractive and modular design because that is something new from my point of view. therefore, today you will learn to create Android’s Recent tasks Type Navigation menu.

these design created with pure CSS material design Navigation with responsive view. this program is very useful you can use this program after a few changes in source code.

so, today I will share CSS Multi Level menu with Material Design, there is no JS or any Library used to design, only HTML and Pure CSS used for making the design.

therefore, there is a menu icon that transforms into a close and cross button after click on the menu icon button, you can click on any window to get a menu icon back or click on the close button, you can see the preview on the click of View Demo Button, then you can understand how this design works.

Explanation of Source Code for CSS Multi Level Menu with Material Design

let’s discuss the source code which I have used to create the design, First, I have created the div as class="maindiv" and put all sections inside it.

for creating menu icons I have used HTML radio input, and also placed in all sections. as you can see in the on the click View Demo Button when you click on menu icon becomes cross on click, for creating this event I have used CSS content:' to create an icon and on click its rotates.

furthermore, after used radio button, I have placed a section using HTML element, for HTML element section I have used ID and for method. these look like this:

<input type="radio" name="tab" checked="checked" id="APIDoc"/>
     <section class="APIDoc">
     <h1>Heading</h1>
     <p>Paragraph</p>
     <label for="APIDoc"></label>
     </section>

<input type="radio" name="tab" id="WebConcept"/>
    <section class="WebConcept">
      <h1>Heading</h1>
      <p>Paragraph</p>
      <label for="Notification"></label>
    </section>

<input type="radio" name="tab" id="Notification"/>
    <section class="Notification">
      <h1>Heading</h1>
      <p>Paragraph</p>
      <label for="Notification"></label>
    </section>

<input type="radio" name="tab" id="Gallery"/>
    <section class="Gallery">
      <h1>Heading</h1>
      <p>Paragraph</p>
      <label for="Gallery"></label>
    </section>

<h1>Heading</h1>

<p>Paragraph</p>

</section>

<h1>Heading</h1>

<p>Paragraph</p>

</section>

<h1>Heading</h1>

<p>Paragraph</p>

</section>

<h1>Heading</h1>

<p>Paragraph</p>

</section>

In the style sheet, I have used lots of basic CSS properties, such as, font, font-family, font-weight, background, color, transform etc.

therefore, these are all concept which I have used to create CSS Multi-Level Navigation menu, I hope you will enjoy these program, I am sure after getting the code segment you can understand the program in a better way.

for creating this program I have used two files one file for HTML and another file for CSS. enjoy and used this design on your website after a few changes.

First Step: Create HTML File as Name “index.html” | Change Filename as you want

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Material Navigation Pure CSS</title>
  <meta name="viewport" content="width=device-width">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Raleway:600,400,200,300'>
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
 
<div class="maindiv">
  <input type="radio" name="tab" id="menulevel"/>
  <div class="container">

    <input type="radio" name="tab" checked="checked" id="APIDoc"/>
    <section class="APIDoc">
      <h1>Gallery</h1>
      <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
      <label for="APIDoc"></label>
    </section>

    <input type="radio" name="tab" id="WebConcept"/>
    <section class="WebConcept">
      <h1>Notification</h1>
      <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
      <label for="WebConcept"></label>
    </section>

    <input type="radio" name="tab" id="Notification"/>
    <section class="Notification">
      <h1>Web Concept</h1>
      <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
      <label for="Notification"></label>
    </section>

    <input type="radio" name="tab" id="Gallery"/>
    <section class="Gallery">
      <h1>API Doc</h1>
      <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
      <label for="Gallery"></label>
    </section>

  </div>

  <div class="menulevel">
    <div>
      <label for="menulevel"></label>
      <label for="APIDoc"></label>
    </div>
  </div>

</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Material Navigation Pure CSS</title>

</head>

<body>

<h1>Gallery</h1>

<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>

</section>

<h1>Notification</h1>

</section>

<h1>Web Concept</h1>

</section>

</section>

</div>

<div>

</div>

</body>

</html>

Second Step: Create CSS File as Name “stylesheet.css” | Change Filename as you want

body {
  background: #fff;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-weight: 300;
  transform-style: preserve-3d;
}
input[type='radio'],
.hide {
  display: none;
}
input[type='radio']:checked + section {
  top: 0;
}
.container {
  width: 100%;
  height: 100vh;
  transform-style: preserve-3d;
  transition: all 500ms;
}
.container section {
  top: 100vh;
  width: 100%;
  height: 100vh;
  position: absolute;
  transform-style: preserve-3d;
  transition: top 500ms;
}
.container section.APIDoc {
  background: #654e30;
}
.container section.WebConcept {
  background: #B8860B;
}
.container section.Notification {
  background: #BC8F8F;
}
.container section.Gallery {
  background: #2F4F4F;
}
.container section h1 {
  margin: 0;
  text-align: center;
  color: rgba(255,255,255,0.85);
  font-size: 64px;
  transform: translate(0, 30vh);
  transition: transform 500ms;
  transform-style: preserve-3d;
}
.container section p {
  margin: 0;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  margin-left: 15%;
  margin-right: 15%;
  transform: translate(0, 40vh);
  transition: transform 500ms;
  transform-style: preserve-3d;
}
.container section label {
  width: 100%;
  height: 100vh;
  top: 0;
  display: block;
  position: absolute;
}
.menulevel {
  width: 35px;
  height: 4px;
  top: 20px;
  left: 25px;
  z-index: 1000;
  display: block;
  position: fixed;
  transform: 0deg;
  transition: all 200ms;
  background: rgba(0,0,0,0.25);
}
.menulevel::before,
.menulevel::after {
  width: 35px;
  height: 4px;
  content: '';
  display: block;
  position: absolute;
  background: rgba(0,0,0,0.25);
  transition: all 200ms;
}
.menulevel::before {
  top: 10px;
}
.menulevel::after {
  top: 20px;
}
.menulevel:hover {
  background: #fff;
}
.menulevel:hover::before,
.menulevel:hover::after {
  background: #fff;
}
.menulevel div,
.menulevel div label:nth-child(1) {
  width: 35px;
  height: 35px;
  display: block;
  top: -6px;
  position: absolute;
}
.menulevel div label:nth-child(2) {
  display: none;
}
#menulevel:checked + .container {
  transition: all 500ms;
  transform-style: preserve-3d;
  transform: scale(0.65) translateY(-18%);
}
#menulevel:checked + .container section {
  opacity: 1;
  cursor: pointer;
  overflow: hidden;
  transform-style: preserve-3d;
  box-shadow: 0 0 40px rgba(0,0,0,0.25);
}
#menulevel:checked + .container section h1 {
  transform-style: preserve-3d;
   transform: scale(0.5);
}
#menulevel:checked + .container + .menulevel {
  top: 30px;
  left: 20px;
  background: #646464;
  transition: all 200ms;
  transform: rotate(225deg);
  transform-origin: center center;
  
}
#menulevel:checked + .container + .menulevel::before,
#menulevel:checked + .container + .menulevel::after {
  transition: all 200ms;
  background: #646464;
}
#menulevel:checked + .container + .menulevel::before {
  transition: opacity 0s;
  opacity: 0;
}
#menulevel:checked + .container + .menulevel::after {
  transform: rotate(90deg);
  margin-top: -20px;
}
#menulevel:checked + .container + .menulevel div label:nth-child(2) {
  width: 35px;
  height: 35px;
  display: block;
  position: absolute;
  top: -6px;
}
#menulevel:checked + .container + .menulevel div label:nth-child(1) {
  display: none;
}
.container section.APIDoc {
  z-index: 99;
}
.container section.WebConcept {
  z-index: 98;
}
.container section.Notification {
  z-index: 97;
}
.container section.Gallery {
  z-index: 96;
}
#menulevel:checked + .container section.APIDoc {
  top: 192px;
}
#menulevel:checked + .container section.APIDoc:hover {
  top: 188px;
}
#menulevel:checked + .container section.WebConcept {
  top: 132px;
}
#menulevel:checked + .container section.WebConcept:hover {
  top: 128px;
}
#menulevel:checked + .container section.Notification {
  top: 72px;
}
#menulevel:checked + .container section.Notification:hover {
  top: 68px;
}
#menulevel:checked + .container section.Gallery {
  top: 12px;
}
#menulevel:checked + .container section.Gallery:hover {
  top: 8px;
}

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

body {

background: #fff;

font-family: sans-serif;

margin: 0;

padding: 0;

overflow: hidden;

font-weight: 300;

transform-style: preserve-3d;

}

input[type='radio'],

.hide {

display: none;

}

input[type='radio']:checked + section {

top: 0;

}

.container {

width: 100%;

height: 100vh;

transform-style: preserve-3d;

transition: all 500ms;

}

.container section {

top: 100vh;

width: 100%;

height: 100vh;

position: absolute;

transform-style: preserve-3d;

transition: top 500ms;

}

.container section.APIDoc {

background: #654e30;

}

.container section.WebConcept {

background: #B8860B;

}

.container section.Notification {

background: #BC8F8F;

}

.container section.Gallery {

background: #2F4F4F;

}

.container section h1 {

margin: 0;

text-align: center;

color: rgba(255,255,255,0.85);

font-size: 64px;

transform: translate(0, 30vh);

transition: transform 500ms;

transform-style: preserve-3d;

}

.container section p {

margin: 0;

color: #fff;

font-weight: 700;

font-size: 18px;

text-align: center;

margin-left: 15%;

margin-right: 15%;

transform: translate(0, 40vh);

transition: transform 500ms;

transform-style: preserve-3d;

}

.container section label {

width: 100%;

height: 100vh;

top: 0;

display: block;

position: absolute;

}

.menulevel {

width: 35px;

height: 4px;

top: 20px;

left: 25px;

z-index: 1000;

display: block;

position: fixed;

transform: 0deg;

transition: all 200ms;

background: rgba(0,0,0,0.25);

}

.menulevel::before,

.menulevel::after {

width: 35px;

height: 4px;

content: '';

display: block;

position: absolute;

background: rgba(0,0,0,0.25);

transition: all 200ms;

}

.menulevel::before {

top: 10px;

}

.menulevel::after {

top: 20px;

}

.menulevel:hover {

background: #fff;

}

.menulevel:hover::before,

.menulevel:hover::after {

background: #fff;

}

.menulevel div,

.menulevel div label:nth-child(1) {

width: 35px;

height: 35px;

display: block;

top: -6px;

position: absolute;

}

.menulevel div label:nth-child(2) {

display: none;

}

#menulevel:checked + .container {

transition: all 500ms;

transform-style: preserve-3d;

transform: scale(0.65) translateY(-18%);

}

#menulevel:checked + .container section {

opacity: 1;

cursor: pointer;

overflow: hidden;

transform-style: preserve-3d;

box-shadow: 0 0 40px rgba(0,0,0,0.25);

}

#menulevel:checked + .container section h1 {

transform-style: preserve-3d;

transform: scale(0.5);

}

#menulevel:checked + .container + .menulevel {

top: 30px;

left: 20px;

background: #646464;

transition: all 200ms;

transform: rotate(225deg);

transform-origin: center center;

}

#menulevel:checked + .container + .menulevel::before,

#menulevel:checked + .container + .menulevel::after {

transition: all 200ms;

background: #646464;

}

#menulevel:checked + .container + .menulevel::before {

transition: opacity 0s;

opacity: 0;

}

#menulevel:checked + .container + .menulevel::after {

transform: rotate(90deg);

margin-top: -20px;

}

#menulevel:checked + .container + .menulevel div label:nth-child(2) {

width: 35px;

height: 35px;

display: block;

position: absolute;

top: -6px;

}

#menulevel:checked + .container + .menulevel div label:nth-child(1) {

display: none;

}

.container section.APIDoc {

z-index: 99;

}

.container section.WebConcept {

z-index: 98;

}

.container section.Notification {

z-index: 97;

}

.container section.Gallery {

z-index: 96;

}

#menulevel:checked + .container section.APIDoc {

top: 192px;

}

#menulevel:checked + .container section.APIDoc:hover {

top: 188px;

}

#menulevel:checked + .container section.WebConcept {

top: 132px;

}

#menulevel:checked + .container section.WebConcept:hover {

top: 128px;

}

#menulevel:checked + .container section.Notification {

top: 72px;

}

#menulevel:checked + .container section.Notification:hover {

top: 68px;

}

#menulevel:checked + .container section.Gallery {

top: 12px;

}

#menulevel:checked + .container section.Gallery:hover {

top: 8px;

}

Therefore, see the code segment to create the CSS Multi Level Menu, you will be created successfully.

you have to face any trouble then comment me down below. I will try to resolve the problem as soon as possible. thanks for viewing these posts.

CSS Multi Level Menu With Material Design | Navigation

Explanation of Source Code for CSS Multi Level Menu with Material Design

First Step: Create HTML File as Name “index.html” | Change Filename as you want

Second Step: Create CSS File as Name “stylesheet.css” | Change Filename as you want

Related Posts

About Author

admin