Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
大白技术控
yanglr2010
提交
5f904fcf
Y
yanglr2010
项目概览
大白技术控
/
yanglr2010
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Y
yanglr2010
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
5f904fcf
编写于
1月 13, 2020
作者:
EvanOne(文一)
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: Solved that the secondary menu not display in some cases
上级
079e2a52
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
113 addition
and
96 deletion
+113
-96
layout/_mixins/menu-item.pug
layout/_mixins/menu-item.pug
+5
-5
source/css/_common/components/header/index.styl
source/css/_common/components/header/index.styl
+14
-15
source/css/_common/responsive.styl
source/css/_common/responsive.styl
+21
-15
source/js/header.js
source/js/header.js
+73
-61
未找到文件。
layout/_mixins/menu-item.pug
浏览文件 @
5f904fcf
mixin menuItem(menu)
mixin menuItem(menu
, className
)
each value, name in (menu || {})
each value, name in (menu || {})
if name && value
if name && value
- var item = value.split('||')
- var item = value.split('||')
...
@@ -10,10 +10,10 @@ mixin menuItem(menu)
...
@@ -10,10 +10,10 @@ mixin menuItem(menu)
if menuPath.toLowerCase() === 'javascript:;'
if menuPath.toLowerCase() === 'javascript:;'
- isSubMenu = true
- isSubMenu = true
div
.header-nav-menu-item
div
(class=`header-nav-${className || ""}menu-item`)
a
.header-nav-menu-item__a
(
a(
href=isSubMenu ? "javascript:;" : menuPath
href=isSubMenu ? "javascript:;" : menuPath
class=
isSubMenu ? "nopointer" : ""
class=
`header-nav-${className || ""}menu-item__a ${isSubMenu ? "nopointer" : ""}`
)
)
if !theme.menu_settings.text_only && !!menuIcon
if !theme.menu_settings.text_only && !!menuIcon
i(class=`${fa_prefix} fa-${menuIcon}`)
i(class=`${fa_prefix} fa-${menuIcon}`)
...
@@ -21,4 +21,4 @@ mixin menuItem(menu)
...
@@ -21,4 +21,4 @@ mixin menuItem(menu)
!= __(`menu.${name}`)
!= __(`menu.${name}`)
if isSubMenu
if isSubMenu
div.header-nav-submenu
div.header-nav-submenu
+menuItem(theme.submenu[name])
+menuItem(theme.submenu[name]
, 'sub'
)
source/css/_common/components/header/index.styl
浏览文件 @
5f904fcf
...
@@ -23,7 +23,6 @@ if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_heigh
...
@@ -23,7 +23,6 @@ if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_heigh
width: 100%;
width: 100%;
height: header-nav-height;
height: header-nav-height;
transition: transform .2s ease, background-color .2s ease;
transition: transform .2s ease, background-color .2s ease;
will-change: transform;
&.fixed {
&.fixed {
background-color: $header-nav-bg-color;
background-color: $header-nav-bg-color;
...
@@ -53,6 +52,17 @@ if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_heigh
...
@@ -53,6 +52,17 @@ if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_heigh
padding: 0 .5rem;
padding: 0 .5rem;
line-height: header-nav-height;
line-height: header-nav-height;
color: $header-text-color;
color: $header-text-color;
cursor: pointer;
}
&-menu-item,
&-submenu-item {
&__a {
display: block;
padding: 0 .5rem;
color: $header-text-color;
transition: color .2s ease;
}
}
}
&-menu {
&-menu {
...
@@ -71,26 +81,19 @@ if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_heigh
...
@@ -71,26 +81,19 @@ if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_heigh
&:last-child {
&:last-child {
margin: 0;
margin: 0;
}
}
&__a {
display: block;
padding: 0 .5rem;
color: $header-text-color;
transition: color .2s ease;
}
}
}
}
}
&-submenu {
&-submenu {
display: none;
display: none;
position: absolute;
position: absolute;
left: 50%;
right: -.5rem;
left: -.5rem;
border-radius: 3px;
border-radius: 3px;
width: auto;
width: auto;
background-color: $header-nav-bg-color;
background-color: $header-nav-bg-color;
transform: translateX(-50%);
.header-nav-menu
-item {
&
-item {
margin: 0;
margin: 0;
width: 100%;
width: 100%;
font-size: $font-size-header;
font-size: $font-size-header;
...
@@ -98,10 +101,6 @@ if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_heigh
...
@@ -98,10 +101,6 @@ if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_heigh
line-height: header-nav-height;
line-height: header-nav-height;
text-align: center;
text-align: center;
white-space: nowrap;
white-space: nowrap;
&__a {
padding: 0 .8rem;
}
}
}
}
}
...
...
source/css/_common/responsive.styl
浏览文件 @
5f904fcf
...
@@ -6,7 +6,7 @@
...
@@ -6,7 +6,7 @@
width: $main-width;
width: $main-width;
}
}
}
}
.main-inner {
.main-inner {
width: $main-width;
width: $main-width;
}
}
...
@@ -56,12 +56,21 @@
...
@@ -56,12 +56,21 @@
float: left;
float: left;
}
}
menuItemHover(txtColor, bgColor) {
transition: color .2s ease, background-color .2s ease;
&:hover {
color: txtColor;
background-color: bgColor;
}
}
.header-nav-menu {
.header-nav-menu {
overflow: hidden;
overflow: hidden;
position: absolute;
position: absolute;
top: header-nav-height;
top: header-nav-height;
right: 0
- $main-side-gap
;
right: 0;
left: 0
- $main-side-gap
;
left: 0;
width: auto;
width: auto;
height: auto;
height: auto;
background-color: $header-nav-bg-color;
background-color: $header-nav-bg-color;
...
@@ -70,17 +79,14 @@
...
@@ -70,17 +79,14 @@
float: none;
float: none;
overflow: hidden;
overflow: hidden;
margin: 0;
margin: 0;
menuItemHover(#f4f5f5, $blue-light);
&__a {
&__a {
padding: 0 1.5rem;
padding: 0 1.5rem;
text-align: left;
text-align: left;
color:
$white-light
;
color:
#f4f5f5
;
user-select: none;
user-select: none;
menuItemHover(#f4f5f5, $blue-light);
&:hover {
color: $white-light;
background-color: $blue-lighter;
}
}
}
}
}
}
}
...
@@ -89,13 +95,13 @@
...
@@ -89,13 +95,13 @@
display: block;
display: block;
position: initial;
position: initial;
width: 100%;
width: 100%;
transform: translateX(0);
.header-nav-menu {
&-item {
&-item {
text-align: left;
&__a {
padding: 0 1rem 0 3rem;
&__a {
}
padding: 0 1rem 0 3rem;
menuItemHover(#f4f5f5, #7ccbff);
}
}
}
}
}
}
...
...
source/js/header.js
浏览文件 @
5f904fcf
$
(
document
).
ready
(
function
()
{
$
(
document
).
ready
(
function
()
{
var
$menu
=
$
(
'
.header-nav-menu
'
);
var
$menu
=
$
(
'
.header-nav-menu
'
);
var
$menuItem
=
$
(
'
.header-nav-menu > .header-nav-menu-item
'
);
var
$submenu
=
$
(
'
.header-nav-submenu
'
);
var
$allSubmenu
=
$
(
'
.header-nav-submenu
'
);
var
$menuItem
=
$
(
'
.header-nav-menu-item
'
);
var
$menuBtn
=
$
(
'
.header-nav-btn
'
);
var
isMobile
=
$menuBtn
.
is
(
'
:visible
'
);
function
closeMenuItem
()
{
function
resetMenuHeight
()
{
$menuItem
.
velocity
({
$menuItem
.
velocity
({
height
:
$menuItem
.
height
()
height
:
$menuItem
.
height
()
});
}
function
resetMenuStatus
()
{
$menuItem
.
velocity
(
'
stop
'
).
velocity
({
height
:
$menuItem
.
height
()
},
{
},
{
complete
:
function
()
{
complete
:
function
()
{
$
allS
ubmenu
.
css
({
display
:
'
none
'
,
opacity
:
0
});
$
s
ubmenu
.
css
({
display
:
'
none
'
,
opacity
:
0
});
}
}
});
});
}
}
...
@@ -22,16 +18,24 @@ $(document).ready(function () {
...
@@ -22,16 +18,24 @@ $(document).ready(function () {
var
isMenuShow
=
false
;
var
isMenuShow
=
false
;
var
isSubmenuShow
=
false
;
var
isSubmenuShow
=
false
;
$
(
window
).
on
(
'
resize
'
,
function
()
{
$
(
window
).
on
(
'
resize
'
,
Stun
.
utils
.
throttle
(
function
()
{
if
(
isSubmenuShow
)
{
isMobile
=
$menuBtn
.
is
(
'
:visible
'
);
resetMenuStatus
();
if
(
isMobile
&&
isSubmenuShow
)
{
resetMenuHeight
();
isSubmenuShow
=
false
;
isSubmenuShow
=
false
;
}
else
{
$submenu
.
css
({
display
:
'
none
'
,
opacity
:
0
});
}
}
});
}
,
200
)
);
$
(
document
).
on
(
'
click
'
,
function
()
{
$
(
document
).
on
(
'
click
'
,
function
()
{
if
(
$menu
.
is
(
'
:visible
'
))
{
if
(
$menu
.
is
(
'
:visible
'
))
{
closeMenuItem
();
if
(
isMobile
&&
isSubmenuShow
)
{
resetMenuHeight
();
isSubmenuShow
=
false
;
}
$menu
.
css
({
display
:
'
none
'
});
$menu
.
css
({
display
:
'
none
'
});
isMenuShow
=
false
;
isMenuShow
=
false
;
}
}
...
@@ -82,9 +86,13 @@ $(document).ready(function () {
...
@@ -82,9 +86,13 @@ $(document).ready(function () {
});
});
}
}
$
(
'
.header-nav-btn
'
)
.
on
(
'
click
'
,
function
(
e
)
{
$
menuBtn
.
on
(
'
click
'
,
function
(
e
)
{
e
.
stopPropagation
();
e
.
stopPropagation
();
if
(
isMobile
&&
isMenuShow
&&
isSubmenuShow
)
{
resetMenuHeight
();
isSubmenuShow
=
false
;
}
if
(
!
isMenuShow
)
{
if
(
!
isMenuShow
)
{
isMenuShow
=
true
;
isMenuShow
=
true
;
}
else
{
}
else
{
...
@@ -97,72 +105,76 @@ $(document).ready(function () {
...
@@ -97,72 +105,76 @@ $(document).ready(function () {
duration
:
isMenuShow
?
200
:
0
,
duration
:
isMenuShow
?
200
:
0
,
display
:
isMenuShow
?
'
block
'
:
'
none
'
display
:
isMenuShow
?
'
block
'
:
'
none
'
});
});
});
if
(
!
isMenuShow
)
{
// Whether to allow events to bubble in the menu.
closeMenuItem
();
var
isBubbleInMenu
=
false
;
}
var
$submenuItem
=
$
(
'
.header-nav-submenu-item
'
);
$submenuItem
.
on
(
'
click
'
,
function
()
{
isBubbleInMenu
=
true
;
});
});
$menuItem
.
on
(
'
click
'
,
function
(
e
)
{
$menuItem
.
on
(
'
click
'
,
function
(
e
)
{
if
(
!
isMobile
)
{
return
;
}
var
$submenu
=
$
(
this
).
find
(
'
.header-nav-submenu
'
);
var
$submenu
=
$
(
this
).
find
(
'
.header-nav-submenu
'
);
if
(
!
$submenu
.
length
)
{
return
;
}
if
(
!
isBubbleInMenu
)
{
e
.
stopPropagation
();
}
else
{
isBubbleInMenu
=
false
;
}
var
menuItemHeight
=
$menuItem
.
height
();
var
menuItemHeight
=
$menuItem
.
height
();
var
submenuHeight
=
menuItemHeight
+
$submenu
.
height
()
*
$submenu
.
length
;
var
submenuHeight
=
menuItemHeight
+
$submenu
.
height
()
*
$submenu
.
length
;
var
menuShowHeight
=
0
;
var
menuShowHeight
=
0
;
if
(
$submenu
.
length
)
{
if
(
$
(
this
).
height
()
>
menuItemHeight
)
{
e
.
stopPropagation
();
isSubmenuShow
=
false
;
menuShowHeight
=
menuItemHeight
;
if
(
$
(
this
).
height
()
>
menuItemHeight
)
{
}
else
{
isSubmenuShow
=
false
;
isSubmenuShow
=
true
;
menuShowHeight
=
menuItemHeight
;
menuShowHeight
=
submenuHeight
;
}
else
{
isSubmenuShow
=
true
;
menuShowHeight
=
submenuHeight
;
}
// 手风琴效果
$
(
this
)
.
velocity
(
'
stop
'
)
.
velocity
({
height
:
menuShowHeight
},
{
duration
:
300
})
.
siblings
()
.
velocity
({
height
:
menuItemHeight
},
{
duration
:
300
});
}
}
$submenu
.
css
({
display
:
'
block
'
,
opacity
:
1
});
// Accordion effect.
$
(
this
)
.
velocity
(
'
stop
'
)
.
velocity
({
height
:
menuShowHeight
},
{
duration
:
300
})
.
siblings
()
.
velocity
({
height
:
menuItemHeight
},
{
duration
:
300
});
});
});
$menuItem
.
on
(
'
mouseenter
'
,
function
()
{
$menuItem
.
on
(
'
mouseenter
'
,
function
()
{
if
(
isSubmenuShow
)
{
var
$submenu
=
$
(
this
).
find
(
'
.header-nav-submenu
'
);
if
(
!
$submenu
.
length
)
{
return
;
return
;
}
}
if
(
!
$submenu
.
is
(
'
:visible
'
))
{
var
$submenu
=
$
(
this
).
find
(
'
.header-nav-submenu
'
);
if
(
isMobile
)
{
$submenu
.
css
({
display
:
'
block
'
,
opacity
:
1
});
if
(
$submenu
.
length
)
{
}
else
{
$submenu
.
velocity
(
'
stop
'
).
velocity
({
$submenu
opacity
:
1
.
velocity
(
'
stop
'
)
},
{
.
velocity
(
'
transition.slideUpIn
'
,
{
duration
:
200
});
duration
:
200
,
}
display
:
'
block
'
});
}
}
});
});
$menuItem
.
on
(
'
mouseleave
'
,
function
()
{
$menuItem
.
on
(
'
mouseleave
'
,
function
()
{
if
(
isSubmenuShow
)
{
var
$submenu
=
$
(
this
).
find
(
'
.header-nav-submenu
'
);
if
(
!
$submenu
.
length
)
{
return
;
return
;
}
}
if
(
$submenu
.
is
(
'
:visible
'
)
&&
!
isMobile
)
{
var
$submenu
=
$
(
this
).
find
(
'
.header-nav-submenu
'
);
$submenu
.
css
({
display
:
'
none
'
,
opacity
:
0
});
isSubmenuShow
=
false
;
if
(
$submenu
.
length
)
{
$submenu
.
css
(
'
display
'
,
'
none
'
);
}
}
});
});
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录