Bài 13: Tạo Menu đa cấp với Dropdown Bootstrap

Bài 13: Tạo Menu đa cấp với Dropdown Bootstrap

Bạn có thể tạo ra một menu bằng cách sử dụng Dropdown trong Bootstrap một cách đơn giản vì tất cả thư viện đều đã được hỗ trợ, chỉ cần gọi ra để sử dụng.

Bài trước chúng ta đã tìm hiểu về Collapse trong Bootstrap hôm nay hãy cùng sonnguyenaz.com thử tạo một số mẫu menu cho trang web nhé.

Cách tạo menu với Dropdown Bootstrap

Menu trên một website thông thường hiển thị cho người dùng biết được trên trang đó có những chuyên mục gì.

Tạo một Dropdown Bootstrap đơn giản

Đối với Dropdown Bootstrap thì chúng ta tạo ra một menu cực kỳ nhanh và đẹp.

Ví dụ chúng ta có một mục về “Học lập trình” và trong đó bao gồm các chuyên mục về các ngôn ngữ lập trình như “Lập trình PHP”, “Bootstrap”:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Học lập trình
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Lập trình PHP</a></li>
    <li><a class="dropdown-item" href="#">Bootstrap</a></li>
  </ul>
</div>
    <!-- End Example Code -->
  </body>
</html>

Kết quả hiển thị khi ta bấm vào “Học lập trình” thì các chuyên mục được show ra:

Giải thích:

  • Đầu tiên ta tạo 1 div với class=”dropdown”
  • Tạo một nút bấm với các thuộc tính: class=”btn btn-secondary dropdown-toggle”
  • Tất nhiên là không thể thiếu: data-bs-toggle=”dropdown”
  • Tiếp theo là thành phần ẩn của nội dung dropdown-menu là các dropdown-item

Bạn cũng có thể thay thể 1 button bằng thẻ <a> trong một số trường hợp cần gán link ngay ở nút bấm.

Tạo nút bấm tách biệt với nội dung

Khi tạo nút bấm để xổ xuống tách biệt với nội dung thì khi ta bấm vào nút thì mới hiển thị còn bấm vào phần nội dung thì không xảy ra gì.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<div class="btn-group">
		<button type="button" class="btn btn-danger">Học lập trình</button>
		<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
		<span class="visually-hidden">Toggle Dropdown</span>
		</button>
	<ul class="dropdown-menu">
		<li><a class="dropdown-item" href="#">Lập trình PHP</a></li>
		<li><a class="dropdown-item" href="#">Bootstrap</a></li>
	</ul>
	</div>
    <!-- End Example Code -->
  </body>
</html>

Kết quả:

Ngoài ra, chúng ta cũng có thể điều chỉnh kích cỡ bằng thuộc tính:

  • btn-lg: cỡ lớn
  • btn-sm: cỡ nhỏ
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<div class="btn-group">
		<button type="button" class="btn btn-danger btn-lg" >Học lập trình</button>
		<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
		<span class="visually-hidden">Toggle Dropdown</span>
		</button>
	<ul class="dropdown-menu">
		<li><a class="dropdown-item" href="#">Lập trình PHP</a></li>
		<li><a class="dropdown-item" href="#">Bootstrap</a></li>
	</ul>
	</div>
	
	<div class="btn-group">
		<button type="button" class="btn btn-danger btn-sm" >Học lập trình</button>
		<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
		<span class="visually-hidden">Toggle Dropdown</span>
		</button>
	<ul class="dropdown-menu">
		<li><a class="dropdown-item" href="#">Lập trình PHP</a></li>
		<li><a class="dropdown-item" href="#">Bootstrap</a></li>
	</ul>
	</div>
    <!-- End Example Code -->
  </body>
</html>

Kết quả:

Tùy chỉnh hướng thả xuống cho Dropdown Bootstrap

Bạn cũng có thể điều chỉnh hướng thả xuống cho Menu bằng cách sử dụng các thuộc tính:

  • class=”dropdown-center”: căn giữa nội dung thả xuống.
  • class=”dropup“: Nội dung thả xuống hướng lên trên.
  • class=”dropend”: Nội dung thả xuống hướng sang bên phải.
  • class=”dropstart”: Nội dung thả xuống hướng sang trái.

Chúng ta sẽ cùng thử nghiệm trong 1 ví dụ sau nhé:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	
	<div class="btn-group dropup">
		<button type="button" class="btn btn-danger btn-lg" >Hướng lên</button>
		<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
		<span class="visually-hidden">Toggle Dropdown</span>
		</button>
	<ul class="dropdown-menu">
		<li><a class="dropdown-item" href="#">Lập trình PHP</a></li>
		<li><a class="dropdown-item" href="#">Bootstrap</a></li>
	</ul>
	</div>
	
	<div class="btn-group dropstart">
		<button type="button" class="btn btn-danger btn-lg" >Sang trái</button>
		<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
		<span class="visually-hidden">Toggle Dropdown</span>
		</button>
	<ul class="dropdown-menu">
		<li><a class="dropdown-item" href="#">Lập trình PHP</a></li>
		<li><a class="dropdown-item" href="#">Bootstrap</a></li>
	</ul>
	</div>
	
	<div class="btn-group dropend">
		<button type="button" class="btn btn-danger btn-lg" >Sang phải</button>
		<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
		<span class="visually-hidden">Toggle Dropdown</span>
		</button>
	<ul class="dropdown-menu">
		<li><a class="dropdown-item" href="#">Lập trình PHP</a></li>
		<li><a class="dropdown-item" href="#">Bootstrap</a></li>
	</ul>
	</div>
    <!-- End Example Code -->
  </body>
</html>

Kết quả:

Nhưng bạn cần lưu ý khi kích thước không đủ thì mặc định nó sẽ hướng về vị trí có không gian đủ để hiển thị.

Như ví dụ trên thì khi bạn bấm hướng lên thì nó vẫn hướng xuống dưới vì nó đã quá sát với phía trên cùng không còn chỗ để hiện thị.

Danh sách thả xuống có thể bao gồm biểu mẫu

Trên menu của trang web thường có phần đăng ký hoặc đăng nhập, thì bạn cũng có thể thêm ngay biểu mẫu vào luôn cũng được nhé:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
   Đăng nhập
  </button>
  <form class="dropdown-menu p-4">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword2" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck2">
        <label class="form-check-label" for="dropdownCheck2">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
</div>
    <!-- End Example Code -->
  </body>
</html>

Kết quả là:

Tạo menu đa cấp sử dụng Dropdown Bootstrap

Đầu tiên ta ta một menu bao gồm các chuyên mục được phân tầng rõ ràng:

<!-- Example Code -->
	<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
	<div class="container-fluid">
	<a class="navbar-brand" href="#">
	<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16">
  <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z"/>
</svg>
	</a>
	<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav"  aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="main_nav">
	  <ul class="navbar-nav">
		<li class="nav-item active"> <a class="nav-link" href="#">Trang chủ</a> </li>
		<li class="nav-item"><a class="nav-link" href="#"> Phần mềm </a></li>
		<li class="nav-item dropdown" id="myDropdown">
		  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">  Học lập trình  </a>
		  <ul class="dropdown-menu">
			<li> <a class="dropdown-item" href="#"> Lập trình C </a></li>
			<li> <a class="dropdown-item" href="#"> Lập trình PHP &raquo; </a>
			  <ul class="submenu dropdown-menu">
				<li><a class="dropdown-item" href="#">PHP cơ bản</a></li>
				<li><a class="dropdown-item" href="#">PHP nâng cao</a></li>
				<li><a class="dropdown-item" href="#">Thực hành PHP &raquo; </a>
				  <ul class="submenu dropdown-menu">
					<li><a class="dropdown-item" href="#">Kết nối MySQL</a></li>
					<li><a class="dropdown-item" href="#">Làm việc với Form</a></li>
				  </ul>
				</li>
				<li><a class="dropdown-item" href="#">Viết Plugin WordPress</a></li>
			  </ul>
			</li>
			<li><a class="dropdown-item" href="#">Học Bootstrap</a></li>
		  </ul>
		</li>
	  </ul>
	</div>
	</div>
	</nav>
    <!-- End Example Code -->

Lúc này bạn mở lên thì chắc chắn sẽ chưa có gì, tiếp tục ta hãy thêm các đoạn CSS cho nó:

<style>
	@media all and (min-width: 992px) {
	.dropdown-menu li{ position: relative; 	}
	.nav-item .submenu{ 
		display: none;
		position: absolute;
		left:100%; top:-7px;
	}
	.nav-item .submenu-left{ 
		right:100%; left:auto;
	}
	.dropdown-menu > li:hover{ background-color: #f1f1f1 }
	.dropdown-menu > li:hover > .submenu{ display: block; }
	}	
	@media (max-width: 991px) {
	.dropdown-menu .dropdown-menu{
	  margin-left:0.7rem; margin-right:0.7rem; margin-bottom: .5rem;
	}
	}	
	</style>

Và cả javascript nữa:

<script>
	document.addEventListener("DOMContentLoaded", function(){
	// make it as accordion for smaller screens
	if (window.innerWidth < 992) {

	  // close all inner dropdowns when parent is closed
	  document.querySelectorAll('.navbar .dropdown').forEach(function(everydropdown){
		everydropdown.addEventListener('hidden.bs.dropdown', function () {
		  // after dropdown is hidden, then find all submenus
			this.querySelectorAll('.submenu').forEach(function(everysubmenu){
			  // hide every submenu as well
			  everysubmenu.style.display = 'none';
			});
		})
	  });

	  document.querySelectorAll('.dropdown-menu a').forEach(function(element){
		element.addEventListener('click', function (e) {
			let nextEl = this.nextElementSibling;
			if(nextEl && nextEl.classList.contains('submenu')) {	
			  // prevent opening link if link needs to open dropdown
			  e.preventDefault();
			  if(nextEl.style.display == 'block'){
				nextEl.style.display = 'none';
			  } else {
				nextEl.style.display = 'block';
			  }

			}
		});
	  })
	}
	// end if innerWidth
	}); 
	</script>

Lúc này kết quả thu được là:

Lời kết

Để tạo một menu đơn giản hoặc là nhiều cấp độ thì ta hoàn toàn có thể sử dụng Dropdown trong Bootstrap, vừa nhanh, vừa đẹp.

Bài viết cùng chủ đề:

Cảm ơn các bạn đã theo dõi bài viết.

Rate this post

sonnguyen

Là một nhân viên IT thích chia sẻ những gì mình biết đến tất cả mọi người. Hi vọng được mọi người ủng hộ, nếu có gì sai sót mong các bạn comment xuống dưới để mình khắc phục. Cảm ơn mọi người!

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 *