Hướng dẫn tạo menu dọc với joomla

Với giao diện joomla cơ bản ta sẽ thường gặp loại menu ngang, nhưng có lẻ sẽ có lúc chúng ta nhàm chán với nó. VÌ thế tôi sẽ giới thiệu cho các bạn cách để điều chỉnh nó thành một menu dọc.

Đầu tiên ta vào phần Templates, vào thư mục css > custom.css để chỉnh sửa css của joomla

Ta chỉ cần chỉnh reponsive phần màm hình to(min-width:600px) của các máy PC còn nhỏ hơn nó sẽ tự động ẩn và chuyển thành thanh menu hamburger của joomla.

Viết thêm đoạn code dưới đây vào file custom.css của bạn:

//body chúng ta cho cách lề trái để không bị menu đè lên
@media(min-width: 600px)
{
	body
	{
		margin-left: 230px;
	}
	#sp-menu-wrapper
	{
		position: fixed;
		top: -1px;
		left: 0;
		width: 220px;
		padding: 0 5px;
		background: #1D9122;
		height: 100vh;
		z-index: 1;
	}
	#sp-menu-wrapper .container
	{
		width: 220px;
	}
	#sp-menu-wrapper #sp-menu
	{
		width: 100%;
	}
//phần này chúng ta thay đổi sub.menu
	#sp-main-menu ul.level-0 > li
	{
		display: block;
		border-left: 0;
		margin-left: 0;
		padding: 0;
	}
	#sp-main-menu ul.level-0 > li a
	{
		color: #FFFFFF;
	}
	#sp-main-menu ul.level-0 > li.parent >a span.menu:after
	{
		content: "\f054";
	}
	#sp-main-menu a.active .menu-title, #sp-main-menu ul.level-0 > li:hover > a, #sp-main-menu ul.level-0 > li.active > a
	{
		color: #F0FF02;
	}
	#sp-main-menu ul.level-0 > li:hover:after, #sp-main-menu ul.level-0 > li.active:after
	{
		content: "";
		left: 0;
		top: 0;
		background: transparent;
	}
	#sp-main-menu ul.level-0 > li:hover
	{
		-webkit-box-shadow: none;
	}
	#sp-main-menu .sp-submenu
	{
		left: 100% !important;
		top: 0 !important;
	}
	#sp-main-menu .sp-submenu li
	{
		background: #B3832E;
	}
//điều chỉnh lại kích thước của logo
	#sp-logo
	{
		width: 100%;
	}

Chúc các bạn thành công!

- Võ Hoàng Giang -