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ế menu dọc đẹp mắt
Hướng dẫn thiết kế menu dọc đẹp mắt
Nguyễn Trung Hiếu
Share Code Web Company 2013

Hướng dẫn thiết kế menu dọc đẹp mắt

Ngẫu hứng viết 1 bài hướng dẫn thiết kế code menu dọc đẹp mắt cho anh em coi nè. Đừng bỏ lỡ!

Không biết trên sharecodeweb.net bạn đã từng đọc các bài hướng dẫn tương tự này chưa? Hãy cùng tham khảo list bên dưới những bài viết mà sharecodeweb.net đã chia sẻ nhé.

Còn mẫu menu dọc hôm nay mình chia sẻ sẽ là mẫu menu dọc rất độc đáo và sẽ không làm bạn thất vọng đâu.

Demo ảnh menu dọc đẹp

Cùng xem demo bằng ảnh khi chúng ta hoàn thiện bài tập ngày hôm nay nhé.
hướng dẫn thiết kế menu dọc đẹp mắt

Bắt tay vào code menu dọc đẹp nào!

OK, nhìn khá bắt mắt phải không, cái đó chỉ là ảnh nên chưa thể mượt mà như demo thật được, cái này bạn sẽ tự trải nghiệm và nói lại cho mình biết khi thực hiện thành công nhé. 😀

Bước 1

Đầu tiên là phần “khung xương” cho menu của chúng ta bằng HTML nhé

Đơn giản thôi, đầu tiên là nhúng các thư viện hỗ trợ javascript vào phục vụ cho bài tập của chúng ta. Các bạn chú ý, ở đây chúng ta sử dụng thêm bên ngoài bộ css do trang netdna.bootstrapcdn.com cung cấp nhé, bạn cũng có thể click vào để xem nội dung css nó có những gì. OK
Phần quan trọng nhất của chúng ta chính là những tag nằm bên trong thẻ body, và đặc biệt hơn là đoạn ul li. Các bạn chú ý từng class cho từng thẻ 1 nha. Giờ bắt đầu vào css nè!

Bước 2

Đầu tiên là định dạng thuần cho thẻ body và khung ul bên ngoài cùng. Nếu bạn không thích thì có thể bỏ qua đoạn css cho body

Class .form chúng ta bo viền tròn là 5px bằng thuộc tính border-radius. Tiếp theo là đổ bóng cho khung của nó bằng thuộc tính box-shadow.

Các thẻ a bên trong được định dạng như sau:

Từng class riêng biệt sẽ có màu bên trái khác nhau. Do đó chúng ta css cho chúng như thế này. Để độ rộng 5px là đẹp! Màu tùy các bạn nhé

Tiếp theo là bo viền cho thẻ li đầu tiên và li cuối cùng. Với li đầu tiên chúng ta bo góc trên trái và trên phải.

  • Li
  • cuối cùng ta bo góc dưới trái và dưới phải như đoạn css bên dưới

    Hiệu ứng cho thẻ i khi hover chuột qua cho nó mượt mà tí

    Tiếp theo là hiển thị số lượng message được như ảnh. Cái này nó nằm trong thẻ em. Ở đây chỉ có 1 thẻ em nên mình không gán class cho nó. Nếu như trong project của bạn có sử dụng thẻ này ở nhiều chỗ khác nữa thì cần chú ý nhé.

    Cuối cùng là css nốt những chỗ lặt vặt

    Vậy là xong phần css. Chuyển qua bước tiếp theo nào

    Bước 3

    Bước này chỉ dùng 1 đoạn javascript nhỏ để hiệu ứng của chúng ta mượt mà thêm thôi chứ cũng không có gì to lớn cả 😀

    Kết

    Done! Vậy là xong rồi đó, thử chiêm ngưỡng thành quả của mình đi xem nào. Sau khi chạy thử code menu dọc đẹp thì quay lại đây nói cho tôi biết cảm nhận của bạn nhé!

    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

    Leave a comment

    Bạn phải Đăng nhập để tham gia bình luận.

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

    Blog Stats

    • 5.678 hits
    %d bloggers like this: