diff --git a/layout/_partial/header.ejs b/layout/_partial/header.ejs
index 4344620..a69ce5f 100755
--- a/layout/_partial/header.ejs
+++ b/layout/_partial/header.ejs
@@ -7,15 +7,15 @@
<% if (config.nav_menu) { %>
<% (config.nav_menu || []).forEach(function(value){ %>
-
+ "
+ class="nav flat-box" href="<%= url_for(value.url) %>">
<%=value.name%>
<%})%>
<% } %>
-
+
<% if (theme.search.enable === true) { %>
@@ -45,12 +45,13 @@
diff --git a/source/js/app.js b/source/js/app.js
index 9f0375d..af08fa4 100755
--- a/source/js/app.js
+++ b/source/js/app.js
@@ -46,47 +46,23 @@ var customSearch;
}
- // function setHeaderMenu() {
- // var $headerMenu = $('header .menu');
- // var $underline = $headerMenu.find('.underline');
- // function setUnderline($item, transition) {
- // $item = $item || $headerMenu.find('li a.active');//get instant
- // transition = transition === undefined ? true : !!transition;
- // if (!transition) $underline.addClass('disable-trans');
- // if ($item && $item.length) {
- // $item.addClass('active').siblings().removeClass('active');
- // $underline.css({
- // left: $item.position().left,
- // width: $item.innerWidth()
- // });
- // } else {
- // $underline.css({
- // left: 0,
- // width: 0
- // });
- // }
- // if (!transition) {
- // setTimeout(function () { $underline.removeClass('disable-trans') }, 0);//get into the queue.
- // }
- // }
- // // $headerMenu.on('mouseenter', 'li', function (e) {
- // // setUnderline($(e.currentTarget));
- // // });
- // // $headerMenu.on('mouseout', function () {
- // // setUnderline();
- // // });
- // //set current active nav
- // var $active_link = null;
- // if (location.pathname === '/' || location.pathname.startsWith('/page/')) {
- // $active_link = $('.nav-home', $headerMenu);
- // } else {
- // var name = location.pathname.match(/\/(.*?)\//);
- // if (name.length > 1) {
- // $active_link = $('.nav-' + name[1], $headerMenu);
- // }
- // }
- // setUnderline($active_link, false);
- // }
+ function setHeaderMenu() {
+ var $headerMenu = $('header .menu');
+ // var $underline = $headerMenu.find('.underline');
+ function setUnderline($item, transition) {
+ $item = $item || $headerMenu.find('li a.active');//get instant
+ transition = transition === undefined ? true : !!transition;
+ // if (!transition) $underline.addClass('disable-trans');
+ if ($item && $item.length) {
+ $item.addClass('active').siblings().removeClass('active');
+ }
+ }
+ //set current active nav
+ var $active_link = null;
+ $active_link = $('#' + location.pathname.replace(/\//g, ""), $headerMenu);
+ setUnderline($active_link, false);
+ console.log($active_link);
+ }
function setHeaderMenuPhone() {
var $switcher = $('.l_header .switcher .s-menu');
@@ -214,7 +190,7 @@ var customSearch;
$(function () {
//set header
setHeader();
- // setHeaderMenu();
+ setHeaderMenu();
setHeaderMenuPhone();
setHeaderSearch();
setWaves();
diff --git a/source/less/_header.less b/source/less/_header.less
index ddf908e..4d1c31d 100755
--- a/source/less/_header.less
+++ b/source/less/_header.less
@@ -74,15 +74,12 @@
font-size: @fontsize_base;
color: fade(@theme_text_in_header, 70%);
padding: 0 8px;
- &.current{
- border-bottom: 4px solid fade(@theme_base_card_bg, 80%);
- }
&:hover{
color: @theme_text_in_header;
border-bottom: 4px solid @theme_base_card_bg;
background: fade(@theme_base_card_bg, 10%);
}
- &.active{
+ &:active,&.active{
color: @theme_text_in_header;
border-bottom: 4px solid @theme_base_card_bg;
}
@@ -90,20 +87,6 @@
@media(max-width: @on_phone){
display:none;
}
-
- // .underline{
- // .enable-trans();
- // position: absolute;
- // background: @theme_text_in_header;
- // left: 0;
- // bottom: 0;
- // width: 0;
- // height: 4px;
- // border-radius: 4px;
- // &:hover{
- // height: 8px;
- // }
- // }
}
.switcher{
display: none;
@@ -218,6 +201,7 @@
box-shadow: @boxshadow_card_normal; // 适合白色导航栏背景
.menu{
ul > li > a{
+ .enable-trans();
color: fade(@theme_base_tint, 70%);
&.current{
border-bottom: 4px solid fade(@theme_base_tint, 80%);
@@ -227,10 +211,10 @@
border-bottom: 4px solid @theme_base_tint;
background: fade(@theme_base_tint, 10%);
}
- }
- .underline{
- // background: @theme_base_tint;
- background: transparent;
+ &:active,&.active{
+ color: @theme_base_tint;
+ border-bottom: 4px solid @theme_base_tint;
+ }
}
}
.switcher{
@@ -323,7 +307,7 @@
border-left: 4px solid @theme_bg_quote;
background: fade(@theme_bg_quote, 10%);
}
- &.current{
+ &.active{
border-left: 4px solid @theme_bg_quote;
}
}