Trang chủ Thiết kế web Hướng dẫn tạo menu responsive đa cấp html và css 3, jquery chi tiết
Monday, January 28, 2019

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

Đăng lúc
Từ khóa

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ỹ :D (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

Điểm 4.6/5 dựa vào 87 đánh giá
  • Lazada : Mở chương trình "giá khuynh đảo", giới hạn mỗi người mua tối đa 2 sản phẩm Click xem
  • Adayroi : iPhone 7 lần đầu về giá dưới 15 triệu đồng Click xem
  • Tiki : Giảm 10% cho thẻ tín dụng HSBC Click xem

Bài liên quan

Admin

Bài mới hơn
Bài cũ hơn