Chắc hẳn khi làm blog/website, bạn đã nghe nhiều về cụm từ "dropdown menu", "dropdown list" hay bất kể cái gì liên quan đến chữ "dropdown" rồi đúng không? Vậy thì dropdown là gì và nó quan trọng như nào trong thiết kế website, cách tạo nó ra sao thì hôm nay mình sẽ hướng dẫn các bạn tại bài viết này nhé.
Structure to create simple dropdown menu with jquery
Khái niệm dropdown
Dropdown có nghĩa là "xổ xuống". Ta thường bắt gặp các menu xổ xuống, thông báo xổ xuống,... nó chính là dropdown đó. Dropdown menu hay dropdown list... sẽ giúp ta làm blog/website trở nên chuyên nghiệp và khoa học hơn bằng cách tạo ra các nội dung con được ẩn đi và khi click hay rê chuột vào thành phần cha nó mới hiện ra. Điều này sẽ giúp ta hạn chế được không gian của web nữa.
Như vậy, lợi ích mà dropdown mang lại khá ổn rồi. Giờ thì ta bắt đầu vào việc làm thế nào để tạo dropdown cho nội dung thì các bạn theo dõi các bước phía dưới nhé (sẽ kèm chú thích một vài chỗ cho các bạn dễ hiểu để sau còn biết cách áp dụng)
Như vậy, lợi ích mà dropdown mang lại khá ổn rồi. Giờ thì ta bắt đầu vào việc làm thế nào để tạo dropdown cho nội dung thì các bạn theo dõi các bước phía dưới nhé (sẽ kèm chú thích một vài chỗ cho các bạn dễ hiểu để sau còn biết cách áp dụng)
Các bước thực hiện
Bước 1: Truy cập blogger.com - Chủ đề - Chỉnh sửa HTML.
Bước 2: Lần lượt nghiên cứu từng thành phần của 1 dropdown.
1. CSS
Chèn trước
]]></b:skin>hoặc
</head>, nếu chèn trước
</head>bạn phải đặt toàn bộ code trong cặp thẻ đóng mở
<style>...</style>và kèm thẻ điều kiện nếu muốn.
.dropdown-menu { /* Khởi tạo phần tử cha bao bọc dropdown */
position:relative; /* Bất kì phần tử nào dùng position: absolute thì cha của nó phải để position: relative để giới hạn p.vi*/
max-width:500px; /* Chiều rộng tối đa là 500px */
}
.dropdown-button { /* Phần tử để click cho xổ ra nội dung */
position: relative;
display: inline-block;
}
.dropdown-submenu { /* Đây chính là phần dropdown sẽ hiện ra khi tác động vào button phía trên */
position: absolute;
display: none; /* Ẩn đi để sau click, double click hay hover mới hiện */
background: #fff; /* Màu nền cho dropdown */
margin: 0;
padding: 0;
box-shadow: 1px 1px 1px rgba(0,0,0,.1); /* Hiệu ứng bóng */
border-radius: 0 0 3px 3px; /* Bo tròn viền */
right: 0; /* Set vị trí cho dropdown cách lề phải là 0px */
min-width: 200px; /* Chiều rộng tối thiểu */
top: 30px; /* Set vị trí cho dropdown cách lề trên là 30px */
z-index: 999;
}
.dropdown-submenu:before { /* Css để tạo hình tam giác gắn trên cùng của dropdown ấy */
content:'';
display:inline-block;
width:0;
height:0;
border:7px solid rgba(255,255,255,0);
position:absolute;
top:-15px;
right:10px;
z-index:999;
border-bottom:8px solid #fff;
}
.dropdown-submenu li { /* Thiết lập thông số cho nội dung trong các li */
color:#424242;
font-weight:400;
font-size:13px;
font-family:'Arial',sans-serif;
padding:10px;
list-style:none;
text-align:left;
width:200px;
position:relative;
}2. HTML
Chèn vào bất kì nơi nào bạn thích và muốn dùng dropdown (bắt buộc trong phạm vi cặp thẻ
<body>...</body>)
<div class="dropdown-menu">
<a href="javascript:;" class="dropdown-button">Click here</a>
<ul class="dropdown-submenu">
<li>Phần nội dung cần cho vào dropdown</li>
</ul>
</div>3. Jquery
- Đầu tiên, để jquery có thể hoạt động được, bạn phải thêm thư viện của nó trước
</head>hoặc
</body>(nếu blog ai có rồi thì bỏ qua phần này)
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
- Tiếp đến, chèn đoạn jquery tạo chức năng xổ xuống (dropdown) cho phần tử mong muốn trước
</head>hoặc
</body>(bắt buộc phải đặt sau thư viện bên trên)
<script type="text/javascript">
var pcbcontainer = $(".dropdown-submenu"), // Khởi tạo các biến toàn cục sử dụng cho các hàm, cấu trúc...
pcbbutton = $(".dropdown-button");
$(function(){ // Khởi tạo jquery
pcbbutton.click(function(){ // Tạo event click cho pcbbutton chính là thẻ liên kết có class là dropdown-button ý
if (pcbcontainer.is(":hidden")) { // Nếu dropdown đang ẩn
pcbcontainer.slideDown(200); // Thì sẽ làm hiện dropdown ra khi click
} else {
pcbcontainer.fadeOut(200); // Còn lại thì khi click sẽ ẩn dropdown đi
}
});
});
$(document).mouseup(function(e){ // Để dễ hiểu nhất thì tức là nếu click ra bên ngoài không phải button thì sẽ ẩn dropdown, nó rất tiện khi ta không phải click lại button lần nữa để ẩn dropdown
if (!pcbcontainer.is(e.target) && pcbcontainer.has(e.target).length === 0)
{
pcbcontainer.fadeOut(200);
}
}); // Các giá trị 200 chính là thời gian để hoàn thành hiệu ứng
</script>
Ví dụ: Ở đây, mình muốn tạo 1 icon hình quả địa cầu có thông báo như Facebook và khi click vào thì nó sẽ xổ xuống nội dung là "Blog cập nhật domain mới từ .com sang .info" thì sẽ sửa và thêm chút code như sau:
1. CSS
- Do dùng quả địa cầu nên mình phải thêm thư viện FontAwesome vào đã, mình vẫn dùng bản 4.7 cho các bạn quen thuộc nhé. Chèn trước
</head>thư viện sau:
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>
- Tiếp đến mới là CSS cho phần dropdown:
.dropdown-menu {
position:relative;
max-width:500px;
}
.dropdown-button {
position:relative;
display:inline-block;
padding:0 8px;
color:#fff;
font-size:19px;
}
.dropdown-button span { /* Thêm CSS cho số 2 hiển thị trên quả địa cầu */
position:absolute;
top:-6px;
right:6px;
padding:0 2px;
background:#0869c0;
border-radius:3px;
color:#fff;
font-size:12px;
font-family:'Arial',sans-serif;
}
.dropdown-submenu {
position:absolute;
display:none;
background:#fff;
margin:0;
padding:0;
box-shadow:1px 1px 1px rgba(0,0,0,.1);
border-radius:0 0 3px 3px;
border-top:0;
right:0;
min-width:200px;
top:30px;
z-index:999;
}
.dropdown-submenu:before {
content:'';
display:inline-block;
width:0;
height:0;
border:7px solid rgba(255,255,255,0);
position:absolute;
top:-15px;
right:10px;
z-index:999;
border-bottom:8px solid #fff;
}
.dropdown-submenu li {
color:#424242;
font-weight:400;
font-size:13px;
font-family:'Arial',sans-serif;
padding:10px;
list-style:none;
text-align:left;
width:200px;
position:relative;
}2. HTML
<div class="dropdown-menu">
<a href="javascript:;" class="dropdown-button">
<i class="fa fa-globe"></i>
<span>2</span>
</a>
<ul class="dropdown-submenu">
<li>Blog cập nhật domain mới từ .com sang .info</li>
</ul>
</div>3. Jquery
<script type="text/javascript">
var pcbcontainer = $(".dropdown-submenu"),
pcbnumber = $(".dropdown-button span"),
pcbbutton = $(".dropdown-button"); // Khởi tạo thêm 1 biến toàn cục là số 2 trên quả địa cầu
$(function(){
pcbbutton.click(function(){
if (pcbcontainer.is(":hidden")) {
pcbcontainer.slideDown(200);
pcbnumber.hide(200); // Sau khi click lần đầu vào quả địa cầu sẽ ẩn luôn số đếm thông báo như Facebook
} else {
pcbcontainer.fadeOut(200);
}
});
});
$(document).mouseup(function(e){
if (!pcbcontainer.is(e.target) && pcbcontainer.has(e.target).length === 0)
{
pcbcontainer.fadeOut(200);
}
});
</script>
Bước 3: Khi tạo được 1 dropdown nội dung mong muốn thì lưu template lại.
Lời kết
Đối với dropdown (xổ xuống) thì việc tạo ra có nhiều cách bằng việc tùy biến CSS và chủ yếu thì từ Jquery hoặc Javascript, cũng có người dùng các Frameworks để làm. Ở bài viết này, mình chỉ hướng dẫn các bạn một trong các cách thôi nhưng bản chất của nó cũng sẽ như nhau. Tùy vào sự sáng tạo và kiến thức coding của mỗi bạn mà có thể làm độc đáo hơn. Chúc các bạn thành công và đừng quên chia sẻ bài viết nếu cảm thấy nó có ích nhé.
