Clean Responsive Navigation Menu using pure CSS3

CSS3, Web Tutorials

In this tutorial we build a very clean awesome Responsive Navigation Menu using pure CSS3. This navigation has a multi-level drop down menu the developer or user can easily use it.

Demo

Please provide your name and email address for your free download.

There are lots of tutorials in the web world for Navigation menus; here I add a clean responsive navigation menu in your view.

Getting Started

As we all know Navigation menu is very important on any websites.  Also if you check for free tutorials there are lot of best options to go around. But here in this article I am going to add a new navigation which looks really nice for clean websites. With the help of HTML and CSS3, I have written this tutorial.

First of all I will start with HTML Markup,

HTML Markup

<html>
	<head>
		<title>A Clean useful Responsive CSS3 Navigation</title>
		<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
		<link href="style.css" rel="stylesheet">
	</head>
<body class="bwe_container">
	<input type="checkbox" id="nav" /><label for="nav"></label>
	<div class="bwe_navigation">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Blog</a></li>
			<li>
			<a href="#">Features</a>
				<ul class="sub-menu">
					<li><a href="#">Feature1</a></li>
					<li><a href="#">Feature2</a></li>
					<li><a href="#">Feature3</a></li>
					<li><a href="#">Feature4</a></li>
					<li><a href="#">Feature5</a></li>
					<li><a href="#">Feature6</a></li>
				</ul>
			</li>
			<li>
			<a href="#">Services</a>
				<ul class="sub-menu">
					<li><a href="#">Service1</a></li>
					<li>
					<a href="#">Service2</a>
						<ul class="sub-menu">
							<li><a href="#">Service 2.1</a></li>
							<li><a href="#">Service 2.2</a></li>
							<li><a href="#">Service 2.3</a>
								<ul class="sub-menu">
									<li><a href="#">Service 2.3.1</a></li>
									<li><a href="#">Service 2.3.2</a></li>
									<li><a href="#">Service 2.3.3</a></li>
									<li><a href="#">Service 2.3.4</a></li>
									<li><a href="#">Service 2.3.5</a></li>
									<li><a href="#">Service 2.3.6</a></li>
								</ul>
							</li>
							<li><a href="#">Service 2.4</a></li>
							<li><a href="#">Service 2.5</a></li>
							<li><a href="#">Service 2.6</a></li>
						</ul>
					</li>
					<li><a href="#">Service3</a></li>
					<li><a href="#">Service4</a></li>
					<li><a href="#">Service5</a></li>
					<li><a href="#">Service6</a></li>
				</ul>
			</li>
			<li>
			<a href="#">Portfolio</a>
				<ul class="sub-menu">
					<li><a href="#">Portfolio1</a></li>
					<li><a href="#">Portfolio2</a></li>
					<li><a href="#">Portfolio3</a></li>
					<li><a href="#">Portfolio4</a></li>
					<li><a href="#">Portfolio5</a></li>
					<li><a href="#">Portfolio6</a></li>
				</ul>
			</li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>
</body>
</html>

Little Notes about HTML Markup

From the markup, you could see 2 different things

#1 <input type="checkbox" id="nav" /><label for="nav"></label>
#2 <div class=”bwe_navigation”> ….. </div>

#1 – It’s mainly act as Toggle in various devices: won’t work with Desktop Version.

#2 – A complete navigation with multi-level dropdown menus shows in desktop version.

Second I will share the CSS for the entire design

CSS

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

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?159ztw');
  src:  url('fonts/icomoon.eot?159ztw#iefix') format('embedded-opentype'),
  url('fonts/icomoon.ttf?159ztw') format('truetype'),
  url('fonts/icomoon.woff?159ztw') format('woff'),
  url('fonts/icomoon.svg?159ztw#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

input[type="checkbox"], label {
	  display: none;
}

.bwe_container{
	background:#cecece;
	font-family: 'Roboto Slab', serif;
}

.bwe_navigation{
	height:58px;
	background: #a934bd;
}

.bwe_navigation li a{
	color:#fff;
	text-decoration:none;
	padding: 20px;
	display: inline-block;
}

.bwe_navigation li{
	float:left;
	list-style:none;
	position: relative;
}
		
.bwe_navigation li:hover > .sub-menu{
	display: block;
	visibility: visible;
    opacity: 1;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
}
		
.bwe_navigation .sub-menu{
	position: absolute;
	width:280px;
    list-style: none;
    visibility: hidden;
    opacity: 0;
    margin: 0;
    z-index: 9999;
    -webkit-transition: all 0.17s ease-in-out;
    -moz-transition: all 0.17s ease-in-out;
    -o-transition: all 0.17s ease-in-out;
    transition: all 0.17s ease-in-out;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    -ms-transform: rotateX(-90deg);
    -o-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
}
		
.bwe_navigation .sub-menu .sub-menu{
	top: 0;
	left: 100%;
	border-left: 1px solid #c5c5c5;
}
		
.bwe_navigation .sub-menu li{
	float:none;
	background: #ffffff;
    border-top: 1px solid #e2e2e2;
}
		
.bwe_navigation .sub-menu li a:hover{
	background:#f5f5f5;
}
		
.bwe_navigation .sub-menu li a{
	display:block;
	padding:15px 20px;
	color:#3c3950;
	-webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.bwe_navigation li > a:after { 
	font-family: 'icomoon';
	content: "\e313"; 
}

.bwe_navigation .sub-menu li > a:after{
	font-family: 'icomoon';
	content: "\e315";
    position: absolute;
    right: 15px;
    font-size: 20px;
}

.bwe_navigation li > a:only-child:after { content: ''; }

@media all and (max-width: 900px) {
.bwe_navigation{
	display: none;
	width: 100%;
	clear: both;
	height:auto;
}

.bwe_navigation li a {
    color: #fff;
    text-decoration: none;
    padding: 15px;
    display: block;
}

label {
  	display: block;
  	background: #222;
	width: 40px;
  	height: 40px;
  	cursor: pointer;
	position: absolute;
	right: 0px;
  	top: 0px;
}
  
label:after{
  content:'';
  display: block;
  width: 30px;
  height: 5px;
  background: #777;
  margin: 7px 5px;
  box-shadow: 0px 10px 0px #777, 0px 20px 0px #777
}

[type="checkbox"]:checked ~ .bwe_navigation{
  	display: block;
  	z-index: 9999;
  	position: absolute;
	top: 40px;
}

.bwe_navigation .sub-menu {
	position: static;
	display: block;
	margin: 0;
	padding-left: 27px;
	visibility:visible;
	opacity:1;
	width:100%;
	-webkit-transform: initial;
	-moz-transform: initial;
	-ms-transform: initial;
	-o-transform: initial;
	transform: initial;	
	border-left:0;
}	

.bwe_navigation .sub-menu .sub-menu{
	border-left:0;
}

.bwe_navigation .sub-menu li > a:after {
    content: "\e313";
}

.bwe_navigation li > a:only-child:after { content: ''; }

.bwe_navigation li {
	width: 100%;
	float: none;
	margin-bottom: 0;
}

.bwe_navigation .sub-menu li {
	width: 100%;
}
}

Little notes about CSS

The navigation used here is an unordered list and for the alignment of menu, some styles are applied. If you have quite knowledge in CSS you could understand what is done in the CSS part.

Our main focus in this tutorial: the navigation menu should be a dropdown that should triggered using animatic effect.  So we used

transform: rotateX

This will helps the dropdown move with some scroll effect when hovering on. For a smooth scroll I used

transition: all 0.17s ease-in-out

If you want the scroll effect slow or fast just change the 0.17s to whatever you need.

For Responsive

I used

@media all and (max-width: 900px)

and give

display:block to [type="checkbox"]

and

display:none to .bwe_navigation

Now if you see in any responsive devices, you could see a toggle at the right hand side of the device and when you click, the whole navigation will display as per the coded CSS.

Wrap Up

And that’s it, a clean responsive navigation menu that works great with your desktop version and any responsive devices. If you have any queries, just comment below.

Demo

Please provide your name and email address for your free download.

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

0 comments… add one

Leave a Comment