更新
This commit is contained in:
杜恒
parent
ed3b56c2be
commit
0e1e747838
@ -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)}
|
||||
|
||||
@ -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
BIN
assets/img/search.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
@ -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());
|
||||
} ?>
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user