CSS vertical menu

Khi bắt đầu làm quen với blogger, mình tình cờ biết được trang helplogger. Nhìn thấy dạng menu của trang này rất đơn giản nhưng lại đẹp và sinh động, thế là mình áp dụng ngay cho blog của mình. Trong bài viết này, mình sẽ hướng dẫn các bạn thực hiện dạng menu như vậy.

Điều thú vị của menu dạng này là sử dụng 1 thuộc tính của CSS3 để tạo hiệu ứng khi rê chuột vào. Chúng ta cùng thử nào.

HTML

CSS

Chú ý các đoạn in đậm

• Dòng 16 + 17 làm cho thẻ <a> hiển thị như 1 block và có chiều rộng là 80% so với thẻ cha <li>.
• Dòng 22 + 23 + 24 sử dụng thuộc tính transition của CSS3 để tạo hiệu ứng khi rê chuột vào.

Khi rê chuột vào, bắt đầu từ dòng 27, thẻ <a> sẽ thay đổi các thuộc tính width và border. Do ảnh hưởng của transition, ta sẽ có 1 hiệu ứng khá bắt mắt.

Tham khảo thêm transition css3

Hy vọng qua thủ thuật đơn giản này, các bạn sẽ tự thiết kế cho mình những dạng menu độc đáo hơn nữa.