Responsive Menu

by IvanOrtiz

HTML

<header>
			<a href="" id="logotipo">
				<img  src="img/matissos_logo.jpg" alt="Logotipo de Matissos">
			</a>
			<nav>
				<ul id="menu_principal">
					<li class="levelFather"><a >Matissos</a>
					<ul class="secondLevel">
						<li><a href="">Units en superem</a></li>
						<li><a href="">Filosofia</a></li>
						<li><a href="">Origens</a></li>
						<li><a href="">Gestió</a></li>
					</ul></li>
					<li><a href="">La Trifulga</a></li>
					<li><a href="">Namasté</a></li>
					<li><a href="">Rondo Literari</a></li>
				</ul>

			</nav>
		</header>

SCSS

header{
	height:90px;	
}

#logotipo{
	display:inline-block;
	vertical-align:bottom;
	width:100px;
	margin: 5px;

	img{
		width:100%;
	}
}

nav{
		display:inline-block;
		vertical-align:bottom;
		float:right;
		margin-top:30px;
		margin-right:1.5%;

	@media(min-width: 700px){
		margin-top:40px;
	}
}

#menu_principal{
	


	@media(max-width: 699px){
		display:none;
		position:absolute;
		left:0px;
		right:0px;
		top: 85px;
		background-color:white;


		&.openMenu{
			display:block;
		}
	}

	>li{
		&:hover{
			background-color:#F2F2F2;
		}

		@media(min-width: 700px){
			display: inline-block;
			vertical-align:top;
		}
		
		a{
			display:block;
			padding: 10px 15px;
			text-decoration:none;
			color:black;
		}

		&.levelFather{
			@media(min-width: 700px){
				position:relative;
			}
		}	

		.secondLevel{
			display:none;
			background-color:#FDFDFD;


			@media(min-width: 700px){
				position:absolute;
				top: 44px;
				left:0px;
				width:170px;


			}

			li:hover{
				background-color:#F2F2F2;
			}

		}


		&:hover .secondLevel{

			@media(min-width: 700px){
				display:block;
			}
		}

	}

	.responsive-submenu{
		 &>a{
		 	background-image:url("../img/matissos_open.svg");;
			background-position: right center; 
			background-repeat: no-repeat; 
			background-size: 20px 20px;
		}
		&.open>a{
		 	background-image:url("../img/matissos_close.svg");;
		}

		& .secondLevel{
			display:none;
		}

		&.open .secondLevel{
			display:block;
		}
	}
}

.responsive-menu-icon {
	cursor: pointer;
	text-align: center;
	float: right;
	display: inline-block;

	&::before{
		color: black;
		content: url("../img/matissos_menu.svg");
		display: inline-block;
		width:30px;
		margin: 0 auto;
		padding: 0px;
	}
}

JavaScript

jQuery(function( $ ){

	$(document).ready(function(){

		/*
		* @name: setDimensions
		* @author: Ivan Ortiz
		* @versio: 0.1
		* @description: Vigila el tamaño de la pantalla
		* @date: 2016/04/04
		*
		* @param: none
		* @return: none
		*/

		delay = 250,
		throttled = false,
		calls = 0;

		function setDimensions(){
			responsiveMenu();
		};


		// window.resize event listener
		window.addEventListener('resize', function() {
		    // only run if we're not throttled
		  if (!throttled) {
		    // actual callback action
		    setDimensions();
		    // we're throttled!
		    throttled = true;
		    // set a timeout to un-throttle
		    setTimeout(function() {
		      throttled = false;
		    }, delay);
		  }  
		});

		setDimensions();

		/*
		* @name: responsiveMenu
		* @author: Ivan Ortiz
		* @versio: 0.1
		* @description: 
		* @date: 2016/04/04
		*
		* @param: none
		* @return: none
		*/
		function responsiveMenu(){

			var el = $("#menu_principal");
			var el2 = $(".levelFather");

			if (window.matchMedia("(max-width: 699px)").matches) {
				if(!el.hasClass("responsive-menu")){
					el.addClass("responsive-menu").before('<div class="responsive-menu-icon"></div>');

					$(".responsive-menu-icon").click(function(){
						$("#menu_principal").toggleClass("openMenu");
					});
				}
				if(!el2.hasClass("responsive-submenu")){
					el2.addClass("responsive-submenu");

					el2.click(function(){
						$(this).toggleClass("open");
					});

				}

			}else{

				if(el.hasClass("responsive-menu")){
					el.removeClass("responsive-menu");
					if(el.hasClass("openMenu")){el.removeClass("openMenu");}
					el.prev().remove();
				}

				if(el2.hasClass("responsive-submenu")){
					el2.removeClass("responsive-submenu");
					if(el2.hasClass("open")){el2.removeClass("open");}
				}



				$("#menu_principal").removeAttr("style");
			}

		}


	}); //End $(document).ready

}); //End jQuery function