Tạo Dropdown Menu đơn giản mà đẹp mắt với CSS3 Transitions

Với sự hỗ trợ của CSS3, thỉnh thoảng chúng ta sẽ không cần đến sự hỗ trợ từ jQuery hay bất kỳ đoạn script nào để tạo hiệu ứng. Như trong bài viết này, mình sẽ chia sẻ cho các bạn một cách tạo drop down menu đơn giản nhưng nhà thuốc ứng thì không thua kém bất kì một đoạn script tạo nhà thuốc ứng nào.


Xem Demo | Download

HTML

Đầu tiên, chúng ta sẽ cần tạo cuốn sách các menu cần tạo hiệu ứng như sau :

 CSS và CSS3 Transitions 

Đầu tiên, chúng ta sẽ định dạng LINK TRANSITION và MENU STYLE

/* LINK TRANSITION */ a -moz-transition:color 0.3s ease-out; -webkit-transition:color 0.3s ease-out; -o-transition:color 0.3s ease-out; transition:color 0.3s ease-out; /* MENU STYLE */ header width:100%; header #top background:#222; float:left; height:30px; line-height:30px; width:100%; header nav#topmenu margin:0 auto; padding:0 15px; position:relative; width:960px; header nav#topmenu ul margin:0 padding:0; header nav#topmenu ul li float:left; position:relative; font-size:10px; list-style:none; margin:0; padding:0; width:90px; text-align:center; text-transform:uppercase; border-right:1px solid #ccc; header nav#topmenu ul li:first-child border-left:1px solid #ccc; header nav#topmenu ul li a color:rgba(255,255,255,0.6); text-decoration:none; display:block; header nav#topmenu ul li a:hover color:#fff; header nav#topmenu ul li:hover > a /* ACTIVATE LINK WHEN THE MOUSE OVER SUB-MENU */ color:#fff; header nav#topmenu ul li span background:url(arrow.png) center no-repeat; height:10px; position:absolute; text-indent:-9999px; top:10px; right:5px; width:10px; header nav#topmenu ul li span.arrow background-position:0 2px; header nav#topmenu ul li span.arrow-right background-position:-10px 2px; Kế tiếp là cho phần Sub Menu Cấp Bậc 1

header nav#topmenu ul li ul.sublist /* FIRST SUB-MENU STYLE */ float:left; list-style:none; margin:0; padding:0; position:absolute; left:0px; top:31px; background:#222; width:90px; opacity:0; visibility:hidden; /* Avoids being selected even if the opacity is set to 0 */ /* CSS3 Multiple Transitions */ -moz-transition:opacity 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear; -webkit-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear; -o-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear; transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear; header nav#topmenu ul li ul.sublist li border:none; border-bottom:1px solid #ccc; clear:both; margin-top:-15px; padding:0; width:90px; -moz-transition:opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out; -webkit-transition:opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out; -o-transition:opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out; transition:opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out; header nav#topmenu ul li ul.sublist li a color:rgba(255,255,255,0); header nav#topmenu ul li:hover ul.sublist opacity:1; visibility:visible; header nav#topmenu ul li:hover ul.sublist li margin-top:0; opacity:1; header nav#topmenu ul li:hover ul.sublist li a color:rgba(255,255,255,0.6); -moz-transition:color 0.1s ease-out; -webkit-transition:color 0.1s ease-out; -o-transition:color 0.1s ease-out; transition:color 0.1s ease-out; header nav#topmenu ul li:hover ul.sublist li a:hover color:rgba(255,255,255,1); -moz-transition:color 0.3s ease-out; -webkit-transition:color 0.3s ease-out; -o-transition:color 0.3s ease-out; transition:color 0.3s ease-out; header nav#topmenu ul li:hover ul.sublist li:hover > a /* ACTIVATE LINK SUB-MENU WHEN THE MOUSE OVER SUBSUB-MENU */ color:#fff; Và Sub Menu cấp bậc 2

header nav#topmenu ul li ul.sublist li ul.subsublist float:left; list-style:none; margin:0; padding:0; position:absolute; left:61px; top:0px; background:#222; width:90px; opacity:0; visibility:hidden; -moz-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear; -webkit-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear; -o-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear; transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear; header nav#topmenu ul li ul.sublist li ul.subsublist li border:none; border-bottom:1px solid #ccc; clear:both; margin:0; padding:0; width:90px; opacity:1; header nav#topmenu ul li ul.sublist li:hover ul.subsublist opacity:1; left:91px; visibility:visible; Thế là xong rồi đó các bạn, bây giờ các bạn chỉ cần áp dụng nó vào ngay cho các menu chính trên web hay blog của các bạn là okie Thủ thuật tin học . Nhớ để lại lời nhắn chẳng hạn các bạn cảm thấy khó hiểu ở phần nào trong bài viết này nhé.
Xem Thêm :

Share on Google Plus
    Blogger Comment
    Facebook Comment

0 nhận xét:

Đăng nhận xét