更新
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%);
|
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');
|
$JLogo->setAttribute('class', 'joe_content joe_image');
|
||||||
$form->addInput($JLogo);
|
$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(); ?>">
|
<a class="joe_header__above-logo" href="<?php $this->options->siteUrl(); ?>">
|
||||||
<img src="<?php $this->options->JLogo() ?>" alt="<?php $this->options->title(); ?>" />
|
<img src="<?php $this->options->JLogo() ?>" alt="<?php $this->options->title(); ?>" />
|
||||||
</a>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</header>
|
</header>
|
||||||
Loading…
Reference in New Issue
Block a user