new header for mobile device

3 files changed, 238 insertions, 135 deletions

diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss
index 41cd977..ecc5fa3 100644
--- a/sass/parts/_header.scss
+++ b/sass/parts/_header.scss
@@ -9,11 +9,6 @@ $header-height: 30px;
 		height: auto;
 		position: relative;
 		padding-bottom: 10px;
-		>.alignright{
-			position: absolute;
-			top: 30px;
-			right: 0;
-		}
 	}
 	a{
 		color: $color-gray01;
@@ -30,115 +25,233 @@ $header-height: 30px;
 			float: none;
 		}
 	}
-	.menu{
-		float: left;
-		margin-left: 30px;
-		@media screen and (max-width: 1040px){
-			float: none;
-			margin-left: 0;
-			margin-top: 15px;
+}
+#main-nav{
+	float: left;
+	margin-left: 30px;
+	@media screen and (max-width: 1040px){
+		float: none;
+		margin-left: 0;
+		margin-top: 15px;
+	}
+	>ul{
+		@media screen and (max-width: 600px){
+			display: none;
 		}
-		>ul{
-			@media screen and (max-width: 600px){
-				display: none;
+		>li{
+			margin-left: 50px;
+			@include inline-block;
+			@media screen and (max-width: 1040px){
+				margin-left: 0;
+				margin-right: 50px;
+				&:last-of-type{
+					margin-right: 0;
+				}
+			}
+			&:hover{
+				>a{
+					color: $color-main;
+				}
 			}
-			>li{
-				margin-left: 50px;
-				@include inline-block;
+			>a{
+				padding: 38px 30px 38px 0;
+				margin-top: -38px;
+				background: image-url('detail.png') right center no-repeat;
 				@media screen and (max-width: 1040px){
-					margin-left: 0;
-					margin-right: 50px;
-					&:last-of-type{
-						margin-right: 0;
+					padding: 18px 30px 18px 0;
+					&:only-child{
+						padding-right: 0;
 					}
 				}
+				&:only-child{
+					padding-right: 0;
+					background: none;
+				}
+			}
+		}
+		ul{
+			position: absolute;
+			top: 60px;
+			left: -15px;
+			z-index: 10;
+			white-space: nowrap;
+			background: $color-gray04;
+			border: 1px solid $color-gray03;
+			list-style: none;
+			display: none;
+			@media screen and (max-width: 1040px){
+				top: 40px;
+			}
+			@include box-shadow(0 4px 8px rgba(0,0,0,0.1));
+			@include border-radius(0 0 5px 5px);
+			ul{
+				@include border-radius(0 5px 5px 5px);
+			}
+			li{
+				@include border-shadow($color-background, $color-gray03);
 				&:hover{
-					>a{
-						color: $color-main;
+					background: #d5d5d5;
+				}
+				&:first-of-type{
+					border-top: none;
+					ul{
+						@include border-radius(0 0 5px 5px);
 					}
 				}
+				&:last-of-type{
+					border-bottom: none;
+				}
 				>a{
-					padding: 38px 30px 38px 0;
-					margin-top: -38px;
-					background: image-url('detail.png') right center no-repeat;
-					@media screen and (max-width: 1040px){
-						padding: 18px 30px 18px 0;
-						&:only-child{
-							padding-right: 0;
-						}
+					background: image-url('detail-sub.png') right center no-repeat;
+					display: block;
+					padding: 5px 30px 5px 15px;
+					&:hover{
+						color: $color-gray01;
 					}
 					&:only-child{
-						padding-right: 0;
 						background: none;
+						padding-right: 15px;
 					}
 				}
 			}
 			ul{
-				position: absolute;
-				top: 60px;
-				left: -15px;
-				z-index: 10;
-				white-space: nowrap;
-				background: $color-gray04;
-				border: 1px solid $color-gray03;
-				list-style: none;
-				display: none;
-				@media screen and (max-width: 1040px){
-					top: 40px;
-				}
-				@include box-shadow(0 4px 8px rgba(0,0,0,0.1));
-				@include border-radius(0 0 5px 5px);
-				ul{
-					@include border-radius(0 5px 5px 5px);
+				top: 0;
+				left: 100%;
+			}
+		}
+		li{
+			position: relative;
+			&:hover{
+				>ul{
+					display: block;
 				}
-				li{
-					@include border-shadow($color-background, $color-gray03);
-					&:hover{
-						background: #d5d5d5;
-					}
-					&:first-of-type{
-						border-top: none;
-						ul{
-							@include border-radius(0 0 5px 5px);
-						}
-					}
-					&:last-of-type{
-						border-bottom: none;
-					}
-					>a{
-						background: image-url('detail-sub.png') right center no-repeat;
-						display: block;
-						padding: 5px 30px 5px 15px;
-						&:hover{
-							color: $color-gray01;
-						}
-						&:only-child{
-							background: none;
-							padding-right: 15px;
-						}
-					}
+			}
+		}
+	}
+	select{
+		display: none;
+		margin-bottom: 10px;
+		@media screen and (max-width: 600px){
+			display: block;
+		}
+	}
+}
+#mobile-nav{
+	display: none;
+	height: 37px;
+	position: relative;
+	@media screen and (max-width: 600px){
+		display: block;
+	}
+	a{
+		display: block;
+	}
+	.container{
+		display: none;
+	}
+	.menu{
+		position: relative;
+		width: 100%;
+		.button{
+			background: #f2f2f2;
+			border: 1px solid $color-gray04;
+			color: #999;
+			padding: 0 60px 0 10px;
+			position: relative;
+			@include border-radius(5px);
+			&:hover{
+				color: #999;
+			}
+			&.on{
+				color: #666;
+				@include border-radius(5px 5px 5px 0);
+				&:before{
+					content: "\f077";
 				}
+			}
+			&:before{
+				content: "\f078";
+				color: $color-gray04;
+				font: 16px $font-icon;
+				line-height: 30px;
+				position: absolute;
+				top: 0;
+				right: 40px;
+			}
+		}
+		.container{
+			background: #f2f2f2;
+			border: 1px solid #ddd;
+			border-top: none;
+			position: absolute;
+			top: 31px;
+			z-index: 1;
+			@include border-radius(0 0 5px 5px);
+			ul{
+				list-style: none;
 				ul{
-					top: 0;
-					left: 100%;
+					margin-left: 20px;
 				}
 			}
-			li{
-				position: relative;
-				&:hover{
-					>ul{
-						display: block;
-					}
-				}
+			a{
+				padding: 0 10px;
 			}
 		}
-		select{
-			display: none;
-			margin-bottom: 10px;
-			@media screen and (max-width: 600px){
-				display: block;
+	}
+	.search{
+		position: absolute;
+		top: 0;
+		right: 0;
+		.button{
+			background: $color-gray04;
+			width: 30px;
+			height: 30px;
+			position: absolute;
+			top: 1px;
+			right: -1px;
+			@include border-radius(0 5px 5px 0);
+			&:before{
+				content: "\f002";
+				color: #f2f2f2;
+				font: 20px $font-icon;
+				line-height: 30px;
+				position: absolute;
+				top: 0;
+				left: 7px;
+			}
+			&.on{
+				background: $color-gray03;
+				&:before{
+					content: "\f00d";
+				}
 			}
 		}
+		.container{
+			position: absolute;
+			right: 51px;
+			z-index: 1;
+		}
+		input[type="text"]{
+			background: #fff;
+			border: 1px solid $color-gray04;
+			border-right: none;
+			color: $color-gray02;
+			font: 13px $font-default;
+			height: 30px;
+			width: 100%;
+			padding: 0 10px;
+			@include border-radius(5px 0 0 5px);
+		}
+	}
+}
+#sub-nav{
+	@media screen and (max-width: 1040px){
+		position: absolute;
+		top: 30px;
+		right: 0;
+	}
+	@media screen and (max-width: 600px){
+		display: none;
 	}
 	.search{
 		float: left;
@@ -147,9 +260,6 @@ $header-height: 30px;
 			float: none;
 			margin-top: 15px;
 		}
-		@media screen and (max-width: 600px){
-			margin-top: 40px;
-		}
 		input[type="text"]{
 			background: image-url('search.png') 10px center no-repeat #f2f2f2;
 			color: $color-gray02;
@@ -177,9 +287,6 @@ $header-height: 30px;
 				margin-right: 0;
 			}
 		}
-		@media screen and (max-width: 600px){
-			display: none;
-		}
 		a{
 			@include border-radius(50%);
 			@include inline-block;
@@ -242,4 +349,4 @@ $header-height: 30px;
 			}
 		}
 	}
-}
+}
\ No newline at end of file
diff --git a/source/_includes/header.html b/source/_includes/header.html
index fa076d1..64db260 100644
--- a/source/_includes/header.html
+++ b/source/_includes/header.html
@@ -1,6 +1,21 @@
 <h1><a href="{{ root_url }}/">{{ site.title }}</a></h1>
-<nav class="menu">{% include navigation.html %}</nav>
-<div class="alignright">
+<nav id="main-nav">{% include navigation.html %}</nav>
+<nav id="mobile-nav">
+	<div class="alignleft menu">
+		<a class="button">Menu</a>
+		<div class="container">{% include navigation.html %}</div>
+	</div>
+	<div class="alignright search">
+		<a class="button"></a>
+		<div class="container">
+			<form action="{{ site.simple_search }}" method="get">
+				<input type="text" name="q" results="0">
+				<input type="hidden" name="q" value="site:{{ site.url | shorthand_url }}">
+			</form>
+		</div>
+	</div>
+</nav>
+<nav id="sub-nav" class="alignright">
 	<div class="social">
 		{% if site.facebook_user %}
 		<a class="facebook" href="http://www.facebook.com/{{ site.facebook_user }}" title="Facebook">Facebook</a>
@@ -28,5 +43,5 @@
 		<input class="alignright" type="text" name="q" results="0">
 		<input type="hidden" name="q" value="site:{{ site.url | shorthand_url }}">
 	</form>
-</div>
+</nav>
 {% include custom/header.html %}
diff --git a/source/javascripts/slash.js b/source/javascripts/slash.js
index 6433ba0..c33635a 100644
--- a/source/javascripts/slash.js
+++ b/source/javascripts/slash.js
@@ -14,41 +14,6 @@
 		});
 	};
 
-	// Append menu for mobile device
-	var navigationMenu = function(){
-		var appends = '<option>Menu</option>';
-
-		var search = function(obj, level){
-			var children = obj.children(),
-				link = children.eq(0),
-				_level = level + 1;
-
-			appends += '<option value="'+link.attr('href')+'">';
-
-			if (level > 0) appends += '|';
-
-			for (var i=0; i<level; i++){
-				appends += '—';
-			}
-
-			appends += link.text()+'</option>';
-
-			if (children.length > 1){
-				children.eq(1).children('li').each(function(){
-					search($(this), _level);
-				});
-			}
-		};
-
-		$('#header .menu .main').children('li').each(function(){
-			search($(this), 0);
-		});
-
-		$('#header .menu').append('<select>'+appends+'</select>').on('change', 'select', function(){
-			location.href = $(this).val();
-		});
-	};
-
 	// Append caption after pictures
 	var appendCaption = function(){
 		$('.entry-content').each(function(i){
@@ -66,6 +31,22 @@
 	};
 
 	externalLinks(); // Delete or comment this line to disable opening external links in new window
-	navigationMenu(); // Delete or comment this line to disable menu for mobile device
 	appendCaption(); // Delete or comment this line to disable caption
+
+	var mobilenav = $('#mobile-nav');
+	mobilenav.on('click', '.menu .button', function(){
+		if (!$(this).hasClass('on')){
+			var width = $(this).width() + 42;
+			$(this).addClass('on').next().show().css({width: width});
+		} else {
+			$(this).removeClass('on').next().hide();
+		}
+	}).on('click', '.search .button', function(){
+		if (!$(this).hasClass('on')){
+			var width = mobilenav.width() - 51;
+			$(this).addClass('on').next().show().css({width: width}).children().children().eq(0).focus();
+		} else {
+			$(this).removeClass('on').next().hide().children().children().eq(0).val('');
+		}
+	});
 })(jQuery);
\ No newline at end of file