This commit is contained in:
杜恒 2021-01-19 18:45:14 +08:00
parent ed3b56c2be
commit 0e1e747838
5 changed files with 123 additions and 1 deletions

View File

@ -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)}

View File

@ -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);
}
}
}
}

BIN
assets/img/search.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

@ -58,4 +58,20 @@ function themeConfig($form)
);
$JLogo->setAttribute('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());
} ?>

View File

@ -6,6 +6,27 @@
<a class="joe_header__above-logo" href="<?php $this->options->siteUrl(); ?>">
<img src="<?php $this->options->JLogo() ?>" alt="<?php $this->options->title(); ?>" />
</a>
<nav class="joe_header__above-nav">
<a class="item <?php echo $this->is('index') ? 'active' : '' ?>" href="<?php $this->options->siteUrl(); ?>">首页</a>
<?php $this->widget('Widget_Contents_Page_List')->to($pages); ?>
<!-- 判断是否超出设置的个数,未超出全部直接显示 -->
<?php if (count($pages->stack) <= $this->options->JNavMaxNum) : ?>
<?php foreach ($pages->stack as $item) : ?>
<a class="item" href="">首页</a>
<?php endforeach; ?>
<?php else : ?>
<?php endif; ?>
</nav>
<form class="joe_header__above-search" method="post" action="<?php $this->options->siteUrl(); ?>">
<input maxlength="16" autocomplete="off" placeholder="请输入关键字..." name="s" class="input" type="text" />
<button type="submit" class="submit">Search</button>
<span class="icon"></span>
</form>
</div>
</div>
</header>