修复导航栏定位条问题

layout/_partial/header.ejs

@@ -7,15 +7,15 @@
             <% if (config.nav_menu) { %>
     					<% (config.nav_menu || []).forEach(function(value){ %>
     						<li>
-									<a id="<%= is_current(value.url) ? 'is_current' : 'not_current' %>"
+									<a id="<%= url_for(value.url).replace(/\//g, "") %>"
-									 class="nav<%= is_current(value.url) ? ' current2 ' : ' ' %>flat-box" href="<%= url_for(value.url) %>">
+									 class="nav flat-box" href="<%= url_for(value.url) %>">
 										<i class='<%=value.icon%> fa-fw'></i>&nbsp;<%=value.name%>
 									</a>
   							</li>
         			<%})%>
         		<% } %>
 					</ul>
-					<div class='underline'></div>
+					
 				</div>
 
 			<% if (theme.search.enable === true) { %>
@@ -45,12 +45,13 @@
 	</div>
 </header>
 	<aside class="menu-phone">
-		<nav>
+    <header>
+		<nav class="menu">
       <ul>
           <% if (config.nav_menu) { %>
               <% (config.nav_menu || []).forEach(function(value){ %>
                   <li>
-										<a class="nav <%- page.path.replace('index.html', '').replace("/", "") == value.url.replace("/", "") ? 'current' : '' %> flat-box" href="<%= url_for(value.url) %>">
+										<a id="<%= url_for(value.url).replace(/\//g, "") %>" class="nav flat-box" href="<%= url_for(value.url) %>">
 											<i class='<%=value.icon%> fa-fw'></i>&nbsp;<%=value.name%>
 										</a>
                   </li>
@@ -58,4 +59,5 @@
        <% } %>
       </ul>
 		</nav>
+    </header>
 	</aside>

source/js/app.js

@@ -46,47 +46,23 @@ var customSearch;
 
 	}
 
-	// function setHeaderMenu() {
+	function setHeaderMenu() {
-	// 	var $headerMenu = $('header .menu');
+		var $headerMenu = $('header .menu');
-	// 	var $underline = $headerMenu.find('.underline');
+		// var $underline = $headerMenu.find('.underline');
-	// 	function setUnderline($item, transition) {
+		function setUnderline($item, transition) {
-	// 		$item = $item || $headerMenu.find('li a.active');//get instant
+			$item = $item || $headerMenu.find('li a.active');//get instant
-	// 		transition = transition === undefined ? true : !!transition;
+			transition = transition === undefined ? true : !!transition;
-	// 		if (!transition) $underline.addClass('disable-trans');
+			// if (!transition) $underline.addClass('disable-trans');
-	// 		if ($item && $item.length) {
+			if ($item && $item.length) {
-	// 			$item.addClass('active').siblings().removeClass('active');
+				$item.addClass('active').siblings().removeClass('active');
-	// 			$underline.css({
+			}
-	// 				left: $item.position().left,
+		}
-	// 				width: $item.innerWidth()
+		//set current active nav
-	// 			});
+		var $active_link = null;
-	// 		} else {
+    $active_link = $('#' + location.pathname.replace(/\//g, ""), $headerMenu);
-	// 			$underline.css({
+		setUnderline($active_link, false);
-	// 				left: 0,
+    console.log($active_link);
-	// 				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 setHeaderMenuPhone() {
 		var $switcher = $('.l_header .switcher .s-menu');
@@ -214,7 +190,7 @@ var customSearch;
 	$(function () {
 		//set header
 		setHeader();
-		// setHeaderMenu();
+		setHeaderMenu();
 		setHeaderMenuPhone();
 		setHeaderSearch();
 		setWaves();

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%);
               }
-          }
+              &:active,&.active{
-          .underline{
+                  color: @theme_base_tint;
-              // background: @theme_base_tint;
+                  border-bottom: 4px solid @theme_base_tint;
-              background: transparent;
+              }
           }
       }
       .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;
             }
         }