Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > HTML/CSS > Hướng dẫn thiết kế Slide Icon Menu
Hướng dẫn thiết kế Slide Icon Menu
Nguyễn Trung Hiếu
Share Code Web Company 2013

Hướng dẫn thiết kế Slide Icon Menu

Bài viết hướng dẫn thiết kế về menu đã có nhiều trên sharecodeweb, và nay mình tiếp tục share thêm một bài viết về một hiệu ứng khác khi thiết kế menu

Nói qua về hiệu ứng này, đó là khi bạn hover qua một menu item nào đó, thì nó sẽ hiện ra icon tương ứng của menu đó. Còn không thì sẽ ẩn đi. Các bạn có thể nhìn vào ảnh để biết chi tiết

slide icon menu

OK. bắt đầu thôi nào

HTML

Đầu tiên là mã HTML của menu nhỉ

Đơn giản lắm, chỉ vài cái ul và li là xong thôi mà, quan trọng là hiệu ứng css ấy.

CSS

Đầu tiên là đoạn reset và thiết lập cơ bản, bạn có thể bỏ qua cái này

Tiếp theo là thẻ ul và li

Nhìn dài dài sợ sợ thế kia thôi, nhưng mà đoạn ấy chỉ là thiết lập các thuộc tính màu nền cho thẻ ul và li thôi mà,
Thẻ li đầu tiên, nút home.

Tương tự các li khác như sau

Ở đoạn css trên, bạn chỉ cần chú ý tới phần chứa content là đủ. Khi bạn thay đổi phần đó thì icon cũng thay đổi theo. Bạn có thể tra cứu tại đây
Chúc bạn thành công!
Bạn có thể tham khảo thêm một số bài viết cũ của sharecodeweb dưới đây

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

http://sharecodeweb.net/?s={search_term_string}