Hướng dẫn thêm active vào menu

Chủ nhật - 17/10/2021 01:02
VNCODE hôm nay xin chia sẽ đến mọi người cách để nhận diện thẻ active cho menu của NUKEVIET. NUKEVIET CMS là hệ quản trị nội dung (Content Management System - CMS) xây dựng dựa trên nền tảng phần mềm nguồn mở NukeViet - một phần mềm nguồn mở thế hệ mới do người Việt phát triển.

Hướng dẫn thêm thẻ active cho menu 

Thêm đoạn code dưới đây vào <script></script> ở thư mục /themes/tên theme đang sử dụng/modules/menu/global.bootstrap.tpl
$(document).ready(function(){
	  $('li a.active').removeClass('active');
	  $(' li a').filter(function(){
return this.href.split('/')[3] + '/'==location.href.split('/')[3] + '/'}).addClass('active')
		$('ul li a').click(function(){
			$('li a.active').removeClass('active');
			$(this).addClass('active');    
		});
	});

Thêm 1 class="active" ở thẻ li a home
<li>
	<a class="active" title="{LANG.Home}" href="{THEME_SITE_HREF}">{LANG.Home}</a>
</li>
Dưới đây là toàn bộ code global.bootstrap.tpl (Lưu ý: code đã được chỉnh sửa để phù hợp với giao diện)
<!-- BEGIN: submenu -->
    <li>
		<a href="{SUBMENU.link}" title="{SUBMENU.note}"{SUBMENU.target}>
		{SUBMENU.title_trim}</a> 
	</li>
<!-- END: submenu -->
<!-- BEGIN: main -->
 <ul class="main-menu list-style">
	<li>
		<a class="active" title="{LANG.Home}" href="{THEME_SITE_HREF}">{LANG.Home}</a>
	</li>
	<!-- BEGIN: top_menu -->
	<li <!-- BEGIN: has_class -->class="has-children"<!-- END: has_class -->>
		<a  href="{TOP_MENU.link}" title="{TOP_MENU.note}">
		<!-- BEGIN: icon --> <img src="{TOP_MENU.icon}" alt="{TOP_MENU.note}" />&nbsp; <!-- END: icon -->{TOP_MENU.title_trim}</a>
		<ul <!-- BEGIN: has_sub --> class="sub-menu list-style"<!-- END: has_sub -->>
			<!-- BEGIN: sub --> {SUB} <!-- END: sub -->
		</ul>
	</li>
	<!-- END: top_menu -->
 </ul>
 <script>
$(document).ready(function(){
	  $('li a.active').removeClass('active');
	  $(' li a').filter(function(){
	return this.href.split('/')[3] + '/'==location.href.split('/')[3] + '/'}).addClass('active')
		$('ul li a').click(function(){
			$('li a.active').removeClass('active');
			$(this).addClass('active');    
		});
	});
</script>
<!-- END: main -->
Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút  Like và chia sẽ để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm VNCODE.

Tác giả: admin

 Tags: nukeviet, nukeviet 4

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết

  Ý kiến bạn đọc

Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây