diff --git a/source/css/_common/outline/header/menu.styl b/source/css/_common/outline/header/menu.styl index be75ecc..66d80a3 100644 --- a/source/css/_common/outline/header/menu.styl +++ b/source/css/_common/outline/header/menu.styl @@ -27,11 +27,8 @@ transition-property: border-color; the-transition(); - // To prevent hover on external links with touch devices after click. - @media (hover: none) { - &:hover { - border-bottom-color: transparent !important; - } + &:hover, &.menu-item-active { + background: var(--menu-item-bg-color); } } @@ -55,10 +52,6 @@ } } -.menu-item-active a { - background: var(--menu-item-bg-color); -} - .use-motion .menu-item { opacity: 0; } diff --git a/source/css/_schemes/Mist/_menu.styl b/source/css/_schemes/Mist/_menu.styl index 018b644..3f39df5 100644 --- a/source/css/_schemes/Mist/_menu.styl +++ b/source/css/_schemes/Mist/_menu.styl @@ -26,10 +26,6 @@ +mobile() { text-align: left; } - - &:hover { - @extend .menu-item-active a; - } } .badge { diff --git a/source/css/_schemes/Muse/_menu.styl b/source/css/_schemes/Muse/_menu.styl index 5b653af..517de9c 100644 --- a/source/css/_schemes/Muse/_menu.styl +++ b/source/css/_schemes/Muse/_menu.styl @@ -15,15 +15,6 @@ } } -.menu-item-active a { - background: transparent; - border-bottom: 1px solid var(--link-hover-color) !important; - - +mobile() { - border-bottom: 1px dotted $grey-lighter !important; - } -} - .menu .menu-item { +mobile() { margin: 0 10px; @@ -36,8 +27,13 @@ padding: 5px 10px; } - &:hover { - @extend .menu-item-active a; + &:hover, &.menu-item-active { + background: transparent; + border-bottom: 1px solid var(--link-hover-color); + + +mobile() { + border-bottom: 1px dotted $grey-lighter; + } } } diff --git a/source/css/_schemes/Pisces/_menu.styl b/source/css/_schemes/Pisces/_menu.styl index b8d4f6c..a4afc82 100644 --- a/source/css/_schemes/Pisces/_menu.styl +++ b/source/css/_schemes/Pisces/_menu.styl @@ -27,10 +27,6 @@ position: relative; text-align: left; transition-property: background-color; - - &:hover { - @extend .menu-item-active a; - } } +tablet-mobile() { @@ -51,7 +47,7 @@ } if (!hexo-config('menu_settings.badges')) { - .main-menu .menu-item-active a::after { + .main-menu .menu-item-active::after { background: $grey; border-radius: 50%; content: ' '; diff --git a/source/css/_schemes/Pisces/_sub-menu.styl b/source/css/_schemes/Pisces/_sub-menu.styl index 3f83276..a3c5847 100644 --- a/source/css/_schemes/Pisces/_sub-menu.styl +++ b/source/css/_schemes/Pisces/_sub-menu.styl @@ -19,7 +19,7 @@ } } - .menu-item-active a { + .menu-item-active { border-bottom-color: $sidebar-highlight; color: $sidebar-highlight; diff --git a/source/js/utils.js b/source/js/utils.js index ed0ce34..8f19cc5 100644 --- a/source/js/utils.js +++ b/source/js/utils.js @@ -211,12 +211,10 @@ NexT.utils = { }, registerActiveMenuItem: function() { - document.querySelectorAll('.menu-item').forEach(element => { - const target = element.querySelector('a[href]'); - if (!target) return; + document.querySelectorAll('.menu-item a[href]').forEach(target => { const isSamePath = target.pathname === location.pathname || target.pathname === location.pathname.replace('index.html', ''); const isSubPath = !CONFIG.root.startsWith(target.pathname) && location.pathname.startsWith(target.pathname); - element.classList.toggle('menu-item-active', target.hostname === location.hostname && (isSamePath || isSubPath)); + target.classList.toggle('menu-item-active', target.hostname === location.hostname && (isSamePath || isSubPath)); }); },