summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--sass/parts/_header.scss299
-rw-r--r--source/_includes/header.html21
-rw-r--r--source/javascripts/slash.js53
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
generated by cgit v1.1-2-g2b99 at 2024-11-21 14:29:38 +0100