Tạo Dropdown Menu bằng CSS3 và Javascript #1

Chào các bạn, đây là bài viết đầu tiên của mình trong chuỗi các bài viết hướng dẫn các bạn tạo một số thứ linh tinh để làm đẹp thêm cho blog của mình. OK, và trong bài viết đầu tiên này, mình sẽ hướng dẫn các bạn tạo một Dropdown Menu bằng CSS3 và Javascript. Các bạn cùng làm với mình nhé!

Bước 1: Xây dựng khung HTML cho menu của bạn.

<div class="container">
 <h1 class="title">Dropdown Menu</h1>
 <ul>
 <li class="dropdown"><a href="http://doiguocmoc.com/wordpress">WordPress</a>
 <ul class="dropdown-menu">
 <li><a href="http://doiguocmoc.com/wordpress/huong-dan-wordpress">Hướng dẫn WordPress</a>
 </li> 
 <li><a href="http://doiguocmoc.com/wordpress/wordpress-theme">WordPress Theme</a>
 </li>
 <li><a href="http://doiguocmoc.com/huong-dan/wordpress-cho-nguoi-moi-bat-dau">WordPress cho người mới bắt đầu</a>
 </li>
 </ul>
 </li>
 <li class="dropdown"><a href="http://doiguocmoc.com/blogspot">Blogspot</a>
 <ul class="dropdown-menu">
 <li><a href="http://doiguocmoc.com/blogspot/thu-thuat-blogspot">Thủ thuật Blogspot</a>
 </li>
 <li><a href="http://doiguocmoc.com/blogspot/blogspot-template">Blogspot Template</a>
 </li>
 </ul>
 </li>
 <li class="dropdown"><a href="http://doiguocmoc.com/hoc-seo">Học SEO</a>
 </li>
 <li class="dropdown"><a href="http://doiguocmoc.com/tam-su-tan-man">Tâm sự – Tản mạn</a>
 </li>
 <li class="dropdown"><a href="http://doiguocmoc.com/huong-dan-chung">Hướng dẫn chung</a>
 </li>
 </ul>
</div>

Bước 2: Bước tiếp theo, chúng ta sẽ làm đẹp cho Dropdown Menu bằng CSS3 nha. Bạn có thể tham khảo đoạn CSS sau đây của mình:

.container {
 width: 350px;
 margin: 50px auto;
 & > ul {
 list-style: none;
 padding: 0;
 margin: 0 0 20px 0;
 }
}
$blue: #2980B9;
$gray: #EEE;
@mixin ul-nostyle {
 list-style: none;
 padding: 0;
 margin: 0;
}
@mixin double-shadow($color) {
 @include box-shadow(0 1px 0 lighten($color, 10%) inset, 0 -1px 0 darken($color, 10%) inset);
}
@mixin hover-style($color) {
 &:hover {
 background: lighten($color, 3%);
 }
}
@mixin animation($content) {
 animation: $content;
 -moz-animation: $content;
 -webkit-animation: $content;
}
@mixin keyframes($name) {
 @keyframes #{$name} { @content; }
 @-moz-keyframes #{$name} { @content; }
 @-webkit-keyframes #{$name} { @content; }
}
.title {
 font-family: 'Pacifico';
 font-weight: norma;
 font-size: 40px;
 text-align: center;
 line-height: 1.4;
 color: $blue;
}
.dropdown {
 a {
 text-decoration: none;
 }
[data-toggle="dropdown"] {
 position: relative;
 display: block;
 color: white;
 background: $blue;
 @include double-shadow($blue);
 @include hover-style($blue);
 @include text-shadow(0 -1px 0 rgba(0,0,0,0.3));
 padding: 10px;
}
 .icon-arrow {
 position: absolute;
 display: block;
 font-size: 0.7em;
 color: #fff;
 top: 14px;
 right: 10px;
&.open {
 @include transform(rotate(-180deg));
 @include transition(transform .6s);
 }
 &.close {
 @include transform(rotate(0deg));
 @include transition(transform .6s);
 }
&:before {
 content: '\25BC';
 }
 }
.dropdown-menu {
 max-height: 0;
 overflow: hidden;
 @include ul-nostyle;
li {
 padding: 0;
a {
 display: block;
 color: darken($gray, 50%);
 background: $gray;
 @include double-shadow($gray);
 @include hover-style($gray);
 @include text-shadow(0 -1px 0 rgba(255,255,255,0.3));
 padding: 10px 10px;
 }
 }
 }
.show, .hide {
 @include transform-origin(50%, 0%);
 }
.show {
 display: block;
 max-height: 9999px;
 @include transform(scaleY(1));
 @include animation(showAnimation .5s ease-in-out);
 @include transition(max-height 1s ease-in-out);
 }
.hide {
 max-height: 0;
 @include transform(scaleY(0));
 @include animation(hideAnimation .4s ease-out);
 @include transition(max-height .6s ease-out);
 }
}
@include keyframes(showAnimation) {
 0% {
 @include transform(scaleY(0.1));
 }
 40% {
 @include transform(scaleY(1.04));
 }
 60% {
 @include transform(scaleY(0.98));
 }
 80% {
 @include transform(scaleY(1.04));
 }
 100% {
 @include transform(scaleY(0.98));
 } 
 80% {
 @include transform(scaleY(1.02));
 }
 100% {
 @include transform(scaleY(1));
 }
}
@include keyframes(hideAnimation) {
 0% {
 @include transform(scaleY(1));
 }
 60% {
 @include transform(scaleY(0.98));
 }
 80% {
 @include transform(scaleY(1.02));
 }
 100% {
 @include transform(scaleY(0));
 }
}

Bước 3: Bước này, chúng ta sẽ cần thêm một đoạn JavaScript nữa để Dropdown Menu của chúng ta có thể hoạt động được.

 // Dropdown Menu
 var dropdown = document.querySelectorAll('.dropdown');
 var dropdownArray = Array.prototype.slice.call(dropdown, 0);
 dropdownArray.forEach(function(el) {
 var button = el.querySelector('a[data-toggle="dropdown"]'),
 menu = el.querySelector('.dropdown-menu'),
 arrow = button.querySelector('i.icon-arrow');
button.onclick = function(event) {
 if (!menu.hasClass('show')) {
 menu.classList.add('show');
 menu.classList.remove('hide');
 arrow.classList.add('open');
 arrow.classList.remove('close');
 event.preventDefault();
 } else {
 menu.classList.remove('show');
 menu.classList.add('hide');
 arrow.classList.remove('open');
 arrow.classList.add('close');
 event.preventDefault();
 }
 };
 })
Element.prototype.hasClass = function(className) {
 return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
 };

OK, như vậy là đã xong rồi đấy, còn bây giờ, các bạn và mình cùng xem mẫu nhé

Chú ý: Nội dung trong các bài viết chỉ có tính chất tham khảo. Độc giả vui lòng tham khảo ý kiến của bác sĩ trước bất cứ áp dụng nào! Vui lòng liên hệ để gỡ bài nếu bạn thấy sai và không đúng! Blog xin chân thành cảm ơn!