feat(nav): rewrite top header to zibll 1:1 DOM/CSS/JS contract
Replace hybrid site-nav/drawer shell with zibll navbar-top layouts 1/2/3, body.mobile-navbar-show drawer, wired NavWalker + aksrt_menu_options meta, nav_folding/chevron, VIP switches, and SPA/PHP schema parity. No dual-class compat paths.
This commit is contained in:
kate522 committed
1 parent
b8ee6b6a43
commit
259dbdbe04
28 files changed
+2463
-885
No files matched your search
@@ -32,8 +32,12 @@ export const pageDisplaySchemas = {
|
||||
header_mobile_drawer: true,
|
||||
header_nav_style: 'default',
|
||||
header_max_width: 1200,
|
||||
header_scroll_down_hide: false,
|
||||
header_scroll_down_hide: true,
|
||||
header_layout: '1',
|
||||
header_nav_pay_vip: true,
|
||||
header_nav_user_pay_vip: true,
|
||||
header_newposts_types: ['post'],
|
||||
header_user_newposts_text: '发布内容',
|
||||
mobile_header_layout: 'center',
|
||||
mobile_navbar_align: 'left',
|
||||
header_newposts_enabled: true,
|
||||
@@ -63,7 +67,7 @@ export const pageDisplaySchemas = {
|
||||
{ label: '1200px', value: 1200 },
|
||||
{ label: '1320px', value: 1320 },
|
||||
]},
|
||||
{ key: 'header_scroll_down_hide', label: '下滑隐藏导航', type: 'switch', default: false, help: '页面向下滑动时自动隐藏导航栏' },
|
||||
{ key: 'header_scroll_down_hide', label: '下滑隐藏导航', type: 'switch', default: true, help: '下滚动隐藏，上滚动显示（需开启固定导航）' },
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -115,6 +119,14 @@ export const pageDisplaySchemas = {
|
||||
{ key: 'header_newposts_text', label: '按钮文案', type: 'input', default: '<i class="fa fa-pencil"></i> 发布', dependsOn: { key: 'header_newposts_enabled', value: true } },
|
||||
{ key: 'header_newposts_radius', label: '圆角 (px)', type: 'number', default: 20, min: 0, max: 30, dependsOn: { key: 'header_newposts_enabled', value: true } },
|
||||
{ key: 'header_newposts_class', label: '自定义 CSS 类', type: 'input', default: '', dependsOn: { key: 'header_newposts_enabled', value: true } },
|
||||
{ key: 'header_newposts_types', label: '发布类型', type: 'select', multiple: true, default: ['post'], options: [
|
||||
{ label: '文章', value: 'post' },
|
||||
{ label: '帖子', value: 'topic' },
|
||||
{ label: '商品', value: 'product' },
|
||||
], dependsOn: { key: 'header_newposts_enabled', value: true }, help: '未开启的模块不会显示' },
|
||||
{ key: 'header_user_newposts_text', label: '用户卡发布文案', type: 'input', default: '发布内容' },
|
||||
{ key: 'header_nav_pay_vip', label: '导航栏开通会员按钮', type: 'switch', default: true, help: '顶部导航显示开通会员' },
|
||||
{ key: 'header_nav_user_pay_vip', label: '用户框开通会员按钮', type: 'switch', default: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
@import url("nav/base.css");
|
||||
@import url("nav/zib-navbar-fixed.css");
|
||||
@import url("nav/zib-navbar-core.css");
|
||||
@import url("nav/zib-mobile-navbar.css");
|
||||
@import url("nav/zib-senior-submenu.css");
|
||||
@import url("nav/dark-mode-submenu.css");
|
||||
@import url("nav/dark-mode-mega-menu.css");
|
||||
@import url("nav/responsive-mega-menu.css");
|
||||
@import url("nav/mobile-toggle.css");
|
||||
@import url("nav/mobile-theme-toggle-in-drawer.css");
|
||||
@import url("nav/header-menu-buttons.css");
|
||||
@import url("nav/header-userbox.css");
|
||||
@import url("nav/menu-item-icon.css");
|
||||
@import url("nav/menu-item-badge.css");
|
||||
@import url("nav/hover-effects.css");
|
||||
@import url("nav/mega-submenu.css");
|
||||
@import url("nav/cards-submenu.css");
|
||||
@import url("nav/nav-fixed-mobile-fallback.css");
|
||||
@@ -0,0 +1,195 @@
|
||||
/* Ported/adapted from zibll main.css — mobile navbar */
|
||||
@media (max-width: 767px) {
|
||||
opacity: 0.7;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.navbar-toggle .icon-bar {
|
||||
background: var(--main-color);
|
||||
}
|
||||
|
||||
.navbar-toggle .icon-bar + .icon-bar {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.navbar-top.center .navbar-brand {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.navbar-top.center .navbar-brand + .navbar-toggle {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.navbar-top.center .navbar-brand > img {
|
||||
display: unset;
|
||||
}
|
||||
|
||||
.navbar-top .navbar-logo > img {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mobile-navbar {
|
||||
z-index: 997;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: var(--main-bg-color);
|
||||
width: 281px;
|
||||
padding: 10px 20px 70px;
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
.mobile-navbar .navbar-logo {
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
.mobile-navbar badge:not(.top) {
|
||||
transform: unset;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.mobile-navbar.right {
|
||||
right: -2px;
|
||||
transform: translateX(110%);
|
||||
}
|
||||
|
||||
.mobile-navbar.left {
|
||||
left: -2px;
|
||||
transform: translateX(-110%);
|
||||
}
|
||||
|
||||
.mobile-navbar.left > .toggle-radius {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.mobile-navbar.top {
|
||||
height: auto;
|
||||
max-height: 70%;
|
||||
width: 100%;
|
||||
transform: translateY(-110%);
|
||||
}
|
||||
|
||||
.mobile-navbar-show .mobile-navbar {
|
||||
transition: transform 0.6s cubic-bezier(0.28, 0.9, 0.34, 0.99);
|
||||
transform: translate(0);
|
||||
}
|
||||
|
||||
.mobile-navbar-show .mobile-navbar + .fixed-body {
|
||||
visibility: unset;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mobile-navbar-show .navbar-toggle .i-menu > i {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.mobile-navbar-show .navbar-toggle .i-menu::after {
|
||||
transform: rotate(45deg);
|
||||
width: calc(1em + 1px);
|
||||
transform-origin: bottom right;
|
||||
}
|
||||
.mobile-navbar-show .navbar-toggle .i-menu::before {
|
||||
right: 0;
|
||||
width: calc(1em + 1px);
|
||||
transform: rotate(-45deg);
|
||||
transform-origin: top right;
|
||||
}
|
||||
|
||||
.mobile-navbar .navbar-header {
|
||||
margin-top: -58px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.mobile-navbar .navbar-brand {
|
||||
padding: 7px 10px;
|
||||
}
|
||||
|
||||
.mobile-navbar .toggle-radius {
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.mobile-menus li a {
|
||||
display: block;
|
||||
padding: 6px 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mobile-menus > li > a::before {
|
||||
margin: 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.mobile-menus .sub-menu {
|
||||
word-wrap: break-word;
|
||||
white-space: normal;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
.mobile-menus .sub-menu li {
|
||||
width: calc(50% - 4px);
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mobile-navbar.top .mobile-menus .sub-menu li {
|
||||
width: calc(33.3% - 4px);
|
||||
}
|
||||
|
||||
.mobile-menus .sub-menu li > a {
|
||||
background: var(--main-border-color);
|
||||
padding: 5px;
|
||||
margin: 2px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mobile-menus .sub-menu li > a > badge:not(.top) {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transform: scale(0.85);
|
||||
}
|
||||
|
||||
.mobile-user-menus a {
|
||||
width: calc(50% - 12px);
|
||||
float: left;
|
||||
margin: 6px;
|
||||
}
|
||||
|
||||
.mobile-nav-widget {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.mobile-navbar .box-body.notop {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.mobile-navbar .sub-user-box {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.mobile-navbar .posts-nav-box .zib-widget {
|
||||
background: var(--muted-border-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.s-desc,
|
||||
.slide-text,
|
||||
.wp-block-carousel figcaption {
|
||||
padding: 0.7em;
|
||||
}
|
||||
|
||||
.posts-item .item-thumbnail {
|
||||
width: 138px;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,777 @@
|
||||
/* Ported/adapted from zibll main.css — top navbar core */
|
||||
|
||||
.main-shadow {
|
||||
transition: box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.but:focus,
|
||||
.but:hover,
|
||||
.progress,
|
||||
.navbar-nav > li:before {
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.navbar-top .sub-menu,
|
||||
.theme-popover,
|
||||
.hover-show .hover-show-con {
|
||||
opacity: 0;
|
||||
transform: translateY(6px);
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.navbar-top li:hover > .sub-menu,
|
||||
.hover-show:hover .hover-show-con,
|
||||
.hover-show:hover ~ .hover-show-con,
|
||||
.hover-show:hover ~ .sub-menu {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.hover-show {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.hover-show .hover-show-con {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.hover-show:hover .hover-show-con,
|
||||
.hover-show:hover ~ .hover-show-con,
|
||||
.hover-show:hover ~ .sub-menu {
|
||||
visibility: unset;
|
||||
}
|
||||
|
||||
.match-ok,
|
||||
.navbar-top .sub-menu li > a,
|
||||
.ic-close {
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
|
||||
margin-left: -100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 8px 20px;
|
||||
background: var(--header-bg);
|
||||
margin-bottom: 20px;
|
||||
transition: 0.15s;
|
||||
}
|
||||
|
||||
.body-scroll .header {
|
||||
box-shadow: 0px 4px 10px var(--main-shadow);
|
||||
}
|
||||
|
||||
.header a:not(.but),
|
||||
.header svg {
|
||||
color: var(--header-color);
|
||||
}
|
||||
|
||||
.header .sub-menu {
|
||||
background: var(--main-bg-color);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.header .sub-menu a,
|
||||
.header .dropdown-menu a,
|
||||
.header .sub-menu svg {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
[data-language].active,
|
||||
.header [data-language].active {
|
||||
color: var(--focus-color);
|
||||
}
|
||||
|
||||
.header .language-dropdown .dropdown-menu {
|
||||
right: -20px;
|
||||
}
|
||||
|
||||
.header .language-dropdown.pull-right.dropdown .dropdown-menu::before {
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
.language-dropdown .loading-backdrop {
|
||||
border-radius: 4px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
body.nav-fixed:not(.body-scroll):not(.mobile-navbar-show) .header.show-slide {
|
||||
--header-bg: linear-gradient(0, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.1) 80%);
|
||||
--header-color: #fff;
|
||||
-webkit-backdrop-filter: unset;
|
||||
backdrop-filter: unset;
|
||||
}
|
||||
|
||||
body:not(.nav-fixed) .header.show-slide {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
body.nav-fixed .slide-header {
|
||||
margin-top: -90px;
|
||||
}
|
||||
|
||||
.scroll-down.nav-fixed .header.scroll-down-hide {
|
||||
transform: translate3d(0, -105%, 0);
|
||||
-webkit-backdrop-filter: none;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
.slide-header .slide-text {
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
.slide-header img,
|
||||
.slide-header video,
|
||||
.slide-header .s-desc,
|
||||
.wp-block-carousel figcaption {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.search-keywords {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.header form {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header-slider-search {
|
||||
max-width: 840px;
|
||||
margin: auto;
|
||||
padding: 0 20px;
|
||||
font-size: 17px;
|
||||
top: calc(50% - 10px);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.card-0 .header-slider-search {
|
||||
top: calc(50% + 20px);
|
||||
}
|
||||
|
||||
.header-slider-search .search-input {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.header-slider-search-more {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.header-slider-search-more.before {
|
||||
margin-bottom: 1.8em;
|
||||
}
|
||||
|
||||
.header-slider-search .search-type-but-average {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.header-slider-search .search_keywords,
|
||||
.header-slider-search .search-type-but-average .but {
|
||||
--this-bg: rgba(255, 255, 255, 0.8);
|
||||
--this-color: #888;
|
||||
}
|
||||
|
||||
.filter-blur .header-slider-search .search_keywords,
|
||||
.filter-blur .header-slider-search .search-type-but-average .but {
|
||||
-webkit-backdrop-filter: saturate(5) blur(20px);
|
||||
backdrop-filter: saturate(5) blur(20px);
|
||||
}
|
||||
|
||||
.header-slider-search .search-type-but-average .but.active {
|
||||
--this-bg: var(--focus-color);
|
||||
--this-color: #fff;
|
||||
}
|
||||
|
||||
.header-slider-search .line-form {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 100px;
|
||||
padding: 0.5em 1.2em;
|
||||
z-index: 1;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.header-slider-search .line-form .dropdown > a a,
|
||||
.header-slider-search .line-form .dropdown > a,
|
||||
.header-slider-search .line-form .icon {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.header-slider-search .search-input-text {
|
||||
position: relative;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.header-slider-search .line-form-input {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.header-slider-search .search-keywords > p,
|
||||
.header-slider-search .search-input-text .line-form-line {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-slider-search .search-keywords {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header-slider-search .search_keywords {
|
||||
padding: 3px 5px;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.header-slider-search .line-form .abs-right {
|
||||
margin-top: 0;
|
||||
margin-right: -6px;
|
||||
}
|
||||
|
||||
.header-slider-card {
|
||||
margin-top: -40px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.header-slider-card .zib-widget {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.filter-blur .header-slider-search .line-form,
|
||||
.filter-blur .header-slider-card .zib-widget {
|
||||
-webkit-backdrop-filter: saturate(5) blur(20px);
|
||||
backdrop-filter: saturate(5) blur(20px);
|
||||
}
|
||||
|
||||
.filter-blur .header-slider-card .zib-widget {
|
||||
background: var(--blur-bg);
|
||||
}
|
||||
|
||||
/*------------导航栏-----------*/
|
||||
.nav-fixed .header {
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
-webkit-backdrop-filter: saturate(5) blur(20px);
|
||||
backdrop-filter: saturate(5) blur(20px);
|
||||
}
|
||||
|
||||
.mobile-navbar + .fixed-body {
|
||||
z-index: 996;
|
||||
}
|
||||
|
||||
.navbar-top {
|
||||
margin: 0;
|
||||
border-radius: 0 !important;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
badge.top,
|
||||
.navbar-top badge {
|
||||
transform: translate(-5px, -10px) scale(0.85);
|
||||
margin-right: -10px;
|
||||
}
|
||||
|
||||
.navbar-top badge {
|
||||
transform: translate(-10px, -10px) scale(0.85);
|
||||
}
|
||||
|
||||
.navbar-top .navbar-nav {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.navbar-top .navbar-right {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.navbar-right ~ .navbar-right {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.navbar-top .navbar-but .but {
|
||||
font-size: 0.8em;
|
||||
padding: 0.3em 1em !important;
|
||||
margin: 0.4em;
|
||||
}
|
||||
|
||||
.navbar-top .navbar-but .but.hover-show {
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.navbar-top .navbar-brand {
|
||||
padding: 7px 10px;
|
||||
}
|
||||
|
||||
.navbar-logo > img {
|
||||
height: 36px;
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
.navbar-top .nav > li > a {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
border-radius: 4px;
|
||||
display: inline-flex !important;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar-top .nav > li > a > .menu-item-title {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.menu-item > a > .but {
|
||||
transform: translateY(-2px);
|
||||
margin: -0.3em;
|
||||
}
|
||||
|
||||
.navbar-top .nav li a:focus,
|
||||
.navbar-top .nav li a:hover,
|
||||
.current-menu-item > a {
|
||||
background-color: transparent;
|
||||
color: var(--focus-color);
|
||||
}
|
||||
|
||||
.navbar-top .fa {
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.navbar-collapse .search-input {
|
||||
background: var(--main-shadow);
|
||||
}
|
||||
|
||||
.navbar-collapse .search-input ~ .dropdown-menu {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.navbar-collapse .dropdown-menu .search-input {
|
||||
background: transparent;
|
||||
padding: 10px;
|
||||
width: 460px;
|
||||
}
|
||||
|
||||
.navbar-nav li a,
|
||||
.navbar-nav li {
|
||||
max-height: 50px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navbar-top .sub-menu,
|
||||
.theme-popover {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
min-width: 120px;
|
||||
background-color: var(--main-bg-color);
|
||||
padding: 10px 5px;
|
||||
z-index: 99;
|
||||
border-radius: var(--main-radius);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar-top li:hover > .sub-menu {
|
||||
visibility: unset;
|
||||
}
|
||||
|
||||
.navbar-top .sub-menu .sub-menu {
|
||||
left: 100%;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
.theme-popover {
|
||||
display: unset;
|
||||
}
|
||||
|
||||
.navbar-search {
|
||||
visibility: hidden;
|
||||
transform: translateY(-101%);
|
||||
padding: 10px 30px;
|
||||
padding-top: 80px;
|
||||
background: var(--main-bg-color);
|
||||
height: auto;
|
||||
opacity: 1;
|
||||
box-shadow: 0px 14px 10px rgba(0, 0, 0, 0.08);
|
||||
z-index: 998;
|
||||
transition: all 0.5s;
|
||||
border-radius:0 0 var(--main-radius) var(--main-radius);
|
||||
}
|
||||
|
||||
.navbar-search.show {
|
||||
visibility: unset;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.navbar-top .navbar-right .sub-menu {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.navbar-top .sub-menu li > a {
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
padding: 5px 15px;
|
||||
}
|
||||
|
||||
.navbar-top .sub-menu li > a:hover {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.navbar-top .sub-menu .menu-item-has-children > a {
|
||||
padding-right: 35px;
|
||||
}
|
||||
|
||||
.navbar-top .sub-menu .menu-item-has-children > a > .fa-angle-down {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.navbar-top .newadd-btns {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.navbar-top .drop-newadd {
|
||||
width: 137px;
|
||||
padding: 7px 10px;
|
||||
}
|
||||
|
||||
.navbar-top .drop-newadd::before {
|
||||
top: -4px;
|
||||
left: auto;
|
||||
right: 27px;
|
||||
}
|
||||
|
||||
/******----导航栏高级子菜单----*********/
|
||||
.menu-graphic-card-item,
|
||||
.submenu-multi-column-links .links-items .link-item > * {
|
||||
--main-color: var(--muted-2-color);
|
||||
}
|
||||
|
||||
.mobile-navbar .menu-graphic-card-item .title,
|
||||
.mobile-navbar .submenu-multi-column-links .links-items .link-item > * {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.mobile-navbar .sub-menu.senior-submenu .container {
|
||||
background: var(--muted-border-color);
|
||||
border-radius: var(--main-radius);
|
||||
padding: 4px 10px;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.sub-menu.senior-submenu ~ .sub-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-top .sub-menu.senior-submenu {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 0 0 var(--main-radius) var(--main-radius);
|
||||
padding: 20px 0;
|
||||
top: 59px;
|
||||
}
|
||||
|
||||
.links-columns-box .link-item > * {
|
||||
padding: 8px 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar-top .links-column {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.navbar-top .links-columns-box .column-title {
|
||||
border-bottom: 1px solid var(--main-border-color);
|
||||
font-size: 1.1em;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.links-columns-box .link-item .icon-hover-show {
|
||||
opacity: 0;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.navbar-top .links-columns-box .link-item > a:hover > .icon-hover-show {
|
||||
opacity: 1;
|
||||
transform: translate3d(10px, 0, 0);
|
||||
}
|
||||
|
||||
.links-columns-box .link-item img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 4px;
|
||||
margin-right: 6px;
|
||||
flex-shrink: 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.mobile-navbar .links-columns-box .link-item > * {
|
||||
padding: 5px 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 110px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mobile-navbar .links-columns-box .link-item img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
/*导航栏高级子菜单:图文卡片菜单*/
|
||||
.navbar-top .menu-graphic-card-item {
|
||||
margin: 20px 10px;
|
||||
}
|
||||
|
||||
.navbar-top .submenu-graphic-card {
|
||||
--img-size: 130px;
|
||||
}
|
||||
.navbar-top .submenu-graphic-card.size-sm {
|
||||
--img-size: 80px;
|
||||
}
|
||||
.navbar-top .submenu-graphic-card.size-xs {
|
||||
--img-size: 180px;
|
||||
}
|
||||
.navbar-top .submenu-graphic-card.size-lg {
|
||||
--img-size: 240px;
|
||||
}
|
||||
.mobile-navbar .submenu-graphic-card.size-sm {
|
||||
--img-size: 68px;
|
||||
}
|
||||
.mobile-navbar .submenu-graphic-card {
|
||||
--img-size: 107px;
|
||||
}
|
||||
.mobile-navbar .submenu-graphic-card.size-xs {
|
||||
--img-size: 140px;
|
||||
}
|
||||
.mobile-navbar .submenu-graphic-card.size-lg {
|
||||
--img-size: 180px;
|
||||
}
|
||||
|
||||
.menu-graphic-card-item .img-box {
|
||||
width: var(--img-size);
|
||||
height: calc(var(--img-size) * var(--img-scale, 1));
|
||||
border-radius: var(--main-radius);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navbar-top .links-column,
|
||||
.navbar-top .menu-graphic-card-item {
|
||||
opacity: 0;
|
||||
transition: 0.6s;
|
||||
transform: translate3d(0, 20px, 0);
|
||||
}
|
||||
|
||||
.navbar-top li:hover .links-column,
|
||||
.navbar-top li:hover .menu-graphic-card-item {
|
||||
transition-delay: var(--ani-delay);
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.menu-graphic-card-item .title.text-ellipsis {
|
||||
width: var(--img-size);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sub-user-box {
|
||||
width: 242px;
|
||||
word-break: break-word;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.mobile-navbar.top .sub-user-box {
|
||||
width: auto;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.mobile-navbar.top .sub-user-box > ul {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sub-user-box .list-inline > li + li {
|
||||
width: calc(100% - 48px);
|
||||
}
|
||||
|
||||
.sub-user-box .social-login-item.button-lg {
|
||||
width: 110px !important;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.sub-user-box .user-name {
|
||||
width: calc(100% - 3em);
|
||||
}
|
||||
|
||||
.sub-user-box .author-tag > * {
|
||||
max-height: 41px;
|
||||
overflow: hidden;
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
.sub-vip-card {
|
||||
font-size: 12px;
|
||||
padding: 0 !important;
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.sub-vip-card .vip-card {
|
||||
display: inline-block;
|
||||
width: 240px;
|
||||
margin: 5px;
|
||||
box-shadow: 0 0 10px var(--main-shadow);
|
||||
}
|
||||
|
||||
.sub-vip-card .vip-baicon.abs-center {
|
||||
font-size: 10em;
|
||||
left: 55%;
|
||||
}
|
||||
|
||||
.sub-vip-card .payvip-button {
|
||||
font-size: 1em !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.sub-vip-card .vip-name {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.sub-vip-card .vip-img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sub-user-box .payvip-icon {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.header-user-href > a {
|
||||
display: inline-block;
|
||||
padding-top: 10px;
|
||||
min-width: 58px;
|
||||
}
|
||||
|
||||
.header-user-href > a:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.header-user-href > a div + div {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.header-user-href .toggle-radius {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
|
||||
.container {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.nav.navbar-nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
background: var(--header-bg);
|
||||
box-shadow: 0px 4px 10px var(--main-shadow);
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0 20px;
|
||||
margin: 0;
|
||||
border-radius: var(--main-radius);
|
||||
transition: 0.3s;
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.nav.navbar-nav.show {
|
||||
opacity: 1;
|
||||
z-index: 998;
|
||||
visibility: unset;
|
||||
transform: translateY(68px);
|
||||
}
|
||||
|
||||
.navbar-nav > li:before {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.navbar-logo > img {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.container-footer {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.footer .container-footer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer .list-inline > li + li + li {
|
||||
float: unset;
|
||||
}
|
||||
|
||||
.footer .list-inline .hidden-xs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.show-nav-but.hide {
|
||||
display: unset !important;
|
||||
}
|
||||
|
||||
body .sidebar.show-sidebar {
|
||||
display: unset;
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.site-layout-2 .content-layout {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.site-layout-3 .content-layout {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#u_sign .modal-dialog {
|
||||
width: auto;
|
||||
margin: 30px;
|
||||
}
|
||||
|
||||
.search-page-ajaxpager .author-minicard {
|
||||
width: calc(50% - 16px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.container.full-sm {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.full-widget-sm {
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
/* Zibll-aligned fixed header + reserves (AKSRT) */
|
||||
body.nav-fixed {
|
||||
--nav-fixed-reserve: 88px;
|
||||
padding-top: var(--nav-fixed-reserve);
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
body.nav-fixed { --nav-fixed-reserve: 72px; padding-top: var(--nav-fixed-reserve); }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
body.nav-fixed { --nav-fixed-reserve: 60px; padding-top: var(--nav-fixed-reserve); }
|
||||
}
|
||||
body.nav-fixed .header:not(.show-slide) {
|
||||
position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 999;
|
||||
}
|
||||
body.nav-fixed .header-slider-container,
|
||||
body.nav-fixed .header-components-container,
|
||||
body.nav-fixed .header-components.slide-header,
|
||||
body.nav-fixed .slide-header {
|
||||
margin-top: calc(var(--nav-fixed-reserve, 88px) * -1) !important;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.scroll-down.nav-fixed .header.scroll-down-hide {
|
||||
transform: translate3d(0, -105%, 0);
|
||||
-webkit-backdrop-filter: none;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
body.nav-fixed:not(.body-scroll):not(.mobile-navbar-show) .header.show-slide {
|
||||
--header-bg: linear-gradient(0, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.1) 80%);
|
||||
--header-color: #fff;
|
||||
-webkit-backdrop-filter: unset;
|
||||
backdrop-filter: unset;
|
||||
}
|
||||
@@ -0,0 +1,221 @@
|
||||
/* Senior submenus (graphic card / multi-column) */
|
||||
.sub-menu.senior-submenu .container {
|
||||
background: var(--muted-border-color);
|
||||
border-radius: var(--main-radius);
|
||||
padding: 4px 10px;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.sub-menu.senior-submenu ~ .sub-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-top .sub-menu.senior-submenu {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 0 0 var(--main-radius) var(--main-radius);
|
||||
padding: 20px 0;
|
||||
top: 59px;
|
||||
}
|
||||
|
||||
.links-columns-box .link-item > * {
|
||||
padding: 8px 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar-top .links-column {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.navbar-top .links-columns-box .column-title {
|
||||
border-bottom: 1px solid var(--main-border-color);
|
||||
font-size: 1.1em;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.links-columns-box .link-item .icon-hover-show {
|
||||
opacity: 0;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.navbar-top .links-columns-box .link-item > a:hover > .icon-hover-show {
|
||||
opacity: 1;
|
||||
transform: translate3d(10px, 0, 0);
|
||||
}
|
||||
|
||||
.links-columns-box .link-item img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 4px;
|
||||
margin-right: 6px;
|
||||
flex-shrink: 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.mobile-navbar .links-columns-box .link-item > * {
|
||||
padding: 5px 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 110px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mobile-navbar .links-columns-box .link-item img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
/*导航栏高级子菜单:图文卡片菜单*/
|
||||
.navbar-top .menu-graphic-card-item {
|
||||
margin: 20px 10px;
|
||||
}
|
||||
|
||||
.navbar-top .submenu-graphic-card {
|
||||
--img-size: 130px;
|
||||
}
|
||||
.navbar-top .submenu-graphic-card.size-sm {
|
||||
--img-size: 80px;
|
||||
}
|
||||
.navbar-top .submenu-graphic-card.size-xs {
|
||||
--img-size: 180px;
|
||||
}
|
||||
.navbar-top .submenu-graphic-card.size-lg {
|
||||
--img-size: 240px;
|
||||
}
|
||||
.mobile-navbar .submenu-graphic-card.size-sm {
|
||||
--img-size: 68px;
|
||||
}
|
||||
.mobile-navbar .submenu-graphic-card {
|
||||
--img-size: 107px;
|
||||
}
|
||||
.mobile-navbar .submenu-graphic-card.size-xs {
|
||||
--img-size: 140px;
|
||||
}
|
||||
.mobile-navbar .submenu-graphic-card.size-lg {
|
||||
--img-size: 180px;
|
||||
}
|
||||
|
||||
.menu-graphic-card-item .img-box {
|
||||
width: var(--img-size);
|
||||
height: calc(var(--img-size) * var(--img-scale, 1));
|
||||
border-radius: var(--main-radius);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navbar-top .links-column,
|
||||
.navbar-top .menu-graphic-card-item {
|
||||
opacity: 0;
|
||||
transition: 0.6s;
|
||||
transform: translate3d(0, 20px, 0);
|
||||
}
|
||||
|
||||
.navbar-top li:hover .links-column,
|
||||
.navbar-top li:hover .menu-graphic-card-item {
|
||||
transition-delay: var(--ani-delay);
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.menu-graphic-card-item .title.text-ellipsis {
|
||||
width: var(--img-size);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sub-user-box {
|
||||
width: 242px;
|
||||
word-break: break-word;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.mobile-navbar.top .sub-user-box {
|
||||
width: auto;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.mobile-navbar.top .sub-user-box > ul {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sub-user-box .list-inline > li + li {
|
||||
width: calc(100% - 48px);
|
||||
}
|
||||
|
||||
.sub-user-box .social-login-item.button-lg {
|
||||
width: 110px !important;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.sub-user-box .user-name {
|
||||
width: calc(100% - 3em);
|
||||
}
|
||||
|
||||
.sub-user-box .author-tag > * {
|
||||
max-height: 41px;
|
||||
overflow: hidden;
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
.sub-vip-card {
|
||||
font-size: 12px;
|
||||
padding: 0 !important;
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.sub-vip-card .vip-card {
|
||||
display: inline-block;
|
||||
width: 240px;
|
||||
margin: 5px;
|
||||
box-shadow: 0 0 10px var(--main-shadow);
|
||||
}
|
||||
|
||||
.sub-vip-card .vip-baicon.abs-center {
|
||||
font-size: 10em;
|
||||
left: 55%;
|
||||
}
|
||||
|
||||
.sub-vip-card .payvip-button {
|
||||
font-size: 1em !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.sub-vip-card .vip-name {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.sub-vip-card .vip-img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sub-user-box .payvip-icon {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.header-user-href > a {
|
||||
display: inline-block;
|
||||
padding-top: 10px;
|
||||
min-width: 58px;
|
||||
}
|
||||
|
||||
.header-user-href > a:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.header-user-href > a div + div {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.header-user-href .toggle-radius {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
|
||||
@@ -276,7 +276,7 @@
|
||||
top = target.getBoundingClientRect().top + window.pageYOffset;
|
||||
}
|
||||
|
||||
var navFixed = document.querySelector('.site-nav.is-fixed, .site-header.is-fixed');
|
||||
var navFixed = document.querySelector('body.nav-fixed .header, .navbar.navbar-top');
|
||||
var headerOffset = navFixed ? (navFixed.offsetHeight + 20) : 0;
|
||||
top = Math.max(0, top - headerOffset - (extraOffset || 0));
|
||||
|
||||
|
||||
+15
-67
@@ -1,65 +1,10 @@
|
||||
/**
|
||||
* AKSRT Dropdown Menus — user, auth, post-meta
|
||||
* AKSRT Dropdown Menus — post-meta only.
|
||||
* Header user box uses CSS hover (.navbar-top .sub-menu) per zibll contract.
|
||||
*/
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
function initUserDropdown() {
|
||||
var toggle = document.getElementById("user-menu-toggle");
|
||||
var menu = document.getElementById("user-dropdown");
|
||||
if (!toggle || !menu) return;
|
||||
|
||||
function close() {
|
||||
menu.classList.remove("is-open");
|
||||
toggle.setAttribute("aria-expanded", "false");
|
||||
}
|
||||
|
||||
toggle.addEventListener("click", function (e) {
|
||||
e.stopPropagation();
|
||||
var open = !menu.classList.contains("is-open");
|
||||
menu.classList.toggle("is-open", open);
|
||||
toggle.setAttribute("aria-expanded", open ? "true" : "false");
|
||||
});
|
||||
|
||||
document.addEventListener("click", function (e) {
|
||||
if (!menu.contains(e.target) && e.target !== toggle) close();
|
||||
});
|
||||
document.addEventListener("touchstart", function (e) {
|
||||
if (!menu.contains(e.target) && e.target !== toggle) close();
|
||||
}, { passive: true });
|
||||
document.addEventListener("keydown", function (e) {
|
||||
if (e.key === "Escape") close();
|
||||
});
|
||||
}
|
||||
|
||||
function initAuthDropdown() {
|
||||
var trigger = document.getElementById("nav-auth-trigger");
|
||||
var container = document.getElementById("nav-auth-dropdown");
|
||||
if (!trigger || !container) return;
|
||||
|
||||
function close() {
|
||||
container.classList.remove("is-open");
|
||||
trigger.setAttribute("aria-expanded", "false");
|
||||
}
|
||||
|
||||
trigger.addEventListener("click", function (e) {
|
||||
e.stopPropagation();
|
||||
var open = !container.classList.contains("is-open");
|
||||
container.classList.toggle("is-open", open);
|
||||
trigger.setAttribute("aria-expanded", open ? "true" : "false");
|
||||
});
|
||||
|
||||
document.addEventListener("click", function (e) {
|
||||
if (!container.contains(e.target) && e.target !== trigger) close();
|
||||
});
|
||||
document.addEventListener("touchstart", function (e) {
|
||||
if (!container.contains(e.target) && e.target !== trigger) close();
|
||||
}, { passive: true });
|
||||
document.addEventListener("keydown", function (e) {
|
||||
if (e.key === "Escape") close();
|
||||
});
|
||||
}
|
||||
|
||||
function initPostDropMeta() {
|
||||
document.querySelectorAll('.post-drop-meta').forEach(function (wrap) {
|
||||
if (!wrap || wrap.dataset.aksrtDropMetaBound === '1') return;
|
||||
@@ -80,10 +25,10 @@
|
||||
document.querySelectorAll('.post-drop-meta.is-open').forEach(function (other) {
|
||||
if (other !== wrap) {
|
||||
other.classList.remove('is-open');
|
||||
var otherTrigger = other.querySelector('.post-drop-meta__toggle');
|
||||
var otherMenu = other.querySelector('.post-drop-meta__menu');
|
||||
if (otherTrigger) otherTrigger.setAttribute('aria-expanded', 'false');
|
||||
if (otherMenu) otherMenu.setAttribute('aria-hidden', 'true');
|
||||
var t = other.querySelector('.post-drop-meta__toggle');
|
||||
var m = other.querySelector('.post-drop-meta__menu');
|
||||
if (t) t.setAttribute('aria-expanded', 'false');
|
||||
if (m) m.setAttribute('aria-hidden', 'true');
|
||||
}
|
||||
});
|
||||
wrap.classList.toggle('is-open', open);
|
||||
@@ -94,16 +39,19 @@
|
||||
document.addEventListener('click', function (e) {
|
||||
if (!wrap.contains(e.target)) close();
|
||||
});
|
||||
document.addEventListener('touchstart', function (e) {
|
||||
if (!wrap.contains(e.target)) close();
|
||||
}, { passive: true });
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Escape') close();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
window.AksrtFrontend.register("aksrt-user-dropdown", function () { initUserDropdown(); });
|
||||
window.AksrtFrontend.register("aksrt-auth-dropdown", function () { initAuthDropdown(); });
|
||||
window.AksrtFrontend.register("aksrt-post-drop-meta", function () { initPostDropMeta(); });
|
||||
if (window.AksrtFrontend && typeof window.AksrtFrontend.register === 'function') {
|
||||
window.AksrtFrontend.register('aksrt-post-drop-meta', function () {
|
||||
initPostDropMeta();
|
||||
});
|
||||
} else if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initPostDropMeta);
|
||||
} else {
|
||||
initPostDropMeta();
|
||||
}
|
||||
})();
|
||||
+71
-37
@@ -1,54 +1,88 @@
|
||||
/**
|
||||
* AKSRT Navigation Drawer
|
||||
* AKSRT nav chrome — zibll contract (body.mobile-navbar-show, folding, chevron).
|
||||
* Drawer open/close is handled by aksrt-runtime [data-toggle-class].
|
||||
*/
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
function initNavDrawer() {
|
||||
var toggle = document.getElementById("nav-toggle");
|
||||
var drawer = document.getElementById("nav-drawer");
|
||||
var backdrop = document.getElementById("nav-drawer-backdrop");
|
||||
var closeBtn = document.getElementById("nav-drawer-close");
|
||||
if (!toggle || !drawer || !backdrop) return;
|
||||
function appendChevrons() {
|
||||
document.querySelectorAll(".navbar-top li.menu-item-has-children > a").forEach(function (a) {
|
||||
if (a.querySelector(".fa-angle-down")) return;
|
||||
var i = document.createElement("i");
|
||||
i.className = "fa fa-angle-down ml6";
|
||||
i.setAttribute("aria-hidden", "true");
|
||||
a.appendChild(i);
|
||||
});
|
||||
}
|
||||
|
||||
var openIcon = toggle.querySelector(".nav-toggle-open");
|
||||
var closeIcon = toggle.querySelector(".nav-toggle-close");
|
||||
function navFolding() {
|
||||
var collapse = document.querySelector(".navbar-collapse");
|
||||
var nav = document.querySelector(".navbar-nav");
|
||||
if (!collapse || !nav) return;
|
||||
if (window.innerWidth <= 996) return;
|
||||
|
||||
function setOpen(open) {
|
||||
toggle.setAttribute("aria-expanded", open ? "true" : "false");
|
||||
drawer.classList.toggle("is-open", open);
|
||||
backdrop.classList.toggle("is-open", open);
|
||||
drawer.setAttribute("aria-hidden", open ? "false" : "true");
|
||||
backdrop.setAttribute("aria-hidden", open ? "false" : "true");
|
||||
document.body.style.overflow = open ? "hidden" : "";
|
||||
if (openIcon && closeIcon) {
|
||||
openIcon.style.display = open ? "none" : "";
|
||||
closeIcon.style.display = open ? "" : "none";
|
||||
var header = document.querySelector(".header");
|
||||
if (header && header.offsetHeight <= 81) return;
|
||||
|
||||
// Already folded?
|
||||
if (nav.querySelector("li.aksrt-nav-more")) return;
|
||||
|
||||
var surplus = collapse.clientWidth;
|
||||
Array.prototype.forEach.call(collapse.children, function (child) {
|
||||
if (!child.classList.contains("navbar-nav")) {
|
||||
surplus -= child.offsetWidth || 0;
|
||||
}
|
||||
if (open && typeof window.__aksrtCloseSearchPanel === "function") {
|
||||
window.__aksrtCloseSearchPanel();
|
||||
});
|
||||
var headerEl = document.querySelector(".navbar-header");
|
||||
surplus -= (headerEl ? headerEl.offsetWidth : 0) + 40;
|
||||
|
||||
var navsWidth = 66;
|
||||
var foldItems = [];
|
||||
Array.prototype.forEach.call(nav.children, function (li) {
|
||||
navsWidth += li.offsetWidth || 0;
|
||||
if (navsWidth > surplus) {
|
||||
foldItems.push(li);
|
||||
}
|
||||
}
|
||||
|
||||
setOpen(false);
|
||||
|
||||
toggle.addEventListener("click", function () {
|
||||
setOpen(!drawer.classList.contains("is-open"));
|
||||
});
|
||||
backdrop.addEventListener("click", function () {
|
||||
setOpen(false);
|
||||
});
|
||||
if (closeBtn) closeBtn.addEventListener("click", function () {
|
||||
setOpen(false);
|
||||
});
|
||||
if (!foldItems.length) return;
|
||||
|
||||
var more = document.createElement("li");
|
||||
more.className = "menu-item menu-item-has-children aksrt-nav-more";
|
||||
more.innerHTML =
|
||||
'<a href="javascript:void(0);"><i class="fas fa-bars" aria-hidden="true"></i></a><ul class="sub-menu"></ul>';
|
||||
var sub = more.querySelector(".sub-menu");
|
||||
foldItems.forEach(function (li) {
|
||||
sub.appendChild(li);
|
||||
});
|
||||
nav.appendChild(more);
|
||||
}
|
||||
|
||||
function bindDrawerA11y() {
|
||||
// Esc closes mobile nav via body class.
|
||||
document.addEventListener("keydown", function (e) {
|
||||
if (e.key === "Escape" && drawer.classList.contains("is-open")) {
|
||||
setOpen(false);
|
||||
toggle.focus();
|
||||
if (e.key === "Escape" && document.body.classList.contains("mobile-navbar-show")) {
|
||||
document.body.classList.remove("mobile-navbar-show");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
window.AksrtFrontend.register("aksrt-nav-drawer", function () { initNavDrawer(); });
|
||||
function init() {
|
||||
appendChevrons();
|
||||
try {
|
||||
navFolding();
|
||||
} catch (err) {
|
||||
// ignore fold failures
|
||||
}
|
||||
bindDrawerA11y();
|
||||
}
|
||||
|
||||
if (window.AksrtFrontend && typeof window.AksrtFrontend.register === "function") {
|
||||
window.AksrtFrontend.register("aksrt-nav-chrome", function () {
|
||||
init();
|
||||
});
|
||||
} else if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
})();
|
||||
@@ -136,28 +136,16 @@
|
||||
}
|
||||
|
||||
function initNavScrollState() {
|
||||
var nav = document.querySelector(".site-nav");
|
||||
|
||||
var sliderContainer = document.querySelector(".header-components-container");
|
||||
if (nav && sliderContainer) {
|
||||
nav.classList.add("nav-transparent");
|
||||
}
|
||||
|
||||
var scrollDownHide = document.body.classList.contains("scroll-down-hide");
|
||||
// Zibll: hide is CSS on body.scroll-down + header.scroll-down-hide.
|
||||
// Keep is-scrolled on .header for optional consumers.
|
||||
var header = document.querySelector(".header");
|
||||
var ticking = false;
|
||||
|
||||
function update() {
|
||||
ticking = false;
|
||||
var body = document.body;
|
||||
if (nav) {
|
||||
nav.classList.toggle("is-scrolled", body.classList.contains("body-scroll"));
|
||||
}
|
||||
if (nav && scrollDownHide) {
|
||||
if (body.classList.contains("scroll-down")) {
|
||||
nav.classList.add("is-hidden");
|
||||
} else {
|
||||
nav.classList.remove("is-hidden");
|
||||
}
|
||||
if (header) {
|
||||
header.classList.toggle("is-scrolled", body.classList.contains("body-scroll"));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -525,7 +525,7 @@
|
||||
* 菜单项超出容器宽度时折叠进「更多」下拉
|
||||
* ============================================================ */
|
||||
function initNavOverflow() {
|
||||
var nav = document.querySelector('.site-nav .nav-menu, .site-nav .primary-nav, .header-nav__menu');
|
||||
var nav = document.querySelector('.navbar-top .nav.navbar-nav');
|
||||
if (!nav) return;
|
||||
|
||||
// 创建「更多」按钮
|
||||
|
||||
@@ -137,7 +137,7 @@
|
||||
|
||||
// Numeric badge inside the user dropdown only — never target the pure avatar
|
||||
// .nav-user__dot.aksrt-notification-badge (no textContent on a dot indicator).
|
||||
var headerBadge = document.querySelector('.user-dropdown__badge');
|
||||
var headerBadge = document.querySelector('.aksrt-notification-badge');
|
||||
if (headerBadge) {
|
||||
headerBadge.textContent = String(nextUnread);
|
||||
headerBadge.style.display = nextUnread > 0 ? '' : 'none';
|
||||
|
||||
@@ -182,10 +182,10 @@
|
||||
el.style.transform = 'translateX(100%)';
|
||||
el.style.opacity = '0';
|
||||
setTimeout(function () {
|
||||
el.classList.remove('is-open');
|
||||
el.style.transform = '';
|
||||
el.style.opacity = '';
|
||||
document.body.classList.remove('nav-open');
|
||||
// Zibll contract: drawer open state lives on body.
|
||||
document.body.classList.remove('mobile-navbar-show');
|
||||
}, 200);
|
||||
} else {
|
||||
el.style.transition = 'transform 0.2s, opacity 0.2s';
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
function siteName() {
|
||||
return (
|
||||
metaContent(['meta[property="og:site_name"]']) ||
|
||||
(document.querySelector('.site-title, .logo-text, .site-nav__logo') || {}).textContent ||
|
||||
(document.querySelector('.site-title, .logo-text, .navbar-logo') || {}).textContent ||
|
||||
document.title ||
|
||||
''
|
||||
).trim();
|
||||
|
||||
Reference in new issue
Block a user