diff options
| -rw-r--r-- | sass/base/_layout.scss | 4 | ||||
| -rw-r--r-- | sass/parts/_header.scss | 52 | ||||
| -rw-r--r-- | source/_includes/custom/navigation.html | 18 | ||||
| -rw-r--r-- | source/images/detail.png | bin | 0 -> 1135 bytes |
4 files changed, 61 insertions, 13 deletions
diff --git a/sass/base/_layout.scss b/sass/base/_layout.scss index 2f9586d..0ccdb0d 100644 --- a/sass/base/_layout.scss +++ b/sass/base/_layout.scss @@ -12,8 +12,8 @@ $max-width: 1000px; user-select: $select; } @mixin border-shadow($top: #fff, $bottom: #ddd){ - border-top: 1px solid #fff; - border-bottom: 1px solid #ddd; + border-top: 1px solid $top; + border-bottom: 1px solid $bottom; } *{ diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss index 7c17a86..e792976 100644 --- a/sass/parts/_header.scss +++ b/sass/parts/_header.scss @@ -16,14 +16,62 @@ header{ } nav{ margin-left: 30px; - ul{ + >ul{ list-style: none; - li{ + padding-right: 30px; + >li{ float: left; margin-left: 50px; + position: relative; + >a{ + padding: 35px 30px 35px 0; + margin-top: -35px; + background: image-url('detail.png') right center no-repeat; + &:only-child{ + padding-right: 0; + background: none; + } + } } ul{ + position: absolute; + top: 60px; + left: 0; + z-index: 10; + white-space: nowrap; + background: #ddd; + border: 1px solid #ccc; + border-radius: 0 0 5px 5px; + box-shadow: 0 4px 8px #DDDDDD; + list-style: none; display: none; + li{ + @include border-shadow(#eee, #ccc); + &:hover{ + background: #d5d5d5; + } + &:first-of-type{ + border-top: none; + } + &:last-of-type{ + border-bottom: none; + } + a{ + display: block; + padding: 5px 15px; + width: 100%; + &:hover{ + color: #666; + } + } + } + } + li{ + &:hover{ + >ul{ + display: block; + } + } } } } diff --git a/source/_includes/custom/navigation.html b/source/_includes/custom/navigation.html index a572467..4027e4d 100644 --- a/source/_includes/custom/navigation.html +++ b/source/_includes/custom/navigation.html @@ -1,19 +1,19 @@ <ul class="main"> - <li><a href="{{ root_url }}/l10n">中文化</a></li> + <li><a href="{{ root_url }}/blog/categories/%E4%B8%AD%E6%96%87%E5%8C%96/">中文化</a></li> <li> - <a href="{{ root_url }}/themes">主題</a> + <a href="{{ root_url }}/blog/categories/%E4%B8%BB%E9%A1%8C/">主題</a> <ul class="sub-menu"> - <li><a href="{{ root_url }}/themes/pixivcustom">Pixiv Custom</a></li> - <li><a href="{{ root_url }}/themes/corner">Corner</a></li> + <li><a href="{{ root_url }}/blog/2010/12/30/pixiv-custom/">Pixiv Custom</a></li> + <li><a href="{{ root_url }}/blog/2011/05/27/corner-theme/">Corner</a></li> </ul> </li> <li> - <a href="{{ root_url }}/scripts">腳本</a> + <a href="{{ root_url }}/blog/categories/JavaScript/">腳本</a> <ul class="sub-menu"> - <li><a href="{{ root_url }}/scripts/google-plus-hover-zoom">Google+ Hover Zoom</a></li> - <li><a href="{{ root_url }}/scripts/google-plus-fxxking-filter">Google+ Fxxking Filter</a></li> - <li><a href="{{ root_url }}/scripts/google-plus-motionless">Google+ Motionless</a></li> - <li><a href="{{ root_url }}/scripts/google-plus-speed-reply">Google+ Speed Reply</a></li> + <li><a href="http://userscripts.org/scripts/show/106681">Google+ Hover Zoom</a></li> + <li><a href="http://userscripts.org/scripts/show/111206">Google+ Fxxking Filter</a></li> + <li><a href="http://userscripts.org/scripts/show/111484">Google+ Motionless</a></li> + <li><a href="http://userscripts.org/scripts/show/119216">Google+ Speed Reply</a></li> </ul> </li> </ul> diff --git a/source/images/detail.png b/source/images/detail.png Binary files differnew file mode 100644 index 0000000..9093a61 --- /dev/null +++ b/source/images/detail.png |
