Dropdown menu là thuật ngữ vô cùng quen thuộc trong lập trình website, và khi bạn sử dụng bootstrap thì nó sẽ hỗ trợ một cách tốt nhất để bạn có thể tạo ra được những menu xổ xuống. Hãy cùng Blog Getbootstrap đi tìm hiểu kỹ hơn về Dropdown Menu trong Bootstrap nhé.
Nội dung chính
Tổng qua về Dropdown Menu
Đầu tiên thì bạn cần phải bao tất cả mọi thứ bên trong 1 thẻ div và được gán với class dropdown , class này giúp cho toàn bộ nội dung ở bên trong phần style đều được bootstrap hỗ trợ.
Code html ví dụ:
<div class=”dropdown”>
<a data-toggle=”dropdown” href=””>Dropdown<span class=”caret”></span></a>
<ul class=”dropdown-menu” role=”menu” aria-labelledby=”dropdownMenu1″>
<li role=”presentation”><a role=”menuitem” tabindex=”-1″ href=”#”>Action</a></li>
<li role=”presentation”><a role=”menuitem” tabindex=”-1″ href=”#”>Another action</a></li>
<li role=”presentation”><a role=”menuitem” tabindex=”-1″ href=”#”>Something else here</a></li>
<li role=”presentation” class=”divider”></li>
<li role=”presentation”><a role=”menuitem” tabindex=”-1″ href=”#”>Separated link</a></li>
</ul>
</div>
Trong đó:
Thẻ a : dùng để định nghĩa text Dropdown , với trường hợp khi text sẽ được gắn 1 link nào đó, ngoài ra thì bạn cũng có thể thay thế thẻ a bằng button (với trường hợp bạn không sử dụng link).
Ngoài ra thì thẻ a cũng có 2 thành phần bạn cần lưu ý đó là:
data-toggle: đây là thuộc tính riêng của bootstrap, hỗ trợ về hiệu ứng khi click vào dropdown menu.
class caret nằm trong thẻ span: đây là class sẽ tạo ra 1 icon mũi tên quay xuống khi hiển thị lên website.
Thẻ ul: là loại thẻ được định nghĩa bằng class dropdown-menu, ẩn trạng thái bình thường và nó sẽ được hiển thị khi click hay hover vào thẻ a bên trên.
Thông tin thêm
Disable phần tử Menu
Nếu như bạn muốn disable một phần nào đó ở trong menu thì bạn chỉ cần thâm class disabled cho 1 thẻ li, khi đó đồng nghĩa bạn cũng sẽ không thể thao tác được với phần tử menu đó nữa.
Và để có thể ghép dropdown menu vào trong navigation của bootstrap thì bạn chỉ cần làm theo code hướng dẫn dưới đây:
code html ví dụ:
<nav class=”navbar navbar-default”>
<div class=”container-fluid”>
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data-target=”#navbar” aria-expanded=”false” aria-controls=”navbar”>
<span class=”sr-only”>Toggle navigation</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<a class=”navbar-brand” href=”#”>Project name</a>
</div>
<div id=”navbar” class=”navbar-collapse collapse” aria-expanded=”false” style=”height: 1px;”>
<ul class=”nav navbar-nav”>
<li class=”active”><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>
<li class=”dropdown”>
<a href=”#” class=”dropdown-toggle” data-toggle=”dropdown” role=”button” aria-haspopup=”true” aria-expanded=”false”>Dropdown <span class=”caret”></span></a>
<ul class=”dropdown-menu”>
<li><a href=”#”>Action</a></li>
<li><a href=”#”>Another action</a></li>
<li><a href=”#”>Something else here</a></li>
<li role=”separator” class=”divider”></li>
<li class=”dropdown-header”>Nav header</li>
<li><a href=”#”>Separated link</a></li>
<li><a href=”#”>One more separated link</a></li>
</ul>
</li>
</ul>
</div><!–/.nav-collapse –>
</div><!–/.container-fluid –>
</nav>
Kết quả hình ảnh:
Ỏ ví dụ trên thì Blog Getbootstrap đã sử dụng class dropdown-menu cho thẻ li thay vì thẻ div như bình thường, lý do đơn giản vì dropdown menu này sẽ được gán cho 1 phần từ menu trong 1 hệ thống menu.
Hi vọng với những chia sẻ trên về dropdown menu hay class data-toggle trong bootstrap sẽ giúp bạn có thêm kiến thức bổ ích về bootstrap nhé. Chúc các bạn thành công.
