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:
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 |
<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> |
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
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 |
<!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> |
Second Step: Create CSS File as Name “stylesheet.css” | Change Filename as you want
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 |
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; } |
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.