yexuejc/solo-skins
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

当小于 650 时，导航的显示通过按钮点击控制

Browse Source
This commit is contained in:
Vanessa 2013-06-07 16:15:23 +08:00
parent c8c2d0df4e
commit e705c23e7f
6 changed files with 60 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
timeline/css/timeline.css
View File

@ -313,6 +313,7 @@ img {
color: #A5A099; color: #A5A099;
height: 22px; height: 22px;
margin-top: 13px; margin-top: 13px;
margin-bottom: 10px;
padding-left: 25px; padding-left: 25px;
transition: width 0.7s ease 0s; transition: width 0.7s ease 0s;
width: 60px; width: 60px;
@ -379,8 +380,6 @@ a:hover > .ico-pre {
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#CCCCCC', endColorstr='#A9A9A9'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#CCCCCC', endColorstr='#A9A9A9');
border-bottom: 1px solid #898989; border-bottom: 1px solid #898989;
box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 1px rgba(0, 0, 0, 0.2);
height: 50px;
overflow: hidden;
} }
.container { .container {
@ -442,6 +441,12 @@ a:hover > .ico-pre {
float: left; float: left;
list-style-type: none; list-style-type: none;
} }
.header > .container > ul,
.header > .container > form {
height: auto;
overflow: visible;
}
/* end header */ /* end header */
/* start article list */ /* start article list */
@ -763,7 +768,7 @@ article .article-title a {
.wrapper { .wrapper {
min-width: 200px; min-width: 200px;
} }
#top > .left { #top > .left {
display: block; display: block;
float: none; float: none;
@ -798,13 +803,15 @@ article .article-title a {
width: 100%; width: 100%;
} }
.header { .header .title {
height: auto; height: 26px;
max-width: 72%;
overflow: hidden;
} }
.header > .container > div { .header > .container > div.left {
height: 50px;
float: none; float: none;
height: 50px;
margin-left: 10px; margin-left: 10px;
} }
@ -839,15 +846,29 @@ article .article-title a {
} }
#search { #search {
margin-top: 0; margin: 5px 0 10px 10px;
} }
#search:focus { #search:focus {
width: 92%; width: 92%;
} }
.footer > .container > .left { .ico-list {
display: none; background-color: #FCFCFC;
background-image: url("../../timeline/images/icons.png");
background-position: 4px -206px;
background-repeat: no-repeat;
border-radius: 1px 0 3px 3px;
cursor: pointer;
float: right;
height: 25px;
margin-right: 35px;
margin-top: -29px;
width: 25px;
}
.ico-list:hover {
background-color: #FFF;
} }
.footer > .container > .right { .footer > .container > .right {
@ -902,10 +923,18 @@ article .article-title a {
.articles .dot, .articles .dot,
#admin > span, #admin > span,
.ft-next, .ft-next,
.ft-pre { .ft-pre,
.footer > .container > .left {
display: none; display: none;
} }
.header > .container > ul,
.header > .container > form {
height: 0;
overflow: hidden;
margin: 0;
}
.articles { .articles {
padding-bottom: 10px; padding-bottom: 10px;
} }

7
timeline/css/timeline.min.css vendored
View File

@ -49,14 +49,14 @@ img{max-width:100%;border:0;vertical-align:middle;}
.ico-view{background-position:0 -122px;} .ico-view{background-position:0 -122px;}
.ico-reply{background-position:0 -162px;} .ico-reply{background-position:0 -162px;}
.ico-translate{background-position:0 -186px;cursor:pointer;float:right;height:16px;margin-left:10px;width:16px;} .ico-translate{background-position:0 -186px;cursor:pointer;float:right;height:16px;margin-left:10px;width:16px;}
#search{background-position:5px -138px;border:medium none;border-radius:12px 12px 12px 12px;box-shadow:0 1px 0 rgba(0, 0, 0, 0.4) inset,0 1px 0 rgba(255, 255, 255, 0.1);color:#A5A099;height:22px;margin-top:13px;padding-left:25px;transition:width 0.7s ease 0s;width:60px;} #search{background-position:5px -138px;border:medium none;border-radius:12px 12px 12px 12px;box-shadow:0 1px 0 rgba(0, 0, 0, 0.4) inset,0 1px 0 rgba(255, 255, 255, 0.1);color:#A5A099;height:22px;margin-top:13px;margin-bottom:10px;padding-left:25px;transition:width 0.7s ease 0s;width:60px;}
#search:focus{color:#333;width:140px;} #search:focus{color:#333;width:140px;}
.ico-top{background-color:#363A3D;background-position:4px -100px;border-radius:20em 20em 20em 20em;bottom:60px;box-shadow:0 -1px 2px rgba(0, 0, 0, 0.3) inset,0 1px 0 rgba(255, 255, 255, 0.15);height:25px;position:fixed;left:90%;width:25px;cursor:pointer;} .ico-top{background-color:#363A3D;background-position:4px -100px;border-radius:20em 20em 20em 20em;bottom:60px;box-shadow:0 -1px 2px rgba(0, 0, 0, 0.3) inset,0 1px 0 rgba(255, 255, 255, 0.15);height:25px;position:fixed;left:90%;width:25px;cursor:pointer;}
.ico-next,.ico-pre{background-color:#6599C6;border-radius:10em 10em 10em 10em;color:#FFFFFF;display:block;float:left;font:20px/100% "Times New Roman",Times,serif;height:28px;margin:-8px 10px 0 0;padding:4px 0 0;text-align:center;transition:background 1s ease 0s;width:32px;} .ico-next,.ico-pre{background-color:#6599C6;border-radius:10em 10em 10em 10em;color:#FFFFFF;display:block;float:left;font:20px/100% "Times New Roman",Times,serif;height:28px;margin:-8px 10px 0 0;padding:4px 0 0;text-align:center;transition:background 1s ease 0s;width:32px;}
.ico-next{float:right;margin:-8px 0 0 10px;} .ico-next{float:right;margin:-8px 0 0 10px;}
a:hover>.ico-next,a:hover>.ico-pre{background-color:#000;} a:hover>.ico-next,a:hover>.ico-pre{background-color:#000;}
.wrapper{min-width:400px;padding:50px 0;background:url("../../timeline/images/bg.png") repeat scroll 0 0 #dee4ea;} .wrapper{min-width:400px;padding:50px 0;background:url("../../timeline/images/bg.png") repeat scroll 0 0 #dee4ea;}
.header{background-color:#BFBFBF;background-image:url("../../timeline/images/nav-bg.png"),linear-gradient(#cccccc, #a9a9a9);background-image:url("../../timeline/images/nav-bg.png"),-ms-linear-gradient(#cccccc, #a9a9a9);background-image:url("../../timeline/images/nav-bg.png"),-o-linear-gradient(#cccccc, #a9a9a9);background-image:url("../../timeline/images/nav-bg.png"),-webkit-linear-gradient(#cccccc, #a9a9a9);filter:progid:dximagetransform.microsoft.gradient(GradientType=0, startColorstr='#CCCCCC', endColorstr='#A9A9A9');border-bottom:1px solid #898989;box-shadow:0 -1px 0 rgba(255, 255, 255, 0.3) inset,0 1px 1px rgba(0, 0, 0, 0.2);height:50px;overflow:hidden;} .header{background-color:#BFBFBF;background-image:url("../../timeline/images/nav-bg.png"),linear-gradient(#cccccc, #a9a9a9);background-image:url("../../timeline/images/nav-bg.png"),-ms-linear-gradient(#cccccc, #a9a9a9);background-image:url("../../timeline/images/nav-bg.png"),-o-linear-gradient(#cccccc, #a9a9a9);background-image:url("../../timeline/images/nav-bg.png"),-webkit-linear-gradient(#cccccc, #a9a9a9);filter:progid:dximagetransform.microsoft.gradient(GradientType=0, startColorstr='#CCCCCC', endColorstr='#A9A9A9');border-bottom:1px solid #898989;box-shadow:0 -1px 0 rgba(255, 255, 255, 0.3) inset,0 1px 1px rgba(0, 0, 0, 0.2);}
.container{width:80%;margin:0 auto;} .container{width:80%;margin:0 auto;}
.footer{border-top:1px solid #232323;padding:20px 0;color:#ddd;font-size:80%;} .footer{border-top:1px solid #232323;padding:20px 0;color:#ddd;font-size:80%;}
.footer a{color:#9CC0DE;} .footer a{color:#9CC0DE;}
@ -68,6 +68,7 @@ a:hover>.ico-next,a:hover>.ico-pre{background-color:#000;}
.header li a.current{border-bottom:2px solid #D26911;} .header li a.current{border-bottom:2px solid #D26911;}
.header a:hover{color:#000;} .header a:hover{color:#000;}
.header li{float:left;list-style-type:none;} .header li{float:left;list-style-type:none;}
.header>.container>ul,.header>.container>form{height:auto;overflow:visible;}
.articles{position:relative;margin-top:11px;} .articles{position:relative;margin-top:11px;}
.articles>div.fn-clear{position:relative;margin-bottom:50px;} .articles>div.fn-clear{position:relative;margin-bottom:50px;}
.articles>div.fn-clear>h2{margin:0;text-align:center;height:28px;} .articles>div.fn-clear>h2{margin:0;text-align:center;height:28px;}
@ -112,4 +113,4 @@ article .article-title a{color:#000;text-decoration:none;}
.nav-abs li.year{background-color:#6B6B6B;clear:both;color:#CCCCCC;float:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.5);width:auto;border-width:0;} .nav-abs li.year{background-color:#6B6B6B;clear:both;color:#CCCCCC;float:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.5);width:auto;border-width:0;}
.nav-abs li:hover{background-color:#EFEEEE;color:#000;} .nav-abs li:hover{background-color:#EFEEEE;color:#000;}
.nav-abs li.year:hover,.nav-abs li.open{background-color:#353535;color:#fff;} .nav-abs li.year:hover,.nav-abs li.open{background-color:#353535;color:#fff;}
@media (max-width:650px){.wrapper{min-width:200px;} #top>.left{display:block;float:none;width:100%;} #top>a{display:block;float:none !important;} #hideTop{position:absolute;right:0;top:0;} #admin{display:block;float:none;} #admin>a{border-right-width:0 !important;display:block;float:none !important;line-height:26px !important;margin:0 !important;} .container{width:100%;} .header{height:auto;} .header>.container>div{height:50px;float:none;margin-left:10px;} .header>.container>ul{float:none;padding:0;margin:0;} .header>.container li{float:none;padding:3px 10px;} .header>.container li>a{padding:0;display:block;} .header>.container li:hover{background-color:#FFFFFF;background-image:linear-gradient(#ffffff, #e5e5e5);background-image:-ms-linear-gradient(#ffffff, #e5e5e5);background-image:-o-linear-gradient(#ffffff, #e5e5e5);background-image:-webkit-linear-gradient(#ffffff, #e5e5e5);filter:progid:dximagetransform.microsoft.gradient(GradientType=0, startColorstr='#FFFFFF', endColorstr='#E5E5E5');} .header>.container>form{float:none;margin:10px;} #search{margin-top:0;} #search:focus{width:92%;} .footer>.container>.left{display:none;} .footer>.container>.right{float:none;padding:0 10px;line-height:19px;} .footer>.container>.right>.left{float:none;} .nav-abs{position:inherit !important;padding:0;background-color:transparent;box-shadow:none;border-width:0;max-width:none !important;} .index-nav-abs{margin:0;} .nav-abs li{float:none;width:auto;} .author,.ico-reply{margin-left:75px;display:block;} .comments>li>div>div.article-body{padding-left:0;} .dynamic-l,.dynamic-r{float:none;width:auto;} .dynamic-l>div{margin-right:0;} .articles .arrow,.articles .dot,#admin>span,.ft-next,.ft-pre{display:none;} .articles{padding-bottom:10px;} .articles article{float:none;width:auto;} .articles>div.fn-clear>h2{margin-bottom:40px;}}@media (max-width:360px){.ico{display:block;float:none;line-height:19px;} .dynamic-r .ico{float:right;} #commentForm label,#replyForm label{display:block;} .footer>.container>.right>.left>span{display:block;} .ico-translate{display:block;float:none;margin-left:0;} .ico-top{bottom:114px;}} @media (max-width:650px){.wrapper{min-width:200px;} #top>.left{display:block;float:none;width:100%;} #top>a{display:block;float:none !important;} #hideTop{position:absolute;right:0;top:0;} #admin{display:block;float:none;} #admin>a{border-right-width:0 !important;display:block;float:none !important;line-height:26px !important;margin:0 !important;} .container{width:100%;} .header .title{height:26px;max-width:72%;overflow:hidden;} .header>.container>div.left{float:none;height:50px;margin-left:10px;} .header>.container>ul{float:none;padding:0;margin:0;} .header>.container li{float:none;padding:3px 10px;} .header>.container li>a{padding:0;display:block;} .header>.container li:hover{background-color:#FFFFFF;background-image:linear-gradient(#ffffff, #e5e5e5);background-image:-ms-linear-gradient(#ffffff, #e5e5e5);background-image:-o-linear-gradient(#ffffff, #e5e5e5);background-image:-webkit-linear-gradient(#ffffff, #e5e5e5);filter:progid:dximagetransform.microsoft.gradient(GradientType=0, startColorstr='#FFFFFF', endColorstr='#E5E5E5');} .header>.container>form{float:none;margin:10px;} #search{margin:5px 0 10px 10px;} #search:focus{width:92%;} .ico-list{background-color:#FCFCFC;background-image:url("../../timeline/images/icons.png");background-position:4px -206px;background-repeat:no-repeat;border-radius:1px 0 3px 3px;cursor:pointer;float:right;height:25px;margin-right:35px;margin-top:-29px;width:25px;} .ico-list:hover{background-color:#FFF;} .footer>.container>.right{float:none;padding:0 10px;line-height:19px;} .footer>.container>.right>.left{float:none;} .nav-abs{position:inherit !important;padding:0;background-color:transparent;box-shadow:none;border-width:0;max-width:none !important;} .index-nav-abs{margin:0;} .nav-abs li{float:none;width:auto;} .author,.ico-reply{margin-left:75px;display:block;} .comments>li>div>div.article-body{padding-left:0;} .dynamic-l,.dynamic-r{float:none;width:auto;} .dynamic-l>div{margin-right:0;} .articles .arrow,.articles .dot,#admin>span,.ft-next,.ft-pre,.footer>.container>.left{display:none;} .header>.container>ul,.header>.container>form{height:0;overflow:hidden;margin:0;} .articles{padding-bottom:10px;} .articles article{float:none;width:auto;} .articles>div.fn-clear>h2{margin-bottom:40px;}}@media (max-width:360px){.ico{display:block;float:none;line-height:19px;} .dynamic-r .ico{float:right;} #commentForm label,#replyForm label{display:block;} .footer>.container>.right>.left>span{display:block;} .ico-translate{display:block;float:none;margin-left:0;} .ico-top{bottom:114px;}}

1
timeline/header.ftl
View File

@ -17,6 +17,7 @@
</a> </a>
</h1> </h1>
<span class="sub-title">${blogSubtitle}</span> <span class="sub-title">${blogSubtitle}</span>
<span class="ico-list"></span>
</div> </div>
<ul class="left"> <ul class="left">
<#list pageNavigations as page> <#list pageNavigations as page>

BIN
timeline/images/icons.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

13
timeline/js/timeline.js
View File

@ -165,6 +165,19 @@ var timeline = {
timeline._initIndexList(); timeline._initIndexList();
timeline._initArticleList(); timeline._initArticleList();
timeline._setNavCurrent(); timeline._setNavCurrent();
// init header list
$(".ico-list").click(function() {
if ($(".header > .container > form").css("height") === "0px") {
$(".header > .container > ul, .header > .container > form").css({
"height": "auto"
});
} else {
$(".header > .container > ul, .header > .container > form").animate({
"height": "0px"
});
}
});
}, },
translate: function() { translate: function() {
window.open("http://translate.google.com/translate?sl=auto&tl=auto&u=" + location.href); window.open("http://translate.google.com/translate?sl=auto&tl=auto&u=" + location.href);

4
timeline/js/timeline.min.js vendored
View File

File diff suppressed because one or more lines are too long