当小于 650 时，导航的显示通过按钮点击控制
This commit is contained in:
Vanessa
parent
c8c2d0df4e
commit
e705c23e7f
@ -313,6 +313,7 @@ img {
|
||||
color: #A5A099;
|
||||
height: 22px;
|
||||
margin-top: 13px;
|
||||
margin-bottom: 10px;
|
||||
padding-left: 25px;
|
||||
transition: width 0.7s ease 0s;
|
||||
width: 60px;
|
||||
@ -379,8 +380,6 @@ a:hover > .ico-pre {
|
||||
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;
|
||||
}
|
||||
|
||||
.container {
|
||||
@ -442,6 +441,12 @@ a:hover > .ico-pre {
|
||||
float: left;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.header > .container > ul,
|
||||
.header > .container > form {
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
/* end header */
|
||||
|
||||
/* start article list */
|
||||
@ -763,7 +768,7 @@ article .article-title a {
|
||||
.wrapper {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
|
||||
#top > .left {
|
||||
display: block;
|
||||
float: none;
|
||||
@ -798,13 +803,15 @@ article .article-title a {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: auto;
|
||||
.header .title {
|
||||
height: 26px;
|
||||
max-width: 72%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header > .container > div {
|
||||
height: 50px;
|
||||
.header > .container > div.left {
|
||||
float: none;
|
||||
height: 50px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@ -839,15 +846,29 @@ article .article-title a {
|
||||
}
|
||||
|
||||
#search {
|
||||
margin-top: 0;
|
||||
margin: 5px 0 10px 10px;
|
||||
}
|
||||
|
||||
#search:focus {
|
||||
width: 92%;
|
||||
}
|
||||
|
||||
.footer > .container > .left {
|
||||
display: none;
|
||||
.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 {
|
||||
@ -902,10 +923,18 @@ article .article-title a {
|
||||
.articles .dot,
|
||||
#admin > span,
|
||||
.ft-next,
|
||||
.ft-pre {
|
||||
.ft-pre,
|
||||
.footer > .container > .left {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header > .container > ul,
|
||||
.header > .container > form {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.articles {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
7
timeline/css/timeline.min.css
vendored
7
timeline/css/timeline.min.css
vendored
@ -49,14 +49,14 @@ img{max-width:100%;border:0;vertical-align:middle;}
|
||||
.ico-view{background-position:0 -122px;}
|
||||
.ico-reply{background-position:0 -162px;}
|
||||
.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;}
|
||||
.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{float:right;margin:-8px 0 0 10px;}
|
||||
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;}
|
||||
.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;}
|
||||
.footer{border-top:1px solid #232323;padding:20px 0;color:#ddd;font-size:80%;}
|
||||
.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 a:hover{color:#000;}
|
||||
.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>div.fn-clear{position:relative;margin-bottom:50px;}
|
||||
.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:hover{background-color:#EFEEEE;color:#000;}
|
||||
.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;}}
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
</a>
|
||||
</h1>
|
||||
<span class="sub-title">${blogSubtitle}</span>
|
||||
<span class="ico-list"></span>
|
||||
</div>
|
||||
<ul class="left">
|
||||
<#list pageNavigations as page>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.3 KiB |
@ -165,6 +165,19 @@ var timeline = {
|
||||
timeline._initIndexList();
|
||||
timeline._initArticleList();
|
||||
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() {
|
||||
window.open("http://translate.google.com/translate?sl=auto&tl=auto&u=" + location.href);
|
||||
|
||||
4
timeline/js/timeline.min.js
vendored
4
timeline/js/timeline.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user