mirror of
https://github.com/typecho/typecho.git
synced 2025-04-21 02:01:52 +02:00
improve header nav
This commit is contained in:
joyqi
parent
1661303b9f
commit
55616ef1f2
@ -30,26 +30,11 @@
|
||||
p.prependTo(document.body);
|
||||
}
|
||||
|
||||
function checkScroll () {
|
||||
if ($(window).scrollTop() >= offset) {
|
||||
p.css({
|
||||
'position' : 'fixed',
|
||||
'top' : 0
|
||||
});
|
||||
} else {
|
||||
p.css({
|
||||
'position' : 'absolute',
|
||||
'top' : offset
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
$(window).scroll(function () {
|
||||
checkScroll();
|
||||
p.css({
|
||||
'position' : 'sticky',
|
||||
'top' : offset
|
||||
});
|
||||
|
||||
checkScroll();
|
||||
|
||||
p.slideDown(function () {
|
||||
var t = $(this), color = '#C6D880';
|
||||
|
||||
@ -75,50 +60,6 @@
|
||||
}
|
||||
})();
|
||||
|
||||
|
||||
// 导航菜单 tab 聚焦时展开下拉菜单
|
||||
const menuBar = $('.menu-bar').click(function () {
|
||||
const nav = $(this).next('#typecho-nav-list');
|
||||
if (!$(this).toggleClass('focus').hasClass('focus')) {
|
||||
nav.removeClass('expanded noexpanded');
|
||||
}
|
||||
});
|
||||
|
||||
$('.main, .typecho-foot').on('click touchstart', function () {
|
||||
if (menuBar.hasClass('focus')) {
|
||||
menuBar.trigger('click');
|
||||
}
|
||||
});
|
||||
|
||||
$('#typecho-nav-list ul.root').each(function () {
|
||||
const ul = $(this), nav = ul.parent();
|
||||
let focused = false;
|
||||
|
||||
ul.on('click touchend', '.parent a', function (e) {
|
||||
nav.removeClass('noexpanded').addClass('expanded');
|
||||
if ($(window).width() < 576 && e.type == 'click') {
|
||||
return false;
|
||||
}
|
||||
}).find('.child')
|
||||
.append($('<li class="return"><a><?php _e('返回'); ?></a></li>').click(function () {
|
||||
nav.removeClass('expanded').addClass('noexpanded');
|
||||
return false;
|
||||
}));
|
||||
|
||||
$('a', ul).focus(function () {
|
||||
ul.addClass('expanded');
|
||||
focused = true;
|
||||
}).blur(function () {
|
||||
focused = false;
|
||||
|
||||
setTimeout(function () {
|
||||
if (!focused) {
|
||||
ul.removeClass('expanded');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
if ($('.typecho-login').length == 0) {
|
||||
$('a').each(function () {
|
||||
var t = $(this), href = t.attr('href');
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -14,7 +14,7 @@ $stat = \Widget\Stat::alloc();
|
||||
$stat->myPublishedPostsNum, $stat->myPublishedCommentsNum, $stat->categoriesNum); ?>
|
||||
<br><?php _e('点击下面的链接快速开始:'); ?></p>
|
||||
|
||||
<ul id="start-link" class="clearfix">
|
||||
<ul id="start-link">
|
||||
<?php if ($user->pass('contributor', true)): ?>
|
||||
<li><a href="<?php $options->adminUrl('write-post.php'); ?>"><?php _e('撰写新文章'); ?></a></li>
|
||||
<?php if ($user->pass('editor', true) && 'on' == $request->get('__typecho_all_comments') && $stat->waitingCommentsNum > 0): ?>
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
<?php if (!defined('__TYPECHO_ADMIN__')) exit; ?>
|
||||
<div class="typecho-head-nav clearfix" role="navigation">
|
||||
<button class="menu-bar"><?php _e('菜单'); ?></button>
|
||||
<header class="typecho-head-nav" role="navigation">
|
||||
<nav id="typecho-nav-list">
|
||||
<details class="menu-bar">
|
||||
<summary><?php _e('菜单'); ?></summary>
|
||||
</details>
|
||||
<?php $menu->output(); ?>
|
||||
</nav>
|
||||
<div class="operate">
|
||||
@ -14,5 +16,5 @@
|
||||
class="exit" href="<?php $options->logoutUrl(); ?>"><?php _e('登出'); ?></a><a
|
||||
href="<?php $options->siteUrl(); ?>"><?php _e('网站'); ?></a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
@ -13,9 +13,12 @@ $color-nav-child-focus: #6DA1BB;
|
||||
.typecho-head-nav {
|
||||
padding: 0 10px;
|
||||
background: $color-nav-bg;
|
||||
position: relative;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
display: flex;
|
||||
z-index: 100;
|
||||
|
||||
a, button.menu-bar {
|
||||
a, .menu-bar summary {
|
||||
padding: 0 20px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
@ -28,88 +31,96 @@ $color-nav-child-focus: #6DA1BB;
|
||||
}
|
||||
}
|
||||
|
||||
button.menu-bar {
|
||||
.menu-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
menu {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
background: $color-nav-bg;
|
||||
}
|
||||
|
||||
#typecho-nav-list {
|
||||
float: left;
|
||||
|
||||
& > ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
& > menu {
|
||||
display: flex;
|
||||
position: relative;
|
||||
float: left;
|
||||
|
||||
&:first-child {
|
||||
border-left: $border-nav;
|
||||
}
|
||||
& > li {
|
||||
|
||||
.parent {
|
||||
a {
|
||||
display: inline-block;
|
||||
border-right: $border-nav;
|
||||
background: $color-nav-bg;
|
||||
&:first-child {
|
||||
border-left: $border-nav;
|
||||
}
|
||||
}
|
||||
|
||||
.child {
|
||||
position: absolute;
|
||||
list-style: none;
|
||||
top: 36px;
|
||||
display: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-width: 160px;
|
||||
max-width: 240px;
|
||||
background: $color-nav-btn-hover;
|
||||
z-index: 250;
|
||||
> a {
|
||||
display: block;
|
||||
border-right: $border-nav;
|
||||
|
||||
li {
|
||||
&.return {
|
||||
display: none;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
background: $color-nav-btn-hover;
|
||||
|
||||
a {
|
||||
overflow: hidden;
|
||||
text-overflow : ellipsis;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $color-nav-bg;
|
||||
& + menu {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.focus a {
|
||||
color: $color-nav-child-focus;
|
||||
font-weight: bold;
|
||||
&.focus > a {
|
||||
background: $color-nav-btn-hover;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&:hover > a {
|
||||
background: $color-nav-btn-hover;
|
||||
}
|
||||
|
||||
&:hover, &:focus-within, &:focus {
|
||||
menu {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.parent a:hover,
|
||||
&.focus .parent a,
|
||||
&.root:hover .parent a {
|
||||
background: $color-nav-btn-hover;
|
||||
}
|
||||
menu {
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
display: none;
|
||||
flex-flow: column;
|
||||
min-width: 160px;
|
||||
max-width: 240px;
|
||||
background: $color-nav-btn-hover;
|
||||
z-index: 250;
|
||||
|
||||
&.focus .parent a {
|
||||
font-weight: bold;
|
||||
}
|
||||
& > li {
|
||||
a {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
|
||||
&.root:hover .child, &.root.expanded .child {
|
||||
display: block;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $color-nav-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&.focus a {
|
||||
color: $color-nav-child-focus;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.operate {
|
||||
float: right;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
display: block;
|
||||
margin-left: -1px;
|
||||
border: $border-nav;
|
||||
border-width: 0 1px;
|
||||
@ -119,98 +130,51 @@ $color-nav-child-focus: #6DA1BB;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include screen(phone, max) {
|
||||
@keyframes out {
|
||||
from {left: 0%;}
|
||||
to {left: -100%;}
|
||||
}
|
||||
@include screen(phone, max) {
|
||||
.menu-bar {
|
||||
display: block;
|
||||
|
||||
@keyframes in {
|
||||
from {left: -100%;}
|
||||
to {left: 0%;}
|
||||
}
|
||||
summary {
|
||||
cursor: pointer;
|
||||
border: $border-nav;
|
||||
border-width: 0 1px;
|
||||
}
|
||||
|
||||
.typecho-head-nav {
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
|
||||
#typecho-nav-list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.operate {
|
||||
a:last-child {
|
||||
border-right-width: 0;
|
||||
&[open] ~ menu {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
button.menu-bar {
|
||||
display: inline-block;
|
||||
border: none;
|
||||
background: $color-nav-bg;
|
||||
border-right: $border-nav;
|
||||
|
||||
&.focus {
|
||||
color: $color-nav-text-hover;
|
||||
|
||||
& + #typecho-nav-list {
|
||||
display: block;
|
||||
float: none;
|
||||
position: absolute;
|
||||
bottom: 36px;
|
||||
width: 100%;
|
||||
|
||||
& > ul {
|
||||
float: none;
|
||||
border-bottom: $border-nav;
|
||||
#typecho-nav-list {
|
||||
position: relative;
|
||||
|
||||
& > menu {
|
||||
display: none;
|
||||
flex-flow: column;
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
min-width: 160px;
|
||||
max-width: 240px;
|
||||
|
||||
& > li {
|
||||
&:first-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
> a {
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
menu {
|
||||
position: static;
|
||||
|
||||
&:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
.parent {
|
||||
a {
|
||||
display: block;
|
||||
border: none;
|
||||
background: $color-nav-btn-hover;
|
||||
}
|
||||
}
|
||||
.child {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 100%;
|
||||
top: auto;
|
||||
z-index: 20;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: auto;
|
||||
|
||||
li {
|
||||
border-bottom: $border-nav;
|
||||
&.return {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
|
||||
a {
|
||||
color: $color-nav-text-mute;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
animation: out .15s ease-out forwards;
|
||||
}
|
||||
|
||||
&.noexpanded {
|
||||
animation: in .15s ease-out forwards;
|
||||
border: $border-nav;
|
||||
border-width: 1px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -204,12 +204,17 @@ a.button:hover, a.balloon-button:hover {
|
||||
margin-bottom: 25px;
|
||||
padding: 0 0 35px;
|
||||
border-bottom: 1px solid #ECECEC;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
li {
|
||||
float: left;
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
.balloon {
|
||||
margin-top: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.balloon {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -276,44 +276,37 @@ class Menu extends Base
|
||||
*/
|
||||
public function output($class = 'focus', $childClass = 'focus')
|
||||
{
|
||||
echo '<menu>';
|
||||
|
||||
foreach ($this->menu as $key => $node) {
|
||||
if (!$node[1] || !$key) {
|
||||
continue;
|
||||
}
|
||||
|
||||
echo "<ul class=\"root" . ($key == $this->currentParent ? ' ' . $class : null)
|
||||
. "\"><li class=\"parent\"><a href=\"{$node[2]}\">{$node[0]}</a>"
|
||||
. "</li><ul class=\"child\">";
|
||||
|
||||
$last = 0;
|
||||
foreach ($node[3] as $inKey => $inNode) {
|
||||
if (!$inNode[4]) {
|
||||
$last = $inKey;
|
||||
}
|
||||
}
|
||||
echo "<li" . ($key == $this->currentParent ? " class=\"{$class}\"" : '')
|
||||
. "><a href=\"{$node[2]}\">{$node[0]}</a>"
|
||||
. "<menu>";
|
||||
|
||||
foreach ($node[3] as $inKey => $inNode) {
|
||||
if ($inNode[4]) {
|
||||
continue;
|
||||
}
|
||||
|
||||
$classes = [];
|
||||
$focus = false;
|
||||
if ($key == $this->currentParent && $inKey == $this->currentChild) {
|
||||
$classes[] = $childClass;
|
||||
$focus = true;
|
||||
} elseif ($inNode[6]) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if ($inKey == $last) {
|
||||
$classes[] = 'last';
|
||||
}
|
||||
|
||||
echo "<li" . (!empty($classes) ? ' class="' . implode(' ', $classes) . '"' : null) . "><a href=\""
|
||||
echo "<li" . ($focus ? " class=\"{$childClass}\"" : '') . "><a href=\""
|
||||
. ($key == $this->currentParent && $inKey == $this->currentChild ? $this->currentUrl : $inNode[2])
|
||||
. "\">{$inNode[0]}</a></li>";
|
||||
}
|
||||
|
||||
echo "</ul></ul>";
|
||||
echo '</menu></li>';
|
||||
}
|
||||
|
||||
echo '</menu>';
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user