new header for mobile device

1 files changed, 203 insertions, 96 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