From 0e1e747838f4ee40391f47b1b0d6d96389e1b4ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=9C=E6=81=92?= <2323333339@qq.com> Date: Tue, 19 Jan 2021 18:45:14 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/joe.global.css | 2 +- assets/css/joe.global.scss | 85 +++++++++++++++++++++++++++++++++++++ assets/img/search.png | Bin 0 -> 2879 bytes functions.php | 16 +++++++ public/header.php | 21 +++++++++ 5 files changed, 123 insertions(+), 1 deletion(-) create mode 100644 assets/img/search.png diff --git a/assets/css/joe.global.css b/assets/css/joe.global.css index 9dcccce..dc79b39 100644 --- a/assets/css/joe.global.css +++ b/assets/css/joe.global.css @@ -1 +1 @@ -.joe_header{position:-webkit-sticky;position:sticky;top:0;z-index:1000;background:var(--background);box-shadow:0 2px 10px 0 rgba(0,0,0,0.1)}.joe_header__above-logo{position:relative;display:flex;align-items:center;height:60px;padding-right:15px;margin-right:15px}.joe_header__above-logo img{max-width:150px;max-height:50px;-o-object-fit:cover;object-fit:cover}.joe_header__above-logo::after{content:'';position:absolute;top:50%;right:0;width:1px;height:20px;background:var(--classC);-webkit-transform:translateY(-50%);transform:translateY(-50%)} +.joe_header{position:-webkit-sticky;position:sticky;top:0;z-index:1000;background:var(--background);box-shadow:0 2px 10px 0 rgba(0,0,0,0.1)}.joe_header__above-logo{position:relative;display:flex;align-items:center;height:60px;padding-right:15px;margin-right:15px}.joe_header__above-logo img{max-width:150px;max-height:50px;-o-object-fit:cover;object-fit:cover}.joe_header__above-logo::after{content:'';position:absolute;top:50%;right:0;width:1px;height:20px;background:var(--classC);-webkit-transform:translateY(-50%);transform:translateY(-50%)}.joe_header__above-nav{display:flex;align-items:center}.joe_header__above-nav .item{position:relative;height:60px;line-height:60px;font-size:15px;padding:0 8px;margin-right:15px;transition:color 0.35s;white-space:nowrap;cursor:pointer;color:var(--main)}.joe_header__above-nav .item:last-child{margin-right:0}.joe_header__above-nav .item::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;transition:opacity 0.5s, -webkit-transform 0.5s;transition:opacity 0.5s, transform 0.5s;transition:opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;border-radius:6px 6px 0 0;opacity:0;-webkit-transform:scaleX(0.25);transform:scaleX(0.25);background:var(--theme)}.joe_header__above-nav .item.active,.joe_header__above-nav .item:hover{color:var(--theme)}.joe_header__above-nav .item.active::after,.joe_header__above-nav .item:hover::after{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}.joe_header__above-search{position:relative;margin-left:auto;display:flex;align-items:center}.joe_header__above-search .input{background:var(--classC);width:170px;height:34px;border:1px solid transparent;padding:0 18px;color:var(--routine);transition:background 0.35s, border-color 0.35s, padding-right 0.35s;border-radius:17px 0 0 17px}.joe_header__above-search .input:focus{background:var(--background);border-color:var(--theme);padding-right:28px}.joe_header__above-search .input:focus ~ .icon{-webkit-transform:translate3d(0, -50%, 0) rotateY(180deg);transform:translate3d(0, -50%, 0) rotateY(180deg)}.joe_header__above-search .submit{position:relative;z-index:1;height:34px;border:none;background:var(--theme);color:#fff;border-radius:0 17px 17px 0;padding:0 10px}.joe_header__above-search .icon{position:absolute;top:50%;left:142px;width:28px;height:38px;background:url(../img/search.png);background-size:100% 100%;transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s;-webkit-transform:translate3d(100%, -50%, 0) rotateY(180deg);transform:translate3d(100%, -50%, 0) rotateY(180deg)} diff --git a/assets/css/joe.global.scss b/assets/css/joe.global.scss index 39a175f..58ea7d4 100644 --- a/assets/css/joe.global.scss +++ b/assets/css/joe.global.scss @@ -28,5 +28,90 @@ transform: translateY(-50%); } } + &-nav { + display: flex; + align-items: center; + .item { + position: relative; + height: 60px; + line-height: 60px; + font-size: 15px; + padding: 0 8px; + margin-right: 15px; + transition: color 0.35s; + white-space: nowrap; + cursor: pointer; + color: var(--main); + &:last-child { + margin-right: 0; + } + &::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 3px; + transition: opacity 0.5s, transform 0.5s; + border-radius: 6px 6px 0 0; + opacity: 0; + transform: scaleX(0.25); + background: var(--theme); + } + &.active, + &:hover { + color: var(--theme); + &::after { + opacity: 1; + transform: scaleX(1); + } + } + } + } + &-search { + position: relative; + margin-left: auto; + display: flex; + align-items: center; + .input { + background: var(--classC); + width: 170px; + height: 34px; + border: 1px solid transparent; + padding: 0 18px; + color: var(--routine); + transition: background 0.35s, border-color 0.35s, padding-right 0.35s; + border-radius: 17px 0 0 17px; + &:focus { + background: var(--background); + border-color: var(--theme); + padding-right: 28px; + ~ .icon { + transform: translate3d(0, -50%, 0) rotateY(180deg); + } + } + } + .submit { + position: relative; + z-index: 1; + height: 34px; + border: none; + background: var(--theme); + color: #fff; + border-radius: 0 17px 17px 0; + padding: 0 10px; + } + .icon { + position: absolute; + top: 50%; + left: 142px; + width: 28px; + height: 38px; + background: url(../img/search.png); + background-size: 100% 100%; + transition: transform 0.35s; + transform: translate3d(100%, -50%, 0) rotateY(180deg); + } + } } } diff --git a/assets/img/search.png b/assets/img/search.png new file mode 100644 index 0000000000000000000000000000000000000000..72b32b88a5459b0aa9c3a76a26b27b62825ea047 GIT binary patch literal 2879 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'class', 'joe_content joe_image'); $form->addInput($JLogo); + + $JNavMaxNum = new Typecho_Widget_Helper_Form_Element_Select( + 'JNavMaxNum', + array( + '3' => '3个（默认）', + '4' => '4个', + '5' => '5个', + '6' => '6个', + '7' => '7个', + ), + '3', + '选择导航栏最大显示的个数', + '介绍：用于设置最大多少个后，以更多下拉框显示' + ); + $JNavMaxNum->setAttribute('class', 'joe_content joe_global'); + $form->addInput($JNavMaxNum->multiMode()); } ?> \ No newline at end of file diff --git a/public/header.php b/public/header.php index 222fb74..edb497c 100644 --- a/public/header.php +++ b/public/header.php @@ -6,6 +6,27 @@ + +
+ + + +
+ + \ No newline at end of file