Chuyển tới nội dung
Trang chủ » Hướng dẫn tạo menu responsive đa cấp html và css 3, jquery chi tiết

Hướng dẫn tạo menu responsive đa cấp html và css 3, jquery chi tiết

Trong lập trình web menu đa cấp rất rất quan trọng, bởi nó thể hiện bộ mặt của website đẹp hay không đẹp, đa dụng hay không đa dụng, cả về p…

Trong lập trình web menu đa cấp rất rất quan trọng, bởi nó thể hiện bộ mặt của website đẹp hay không đẹp, đa dụng hay không đa dụng, cả về phần backend lẫn front-end. Khi chúng ta thiết kế cho bản thân hoặc khách hàng đều phải cần thiết có nó. Nhiều khi chúng ta hay bỏ qua vấn đề này khiến trang web của mình trở nên mất thẩm mỹ khi xem ở thiết bị di động. Vậy làm thế nào để thiết kế được menu đa cấp responsive bằng html, css và jquery hãy theo dõi phần dưới

Trong thiết kế web tĩnh bằng html css có nhiều dạng menu đa cấp, nhưng hôm nay mình sẽ hướng dẫn các bạn xây dựng 2 dạng menu đa cấp phổ biến nhất

Để làm được menu đa cấp responsive cho website chúng ta cần kiến thức gì

Đâu tiên và bắt buộc là các bạn phải biết HTML, CSS cơ bản

Javascrpit/Jquery

Và một chút về độ họa để thẩm mỹ 😀 (không biết vấn làm được)

Chung ta hãy bắt tay vào xây dựng nó đi thôi

Ở đây mình sẽ hướng dẫn làm 2 kiểu theo trình tự để các bạn biết

1. Responsive DropDown Menu Using JQuery

Xem demo online: tại đây

Mã HTML

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta
charset=”UTF-8″>
<meta
name=”viewport”
content=”width=device-width,initial-scale=1.0″>
<meta
charset=”UTF-8″>

<title>Responsive DropDown Menu Using JQuery</title>
</head>
<body>
<div
id=”wrapper”>
<header>
<nav
id=’main-menu’>
<div
class=”logo”><a href=”index.html”>Responsive menu
</a>

</div>

<div id=”head-mobile”></div>

<div class=”button”></div>

<ul>

<li class=’active’><a href=’#’>HOME</a>

</li>

<li><a href=’#’>ABOUT</a>

</li>

<li><a href=’#’>PRODUCTS</a>

<ul>

<li><a href=’#’>Product 1</a>
<ul>

<li><a href=’#’>Sub Product</a>
</li>

<li><a href=’#’>Sub Product</a>
</li>
</ul>

</li>

<li><a href=’#’>Product 2</a>
<ul>

<li><a href=’#’>Sub Product</a>
</li>

<li><a href=’#’>Sub Product</a>
</li>
</ul>

</li>

</ul>

</li>

<li><a href=’#’>BIO</a>

</li>

<li><a href=’#’>VIDEO</a>

</li>

<li><a href=’#’>GALLERY</a>

</li>

<li><a href=’#’>CONTACT</a>

</li>

</ul>

</nav>

</header>
</body>
</html>

Sau đó chúng ta css cho menu đẹp

Mã CSS

Hiển thị menu trên Deskop

/* menu */
.logo{position:relative;z-index:123;padding:10px;font:18px
verdana;color:#6DDB07;float:left;width:15%}
.logo a{color:#6DDB07;}
nav{position:relative;width:1170px;margin:0 auto;}
#main-menu,#main-menu ul,#main-menu ul li,#main-menu ul li
a,#main-menu
#head-mobile{border:0;list-style:none;line-height:1;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#main-menu:after,#main-menu >
ul:after{content:”.”;display:block;clear:both;visibility:hidden;line-height:0;height:0}
#main-menu #head-mobile{display:none}
#main-menu{font-family:sans-serif;background:#d81146}
#main-menu > ul > li{float:left}
#main-menu > ul > li > a{padding:17px;font-size:12px;letter-spacing:1px;text-decoration:none;color:#fff;font-weight:700;}
#main-menu > ul > li:hover > a,#main-menu ul
li.active a{color:yellow}
#main-menu > ul > li:hover,#main-menu ul
li.active:hover,#main-menu ul li.active,#main-menu ul li.has-sub.active:hover{color:yellow!important;-webkit-transition:background
.3s ease;-ms-transition:background .3s ease;transition:background .3s ease;}
#main-menu > ul > li.has-sub >
a{padding-right:30px}
#main-menu > ul > li.has-sub > a:after{position:absolute;top:22px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:”}
#main-menu > ul > li.has-sub >
a:before{position:absolute;top:19px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:”;-webkit-transition:all
.25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#main-menu > ul > li.has-sub:hover >
a:before{top:23px;height:0}
#main-menu ul ul{position:absolute;left:-9999px}
#main-menu ul ul li{height:0;-webkit-transition:all .25s
ease;-ms-transition:all .25s ease;background:#d81146;transition:all .25s ease}
#main-menu ul ul li:hover{}
#main-menu li:hover > ul{left:auto}
#main-menu li:hover > ul > li{height:35px}
#main-menu ul ul ul{margin-left:100%;top:0}
#main-menu ul ul li a{border-bottom:1px solid rgba(150,150,150,0.15);padding:11px
15px;width:170px;font-size:12px;text-decoration:none;color:#fff;font-weight:400;}
#main-menu ul ul li:last-child > a,#main-menu ul ul
li.last-item > a{border-bottom:0}
#main-menu ul ul li:hover > a,#main-menu ul ul li a:hover{color:#fff}
#main-menu ul ul li.has-sub >
a:after{position:absolute;top:16px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:”}
#main-menu ul ul li.has-sub >
a:before{position:absolute;top:13px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:”;-webkit-transition:all
.25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#main-menu ul ul > li.has-sub:hover >
a:before{top:17px;height:0}
/* #main-menu ul ul li.has-sub:hover,#main-menu ul
li.has-sub ul li.has-sub ul li:hover{} */
#main-menu ul ul ul li.active a{border-left:1px solid
#d81146}
#main-menu > ul > li.has-sub > ul > li.active
> a,#main-menu > ul ul > li.has-sub > ul > li.active>
a{border-top:1px solid #d81146}
Hiển thị trên thiết bị thông minh (tablet, di dộng)
@media screen and (max-width:1000px){
.logo{position:absolute;top:0;left:
0;width:100%;height:46px;text-align:center;padding:10px 0 0 0 ;float:none}
.logo2{display:none}
nav{width:100%;}
#main-menu{width:100%}
#main-menu ul{width:100%;display:none}
#main-menu ul li{width:100%;}
#main-menu ul li:hover{background:#363636;}
#main-menu ul ul li,#main-menu li:hover > ul >
li{height:auto}
#main-menu ul li a,#main-menu ul ul li
a{width:100%;border-bottom:0}
#main-menu > ul > li{float:none}
#main-menu ul ul li a{padding-left:25px}
#main-menu ul ul li{background:#d81146!important;}
#main-menu ul ul li:hover{background:#363636!important}
#main-menu ul ul ul li a{padding-left:35px}
#main-menu ul ul li a{color:#fff;background:none}
#main-menu ul ul li:hover > a,#main-menu ul ul li.active
> a{color:yellow}
#main-menu ul ul,#main-menu ul ul
ul{position:relative;left:0;width:100%;margin:0;text-align:left}
#main-menu > ul > li.has-sub > a:after,#main-menu
> ul > li.has-sub > a:before,#main-menu ul ul > li.has-sub >
a:after,#main-menu ul ul > li.has-sub > a:before{display:none}
#main-menu
#head-mobile{display:block;padding:23px;color:#fff;font-size:12px;font-weight:700}
.button{width:55px;height:46px;position:absolute;right:0;top:0;cursor:pointer;z-index:
12399994;}
.button:after{position:absolute;top:22px;right:20px;display:block;height:4px;width:20px;border-top:2px
solid #fff;border-bottom:2px solid #fff;content:”}
.button:before{-webkit-transition:all .3s
ease;-ms-transition:all .3s ease;transition:all .3s
ease;position:absolute;top:16px;right:20px;display:block;height:2px;width:20px;background:#fff;content:”}
.button.menu-opened:after{-webkit-transition:all .3s
ease;-ms-transition:all .3s ease;transition:all .3s
ease;top:23px;border:0;height:2px;width:19px;background:#fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
.button.menu-opened:before{top:23px;background:#fff;width:19px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
#main-menu
.submenu-button{position:absolute;z-index:99;right:0;top:0;display:block;height:46px;width:46px;cursor:pointer}
#main-menu
.submenu-button.submenu-opened{background:#262626}
#main-menu ul ul .submenu-button{height:34px;width:34px}
#main-menu
.submenu-button:after{position:absolute;top:22px;right:19px;width:8px;height:2px;display:block;background:#fff;content:”}
#main-menu ul ul .submenu-button:after{top:15px;right:13px}
#main-menu
.submenu-button.submenu-opened:after{background:#fff}
#main-menu
.submenu-button:before{position:absolute;top:19px;right:22px;display:block;width:2px;height:8px;background:#fff;content:”}
#main-menu ul ul .submenu-button:before{top:12px;right:16px}
#main-menu
.submenu-button.submenu-opened:before{display:none}
#main-menu ul ul ul li.active a{border-left:none}
#main-menu > ul > li.has-sub > ul > li.active
> a,#main-menu > ul ul > li.has-sub > ul > li.active >
a{border-top:none}
}
/* end menu */

Để có thể co vào và xổ ra khi người dùng ấn thì các bạn cần
phải code jqury cho nó bằng đoạn code sau:

Đầu tiên khai báo thư viện jquery

Ở đây mình dùng bản 1.11, các bạn chèn đoạn mã sau vào trước
thẻ đóng </body> nhé

<script
src=”http://code.jquery.com/jquery-1.11.1.min.js”></script>
<script>
(function($) {

$.fn.menumaker = function(options) {
var
mainmn = $(this),

settings = $.extend({

format: “dropdown”,

sticky: false
},
options);
return
this.each(function() {

$(this).find(“.button”).on(‘click’, function() {

$(this).toggleClass(‘menu-opened’);

var mainmenu = $(this).next(‘ul’);

if (mainmenu.hasClass(‘open’)) {

mainmenu.slideToggle().removeClass(‘open’);

} else {

mainmenu.slideToggle().addClass(‘open’);

if (settings.format === “dropdown”) {

mainmenu.find(‘ul’).show();

}

}

});
mainmn.find(‘li
ul’).parent().addClass(‘has-sub’);

multiTg = function() {

mainmn.find(“.has-sub”).prepend(‘<span
class=”submenu-button”></span>’);

mainmn.find(‘.submenu-button’).on(‘click’, function() {

$(this).toggleClass(‘submenu-opened’);

if ($(this).siblings(‘ul’).hasClass(‘open’)) {
$(this).siblings(‘ul’).removeClass(‘open’).slideToggle();

} else {

$(this).siblings(‘ul’).addClass(‘open’).slideToggle();

}

});
};
if
(settings.format === ‘multitoggle’) multiTg();

else mainmn.addClass(‘dropdown’);
if
(settings.sticky === true) mainmn.css(‘position’, ‘fixed’);

resizeFix = function() {

var mediasize = 1000;

if ($(window).width() > mediasize) {

mainmn.find(‘ul’).show();

}

if ($(window).width() <= mediasize) {
mainmn.find(‘ul’).hide().removeClass(‘open’);

}
};

resizeFix();

return $(window).on(‘resize’, resizeFix);
});
};
})(jQuery);

(function($) {

$(document).ready(function() {

$(“#main-menu”).menumaker({

format: “multitoggle”
});
});
})(jQuery);
</script>

Đó mình đã hoàn thành menu đa cấp responsive kiểu 1 rồi. Sau
đâu mình sẽ làm tiếp kiểu 2, kiểu này đa số web hiện nay đều sử dụng đến

2

. Responsive Multi Level Off canvas

Tương tự như trên ta có mã

HTML

<!Doctype html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport”
content=”user-scalable=no, width=device-width, initial-scale=1.0″
/>
<link rel=”stylesheet”
href=”https://use.fontawesome.com/releases/v5.5.0/css/all.css”
integrity=”sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU”
crossorigin=”anonymous”>
</head>
<title>Responsive Multi Level Off canvas Navigation
Plugin Navpad-Menu</title>
<body>
<div id=”menu”>
<div
class=”menu-toggler”><span><i class=”fas
fa-align-justify”></i></span></div>
<div
class=”responsive-menu”>
<div
id=”navigator-menu”>
<ul
class=”nav”>
<li
class=”title”>Off-canvas menu</li>

<li><a href=”#” title=””
style=”border:none;”>Da trắng</a></li>

<li><a href=”#” title=””>Tóc
đen</a></li>
<li>
<a href=”#container” title=””>Mắt
xinh</a></li>

<li><a href=”#” title=””>Dáng đẹp</a></li>

<li><a href=”#” title=””>Trang điểm</a></li>

<li><a href=”#” title=””>Khéo
tay</a></li>

<li><a href=”#” title=””>Thời
trang</a></li>

<li><a href=”#” title=””>Review mỹ phẩm</a></li>

<li><a href=”#” title=””>Sức khỏe</a></li>

<li><a href=”#” title=””>Làm đẹp</a></li>
<li>
<a href=”#container” title=””><i class=”fas
fa-search”></i></a>
<ul>
<li>
<div
class=”form-search1″>

<form action=””>

<input type=”text”>

</form>

</div>

</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>

Mã CSS

/* Resets */

* {
margin: 0;
padding: 0;
}

body {
font-family:
‘Arial’, sans-serif;
font-weight: 400;
background: #ddd;
}

a { text-decoration: none; }

/* Resets */

.alert {
color: #666;
text-align: center;
}
@media handheld, screen and (min-width: 641px) {

.no_scroll { overflow-y: hidden; }

.menu-cas-toggler { display: none; }
.form-search1{
padding: 10px;
background: #fff;
}
.form-search1 input{
padding:4px
}
#menu-cas {
max-width:100%;
height: 50px;
margin: 0 auto;
}

#navigator-menu-cas {
height: 50px;
line-height: 50px;
box-shadow: 0 7px
6px -7px #373435;
-webkit-box-shadow:
0 7px 6px -7px #373435;
-moz-box-shadow: 0
7px 6px -7px #373435;
border-color:
#ff1493;
background-color:
#ff1493;
}

#navigator-menu-cas .title { display: none; }

#navigator-menu-cas ul { list-style: none; }

#navigator-menu-cas > ul > li {
padding:0 13px;
float: left;
}

#navigator-menu-cas > ul > li > a {
color: #fefefe;
font-size: 15px;
font-family:
‘Arial’, sans-serif;
text-transform:
uppercase;
letter-spacing:
0.5px;
text-align: center;
display: block;
}

#navigator-menu-cas > ul > li:hover > a {
color:yellow }

#navigator-menu-cas ul li > ul,
#navigator-menu-cas
ul li li > ul,
#navigator-menu-cas
ul li li li > ul,
#navigator-menu-cas
ul li li li li> ul,
#navigator-menu-cas
ul li li li li li > ul { display: none; }

#navigator-menu-cas ul li:hover > ul,
#navigator-menu-cas
ul li li:hover > ul,
#navigator-menu-cas
ul li li li:hover > ul,
#navigator-menu-cas
ul li li li li:hover > ul,
#navigator-menu-cas
ul li li li li li:hover > ul {
position: absolute;
z-index: 10;
width: 201px;
line-height: 20px;
display: block;
right: 152px;
background: #555;
box-shadow: 0 7px
6px -7px #373435;

-webkit-box-shadow: 0 7px 6px -7px #373435;
-moz-box-shadow: 0
7px 6px -7px #373435;
}

#menu-cas ul ul li ul {
top: 0;
left: 179px;
min-height: 100%;
border-left: 1px
solid #444;
}

#menu-cas ul ul li { /*position: relative;*/ }

#menu-cas ul ul li a {
color: #fefefe;
font-size: 14px;
font-family:
‘Arial’, sans-serif;
text-transform:
uppercase;
display: block;
padding: 12px 7px;
border-top: 1px
solid rgba(255,255,255,0.045);
border-bottom: 1px
solid rgba(0,0,0,0.045);
text-transform:
uppercase;
}

#menu-cas ul ul li:hover > a { background: #444; }

#menu-cas ul ul li li:hover > a { }

#menu-cas ul ul li li li:hover > a { }

#menu-cas ul ul li li li li:hover > a { }

#menu-cas ul ul li li li li li:hover > a { }
}
@media handheld,
screen and (max-width: 640px) {

.menu-cas-toggler { display: block; }

.menu-cas-toggler span {
color: #fefefe;
font-size: 20px;
font-family:
‘Arial’, sans-serif;
text-align: center;
letter-spacing: 5px;
position: absolute;
z-index: 99;
top: 0;
left: 0;
width: 100%;
height: 50px;
line-height: 50px;
margin: 0 auto;
display: block;
cursor: pointer;
background: #333
url() no-repeat 10px center;
box-shadow: 0 7px
3px -7px #373435;
-webkit-box-shadow:
0 7px 3px -7px #373435;
-moz-box-shadow: 0
7px 3px -7px #373435;
}

.open > .menu-cas-toggler {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
background:
rgba(225,225,225,0.85);
}

.open > .menu-cas-toggler span { opacity: 0.1 !important;
}

.responsive-menu-cas {
position: fixed;
z-index: 99;
top: 0;
left: -300px;
width: 300px;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
background: #555;
transition: 0.3s;
box-shadow: -4px 0
15px 0px #373435;
-webkit-box-shadow:
-4px 0 15px 0px #373435;
-moz-box-shadow:
-4px 0 15px 0px #373435;
box-sizing:
border-box;
-webkit-box-sizing:
border-box;
-moz-box-sizing:
border-box;
-ms-box-sizing:
border-box;
}

.open > .responsive-menu-cas { left: 0; }

#navigator-menu-cas .title {
color: #666;
font-size: 20px;
font-family:
‘Arial’, sans-serif;
text-transform:
uppercase;
text-shadow: 0.8px
0.8px 3px #111;
height: 60px;
line-height: 62px;
display: block;
padding: 0 20px;
border-bottom: 1px
solid rgba(0,0,0,0.045);
background: #333
url() no-repeat 20px center;
box-shadow: -4px 0
5px 0px #373435;
-webkit-box-shadow:
-4px 0 5px 0px #373435;
-moz-box-shadow:
-4px 0 5px 0px #373435;
}

#navigator-menu-cas ul li > ul,
#navigator-menu-cas
ul li li > ul,
#navigator-menu-cas
ul li li li > ul,
#navigator-menu-cas
ul li li li li > ul,
#navigator-menu-cas
ul li li li li li > ul {
position: relative;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
padding: 0;
border: none;
background:
rgba(0,0,0,0.1);
box-sizing:
border-box;
-webkit-box-sizing:
border-box;
-moz-box-sizing:
border-box;
-ms-box-sizing:
border-box;
}

#navigator-menu-cas ul li {
float: none;
display: block;
}

#navigator-menu-cas ul li a {
color: #999;
font-size: 14px;
display: block;
padding: 20px;
border-top: 1px
solid rgba(255,255,255,0.045) !important;
border-bottom: 1px
solid rgba(0,0,0,0.045) !important;
}

#navigator-menu-cas > ul > li:hover > a {
color: #aaa;
background: #444;
}

#navigator-menu-cas > ul > li > .parent,
#navigator-menu-cas
> ul > li:hover > .parent,
#navigator-menu-cas
> ul > li.hover > .parent,
#navigator-menu-cas
ul li li > .parent,
#navigator-menu-cas
ul li li:hover > .parent,
#navigator-menu-cas
ul li li.hover > .parent {
background-repeat:
no-repeat;
background-position:
260px center;
}

#navigator-menu-cas > ul > li > .parent,
#navigator-menu-cas
> ul > li:hover > .parent {
color: #aaa;
background-color:
inherit;
background-image:
url();
}

#navigator-menu-cas > ul > li.hover > .parent {
color: #aaa;
background-color:
#444;
background-image:
url();
}

#navigator-menu-cas ul li li a {
color: #aaa;
font-size: 12px;
}

#navigator-menu-cas ul li li > .parent,
#navigator-menu-cas
ul li li:hover > .parent {
color: #aaa;
background-color: inherit;
background-image:
url();
}

#navigator-menu-cas ul li li.hover > .parent {
color: #aaa;
background-color:
rgba(0,0,0,0.1);
background-image:
url();
}

.nav ul {
display: none;
left: -9999px;
}

.nav li.hover > ul,
.nav li li.hover >
ul,
.nav li li li.hover
> ul,
.nav li li li
li.hover > ul,
.nav li li li li
li.hover > ul,
.nav li li li li li
li.hover > ul {
position: static
!important;
display: block
!important;
}
}
@media handheld,
screen and (max-width: 480px) {

.open > .responsive-menu-cas { width: 250px; }

#menu-cas > ul > li > .parent,
#menu-cas > ul
> li:hover > .parent,
#menu-cas > ul
> li.hover > .parent,
#menu-cas ul li li
> .parent,
#menu-cas ul li
li:hover > .parent,
#menu-cas ul li
li.hover > .parent {
background-repeat:
no-repeat;
background-position:
210px center;
}
}
@media handheld,
screen and (max-width: 319px) {

.open > .responsive-menu-cas { width: 200px; }

#menu-cas > ul > li > .parent,
#menu-cas > ul
> li:hover > .parent,
#menu-cas > ul
> li.hover > .parent,
#menu-cas ul li li
> .parent,
#menu-cas ul li
li:hover > .parent,
#menu-cas ul li
li.hover > .parent {
background-repeat:
no-repeat;
background-position:
150px center;
}
}

Mã JQUERY

<script
src=”http://code.jquery.com/jquery-1.11.1.min.js”></script>
<script>
jQuery.noConflict();
jQuery(document).ready(function($){

$(‘.menu-cas-toggler’).click(function(){

$(“body”).toggleClass(‘no_scroll’);
});
});

jQuery.noConflict();
jQuery(document).ready(function($){
$(function() {

initDropDowns($(“#menu-cas”));
});

function
initDropDowns(allMenus) {

allMenus.children(“.menu-cas-toggler”).on(“click”,
function() {
var thisTrigger
= jQuery(this),
thisMenu =
thisTrigger.parent(),
thisPanel =
thisTrigger.next();

if(thisMenu.hasClass(“open”)){

thisMenu.removeClass(“open”);

jQuery(document).off(“click”);

thisPanel.off(“click”);
}
else{

allMenus.removeClass(“open”);

thisMenu.addClass(“open”);

jQuery(document).on(“click”, function() {

allMenus.removeClass(“open”);
});

thisPanel.on(“click”, function(e) {

e.stopPropagation();
});
}
return false;
});
}
});

jQuery.noConflict();
jQuery(document).ready(function($){

$(document).ready(function() {
$(“.nav li
a”).each(function() {
if
($(this).next().length > 0) {

$(this).addClass(“parent”);
};
})
})
$(function(){
$(“.nav
li”).unbind(‘mouseenter mouseleave’);
$(“.nav li
a.parent”).unbind(‘click’).bind(‘click’, function(e) {
// must be
attached to anchor element to prevent bubbling

e.preventDefault();

$(this).parent(“li”).toggleClass(“hover”);
});
});
});
</script>

Trên đây là những hướng dẫn tạo menu đa câp responsive đơn
giản nhất, các bạn hãy tùy biến theo cách riêng của mình nhé. Hãy theo dõi web
thường xuyên để cập nhật những bài học bổ ích. Không chỉ front-end mà cả
backend nhé. Sắp tới mình sẽ viết bài hướng dẫn lập trinh theme bán hàng, tin tức
bằng wordpress(không phải tùy biến theme co sẵn mà code từ a đến z). Các bạn
hãy ủng hộ mình nhé

 

Chúc các bạn học tốt, kiếm thật nhiều tiền
Rate this post
READ  Cách thiết kế web giao diện Responsive chi tiết

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *