Tuesday, 4 June 2013

[CSS] Dropdown menu



Chào cả nhà hôm nay vừa thi tốt nghiệp cấp 3 xong. Trời có nắng nhưng được cái có gió. Và có mấy đứa đi chụp ảnh mảnh ở hồ sen nào đấy rồi up ảnh lên face + không biết đã khao ván trượt chưa nữa
Đi vào vấn đề chính nào hôm nay mình sẽ trình bày cách để xây dựng 1 thanh menu 2 level . Trước hết để tiện cho việc trình bày bạn nào chưa có cái bảng các thuộc tính của CSS thì tìm trên mạng hoặc liên hệ mình để lấy(mail:dong.tm1212@gmail.com). Để xây đựng Dropdown menu cần 1 số lệnh sau :

  1. Margin : Lệnh này để căn chỉnh khoảng cách giữa các đối tượng cùng cấp với nhau và có 4 giá trị theo thứ tự trên phải dưới trái, 3 giá trị thì là trên phải(trái = lề phải) dưới, 2 giá trị : trên(=dưới) phải(=trái), 1 giá trị: tất cả bằng nhau,  ngoài ra còn có auto nó sẽ tự co khi co màn hình(theo mình biết là vậy).ps: còn có cách chỉnh riêng từng giá trị bằng các thêm-top,-bottom,-left,-right sau margin
  2. Padding: giống như margin để căn chỉnh khoảng cách nhưng là khoảng cách giữa đối tượng và lề của nó . Các dùng giá trị như margin
  3. Display: dùng để thay đổi cách hiển thị đối tượng.
    Giá trị :
    none- làm ẩn đi,
    inline: hiển thị trên 1 hàng,
    block: cái này là gì nhỉ khóa à :)) cũng ko rõ
    Float: dùng để chỉnh thành phần hiển thị thế nào so với thành phần mẹ của nó. Hiển thị bên trái, bên phải. Các thành phần ở dưới sẽ được đẩy lên .
  4.  
  5. Background,text-decoration,....: mấy cái này các bạn hiểu tiếng anh là hiểu :)) mà tốt nhất là thực hành luôn cho nóng
Sau đây là code cho dropdown menu
HTML:

CSS:

 Không biết có thể hiển thị kết quả ở đây ko nhỉ dể thử phát


1 đoạn văn rất là vớ vẩn sao cho no ko bị đẩy xuống và bị che khi xổ dropdown


Đọc code CSS các bạn thấy thế nào,thực ra thì cách viết code này thực chất là inline code mà thôi chỉ khác là có dẫn dắt đến từng chỗ cụ thể. Chứ nếu mà viết inline thì độ cồng kềnh của Html thì thôi rồi nhìn rối mắt sửa bằng liềm(cố tình) niềm tin :)).
id="tên" thì trong css là #tên
class="tên" thì css là .tên.
Dẫn dắt tới các thành phần cần style hóa. To nhất là body viết css bt thì chỉ có 1 thành phần, nhưng do web có nhiều thành phần khác nhau nên cần phải dẫn dắt tới đích. Như vậy thì các style không bị đè lên nhau. Cụ thể trong thẻ div có thẻ ul, trong ul có li . Vậy để chỉnh style cho li trong phần này là div ul li { code css} viết thế này thì các li ngoài thẻ ul và ngoài div sẽ không bị ảnh hưởng.