/ Menu

Vue JS Header responsive dropdown menu

Vue JS Header responsive dropdown menu

VueJS Header responsive & Loader

Vue JS Header responsive dropdown menu.

Vue-JS-Header-responsive-dropdown-menu

Made with

Html
Css/LESS
Javascript

Html

  	<div id="app">
		<link href="https://fonts.googleapis.com/css?family=Roboto|Poppins" rel="stylesheet">
		<meta name="viewport" content="width=device-width">
		<header>
			<div class="wrap">
				<div id="hamburger" v-on:click="display_menu()">
					<span></span>
					<span></span>
					<span></span>
				</div>
				<img src="https://humancoders-formations.s3.amazonaws.com/uploads/course/logo/104/thumb_bigger_formation-vue-js.png" alt="logo">
				<nav id="menu">
					<li><a>Menu 1</a></li>
					<li class="drop"><a v-on:click="display_drop_menu()">Menu 2 dropdown <i class="icon-arrow"></i></a>
						<ul class="drop_menu">
							<a>Sub menu 1</a>
							<a>Sub menu 2</a>
							<a>Sub menu 3</a>
						</ul>
					</li>
					<li class="drop"><a v-on:click="display_drop_menu()">Menu 3 dropdown  <i class="icon-arrow"></i></a>
						<ul class="drop_menu">
							<a>Sub menu 1</a>
							<a>Sub menu 2</a>
							<a>Sub menu 3</a>
						</ul>
					</li>
					<li><a>Menu 4</a></li>
				</nav>
			</div>
		</header>
		<div id="loader" v-if="load">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>
		<div id="overlay" v-if="load"></div>
		<div id="background">
			<h3>This menu is responsive, resized on.</h3>
			<h3>The header is hide when scroll down and show when scroll up, try it !</h3>
			<button v-on:click="loaded()">Click here for loader!</button></button>
		</div>
	</div>

Css

@cblue : #41B883;
@cgrey : #3E3A37;
@cwhite : #ffffff;
@ccream : #FAFBFC;
@cgrey_green: #435466;
@clightgrey : #DAD9D7;

@body_height_8: calc((100vh - 113px)/8);
@body_height_4: calc((100vh - 113px)/4);
.icon-arrow {
	mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 284.929 284.929'><path d='M282.082,76.511l-14.274-14.273c-1.902-1.906-4.093-2.856-6.57-2.856c-2.471,0-4.661,0.95-6.563,2.856L142.466,174.441		L30.262,62.241c-1.903-1.906-4.093-2.856-6.567-2.856c-2.475,0-4.665,0.95-6.567,2.856L2.856,76.515C0.95,78.417,0,80.607,0,83.082c0,2.473,0.953,4.663,2.856,6.565l133.043,133.046c1.902,1.903,4.093,2.854,6.567,2.854s4.661-0.951,6.562-2.854L282.082,89.647c1.902-1.903,2.847-4.093,2.847-6.565C284.929,80.607,283.984,78.417,282.082,76.511z'/></svg>");
}
i {
	vertical-align: middle;
	display: inline-block;
	background-repeat: no-repeat;
}

html, body {margin: 0;width: 100%;height: 100%; font-size: 14px; font-family: 'Roboto', sans-serif;}
* {box-sizing: border-box;}
body {background-color: @ccream;padding-top: 113px; overflow-x: hidden; &.display_menu{overflow-y: hidden;}}
ul {padding: 0; margin: 0;}
li {list-style: none;}
.wrap {max-width: 1024px; min-width: 320px;}
header {
	display: flex;
	z-index: 1;
	padding: 10px 0;
	background-color: @cwhite;
	position: fixed;
	width: 100%;
	top: 0;
	justify-content: center;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
	transition: 0.33s;
}
header .wrap {
	padding: 0 2%;
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}
header img {
	width: 100px;
}
header #menu {
	display: flex;
	flex-direction: row;
}
header #menu li {
	position: relative;
	user-select: none;
	margin-left: 20px;
	i {width: 12px; height: 12px; background-color: @cgrey;}
	a {
		color: @cgrey;
		cursor: pointer;
		font-size: 1.15em;
		border: none;
		border-bottom: 2px solid @cwhite;
		transition: 0.15s;
		background: none;
		&:hover {
			border-bottom-color: @cblue;
			color: @cblue;
			i {
			background-color: @cblue;
			}
		}
	}
}
header .drop_menu {
	position: absolute;
	display: block;
	top: 149%;
	transform: scaleY(0);
	width: auto;
    transform-origin: top;
    background-color: @cwhite;
	transition: 0.25s;
	padding-bottom: 10px;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
	a {
		margin-left: 20px;
		display: block;
		transition: 0.45s;
		opacity: 0;
		margin-right: 20px;
		padding: 10px 0 0 0;
	}
}

header .drop_menu.display {
	transform: scaleY(1);
	a {
		opacity: 1;
	}
}
header #hamburger {
	cursor: pointer;
	border-radius: 50%;
	position: absolute;
	left: 3%;
	top: 30px;
	display: none;
	transform: translateY(-50%);
}
header #hamburger span {
	height: 2px;
	margin-top: 5px;
	margin-bottom: 5px;
	background-color: @cgrey;
	display: block;
	transition: 0.33s;
	&:nth-child(1) {width: 12px;}
	&:nth-child(2) {width: 24px;}
	&:nth-child(3) {width: 12px;}
}
.display_menu header #hamburger {
	span:nth-child(1) {transform: rotate(45deg) translate(2px, 1px); }
	span:nth-child(2) {transform: rotate(-45deg) ;}
	span:nth-child(3) {transform: rotate(45deg) translate(6px, -9px);}
}
#background {
	content: '';
	display: block;
	width: 100vw;
	height: 200vh;
	padding: 5%;
	background-color: @cblue;
	h3 {
		margin: 0;
		margin-bottom: 1%;
		font-size: 1.5em;
		text-align: center;
		color: @cwhite;
		i {
			width: 13px;
			height: 20px;
			background-color: @cwhite;
		}
	}
	button {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		cursor: pointer;
		padding: 5px 10px;
		font-size: 1.3em;
		border:none;
		background-color: @cgrey_green;
		color: @cwhite;
	}
}
#loader {
	display: block;
	width: 50px;
	height: 50px;
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 3;
	margin-left: -25px;
	margin-top: -25px;
	animation: spin 1s infinite linear;
	span {
	    display: block;
	    width: 100%;
	    height: 100%;
	    border-radius: 50%;
	    position: absolute;
	    top: 0;
	    left: 0;
	    border-width: 0px 0px 10px 10px;
	    border-style: solid;
	    border-color: transparent;
		&:nth-child(0) {border-left-color: @cblue;}
	    &:nth-child(1) {transform: rotate(-40deg);  border-left-color: @cblue;}
	  	&:nth-child(2) {transform: rotate(-80deg);  border-left-color: @cblue;}
	  	&:nth-child(3) {transform: rotate(-130deg);	border-left-color: @cgrey_green;}
	  	&:nth-child(4) {transform: rotate(-170deg);	border-left-color: @cgrey_green;}
	  	&:nth-child(5) {transform: rotate(-210deg);	border-left-color: @cgrey_green;}
	  	&:nth-child(6) {transform: rotate(-250deg);	border-left-color: @cgrey;}
	  	&:nth-child(7) {transform: rotate(-280deg);	border-left-color: @cgrey;}
	  	&:nth-child(8) {transform: rotate(-320deg);	border-left-color: @cgrey;}
	  	&:nth-child(9) {transform: rotate(-360deg);	border-left-color: @cblue;}
	}
}
@keyframes spin { from {transform: rotate(0deg);} to {transform: rotate(-360deg);}}
#overlay {
	display: block;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	background-color: @cgrey;
	opacity: 0.5;
}
@media screen and (max-width: 660px) {
	body {padding-top: 70px;}
	header .wrap {
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding: 0;
	}
	header img {width: 50px;}
	header #hamburger {
		display: block;
	}
	header #menu {
		width: 100%;
		display: block;
     	height: 0;
    	transform-origin: 50% 0;
     	transition: 0.33s ease;
		flex-direction: column;
	}
	.display_menu header #menu {
     	height: calc(100vh - 64px);
		li {
     		height: @body_height_8;
			border-bottom: 1px solid @clightgrey;
     		transition: 0.25s ease;
			opacity: 1;
			display: block;
			a {
			}
		}
	}
	header #menu li {
		height: 0;
		opacity: 0;
		margin-left: 0;
     	transition: 0.25s ease;
		a {
			left: 0;
     		line-height: @body_height_8;
			padding-left: 20px;
			border: none;
			height: 100%;
			width: 100%;
			display: block;
			&:hover {
				color: @cwhite;
				background-color: @cblue;
				i {background-color: @cwhite;}
			}
		}
		i {
			position: absolute;
			right: 20px;
			top: 50%;
			transform: translateY(-50%);
			background-color: @cgrey;
		}
	}
	header .drop_menu {
		top: @body_height_8;
		box-shadow: none;
		left: 0;
		padding-bottom: 0;
		width: 100%;
		a {
			width: 100%;
			padding: 0 !important;
			padding-left: 40px !important;
			margin: 0;
			border-bottom: 1px solid @clightgrey !important;
		}
	}
}
@media screen
and(max-width: 660px)
and(max-height: 500px){
	
	.display_menu header  {
		max-height: 100vh;
		overflow-y: scroll;
	}
	.display_menu header #menu {
		li {
     		height: @body_height_4;
     	}
	}
	header #menu li {
		a {
     		line-height: @body_height_4;
     	}
    }
    header .drop_menu {
		top: @body_height_4;
	}
}
i {
	vertical-align: middle;
	display: inline-block;
	background-repeat: no-repeat;
}

Javascript


window.addEventListener("resize", function(event) {
	close_all_menu();
	document.getElementsByTagName("body")[0].classList.remove("display_menu");
});
var last_scroll = 0;
window.onscroll = function() {
	if(!document.getElementById("loader")){
		close_all_menu();
		var header = document.getElementsByTagName("header")[0];
		if(Math.abs(last_scroll - this.scrollY) <= 5) return;
		(this.scrollY < last_scroll) ? header.style.top = "0" : header.style.top = "-" + header.clientHeight + "px" ;
		last_scroll = this.scrollY;
	}
}
var app = new Vue({
  el: '#app',
  data: {
			load : false,
	},
	methods: {
		display_menu : function(){
			var body = document.getElementsByTagName("body")[0];
			(!body.classList.contains("display_menu")) ? body.classList.add("display_menu") : body.classList.remove("display_menu");
		},
		display_drop_menu : function(){
			var drop_menu = event.target.parentElement.getElementsByClassName("drop_menu")[0];
			var drop_menus = document.getElementsByClassName("drop_menu");

			Array.from(drop_menus).forEach(function(e){
				if(e != drop_menu){
					e.classList.remove("display");
				}
			});
			var lis = document.getElementById("menu").getElementsByTagName("li");
			Array.from(lis).forEach(function(e){
				e.style.marginTop = 0;
			});
			(!drop_menu.classList.contains("display")) ? drop_menu.classList.add("display") : drop_menu.classList.remove("display");
			if(window.innerWidth < 660 && drop_menu.classList.contains("display")) {
				event.target.parentElement.nextSibling.nextSibling.style.marginTop = drop_menu.clientHeight + "px";
			}
		},
		loaded : function(){
        	document.getElementsByTagName("body")[0].style.overflowY = "hidden";
        	this.load = true;
		}
	}
});
function close_all_menu() {
	var lis = document.getElementById("menu").getElementsByTagName("li");
	Array.from(lis).forEach(function(e){
		e.style.marginTop = 0;
	});
	var drop_menus = document.getElementsByClassName("drop_menu");
	Array.from(drop_menus).forEach(function(e){
		e.classList.remove("display");
	});
}

Author

Raphaël

Demo

See the Pen VueJS Header responsive & Loader by Raphaël (@raphaelbensimon) on CodePen.