Css không có

Menu là một yếu tố quan trọng đối với mọi loại trang web, giúp khách hàng có thể truy cập trang web và đi từ trang này đến trang khác. Nhiều trang web có menu điều hướng ở trên cùng, một số trang có thể ở bên phải hoặc bên trái. Hiện tại chúng ta có thể áp dụng CSS khi tạo các kiểu menu đơn giản là menu Dọc, menu ngang và menu thả xuống. Hãy cùng FUNiX tìm hiểu cách áp dụng menu tạo CSS trong bài viết bên dưới

Khi muốn áp dụng CSS để tạo menu ngang, chúng ta hãy sử dụng thẻ

to create area for menu and tag
• để tạo từng hạng mục trong menu đó

  [html]

  • Trang chủ
  • diễn đàn
  • Tin tuc
  • câu hỏi
  • Liên hệ

  [/html]

  1. 2. Chúng ta sẽ đặt lại CSS và thêm một số kiểu cho toàn trang web như bên dưới

  {

  lề. 0;

  đệm. 0;

  }

  thân thể {

  họ phông chữ. sans serif;

  màu. #333;

  }

  #menu ul {

  lai lịch. #1F568B;

  kiểu danh sách. không ai;

  căn chỉnh văn bản. trung tâm;

  }

  1. 4. Để điều chỉnh cho các mục con nằm thành hàng ngang chúng ta có thể lựa chọn 2 kiểu đó là float. left for all the cardsor display inline-block type

  #menu li {

  màu. #f1f1f1;

  trưng bày. chặn Nội tuyến;

  chiều rộng. 120px;

  Chiều cao. 40px;

  chiều cao giữa các dòng. 40px;

  lề trái. -5px;

  }

  #menu li {

  màu. #f1f1f1;

  trôi nổi. trái;

  chiều rộng. 120px;

  Chiều cao. 40px;

  chiều cao giữa các dòng. 40px;

  }

  Sau khi thực hiện kiểu inline-block sẽ nhận được kết quả là

  #menu một {

  trang trí văn bản. không ai;

  màu. #ffff;

  trưng bày. chặn;

  }

  #menu a. bay lượn {

  lai lịch. #F1F1F1;

  màu. #333;

  }

  Kết quả nhận được sau khi hoàn thành

  Sau khi áp dụng CSS để tạo một menu ngang như ở phần trên, bạn muốn từ các mục lớn của menu có thể chuyển ra một số mục con thì phải tiến hành tạo menu thả xuống cho menu ngang vừa tạo.  

  Ví dụ ở phần Tin tức, nếu muốn có thêm một vài menu con nữa thì chúng ta sẽ đặt thêm một thẻ

  được lồng vào bên trong mục Tin tức, thẻ
  this will mang class as sub-menu

  [html đánh dấu =”6-10″]

  • Trang chủ
  • diễn đàn
  • Tin tuc
    • WordPress
    • SEO
    • lưu trữ
  • câu hỏi
  • Liên hệ

  [/html]

  Và áp dụng CSS như phần tạo menu ngang ở trên

  {

  lề. 0;

  đệm. 0;

  }

  thân thể {

  họ phông chữ. sans serif;

  màu. #333;

  }

  #menu ul {

  lai lịch. #1F568B;

  kiểu danh sách. không ai;

  căn chỉnh văn bản. trung tâm;

  }

  #menu li {

  màu. #f1f1f1;

  trưng bày. chặn Nội tuyến;

  chiều rộng. 120px;

  Chiều cao. 40px;

  chiều cao giữa các dòng. 40px;

  lề trái. -5px;

  }

  #menu một {

  trang trí văn bản. không ai;

  màu. #ffff;

  trưng bày. chặn;

  }

  #menu a. bay lượn {

  lai lịch. #F1F1F1;

  màu. #333;

  }

  Sau khi thực hiện các bước trên ta sẽ nhận được kết quả hiển thị như sau

  Tạo menu thả xuống được tạo

  Lúc này chúng ta sẽ cho. menu con ẩn đi bằng lệnh sau

  menu phụ li {

  trưng bày. không ai;

  }

  Sử dụng thuộc tính vị trí để hiển thị phần. menu phụ ra bên ngoài phần #menu ul. To. sub-menu is near menu mẹ thì ta phải thiết lập #menu li thành kiểu tương đối vì #menu li bao gồm các mục cấp cao nhất, được gọi đó là menu mẹ

  #menu li {

  Chức vụ. liên quan đến;

  }

  Điều chỉnh. menu phụ thành tuyệt đối để nó luôn luôn nằm trong phạm vi của menu mẹ (#menu li). Viết lại đoạn. sub-menu as after

  menu phụ {

  trưng bày. không ai;

  Chức vụ. tuyệt đối;

  }

  Use command #menu li. bay lượn. sub-menu to when rê chuột vào menu mẹ sẽ hiển thị các menu con. Lệnh hiển thị. block to display

  #menli. bay lượn. menu phụ {

  trưng bày. chặn;

  }

  Áp dụng CSS cho các menu con bên trong để xóa lề không cần thiết

  menu phụ li {

  lề trái. 0. quan trọng;

  }

  Chúng ta sẽ có một danh sách ban đầu menu ban đầu như sau

  [html]

  • Trang chủ
  • Tin tuc
  • Sản phẩm
  • Liên hệ

  [/html]

  Áp dụng CSS cho #menu ul để thêm màu nền và bỏ dấu chấm đầu dòng của danh sách

  #menu ul {

  lai lịch. #8AD385;

  chiều rộng. 250px;

  đệm. 0;

  kiểu danh sách. không ai;

  căn chỉnh văn bản. trái;

  }

  Viết CSS cho các thẻ

  • , sử dụng chiều cao để xác định chiều cao và thêm line-height bằng chiều cao để nó đứng giữa khối

    #menu li {

    chiều rộng. tự động;

    Chiều cao. 40px;

    chiều cao giữa các dòng. 40px;

    viền dưới. 1px cố định #e8e8e8;

    đệm. 0 1em;

    }

    Ở bước cuối cùng, tiếp tục áp dụng CSS cho thẻ bên trong menu, chuyển nó thành khối và thêm vào các kiểu cần thiết, tạo thêm các hiệu ứng nền khác khi rê chuột vào các mục của menu

    #menu li a {

    trang trí văn bản. không ai;

    màu. #333;

    trọng lượng phông chữ. in đậm;

    trưng bày. chặn;

    }

    #menli. bay lượn {

    lai lịch. #CDE2CD;

    }

    Chúng ta sẽ tạo một menu dọc có đổ xuống sẽ xổ ra bên phải khi rê chuột vào menu của mẹ

    Please doing the vertical menu menu as on on and bổ sung các menu con vào như sau

    [html đánh dấu =”4-10″]

    • Trang chủ
    • Tin tuc
      • WordPress
      • SEO
      • lưu trữ
    • Sản phẩm
    • Liên hệ

    [/html]

    Áp dụng CSS như ở phần trên

    thân thể {

    họ phông chữ. sans serif;

    cỡ chữ. 15px;

    }

    #menu ul {

    lai lịch. #8AD385;

    chiều rộng. 250px;

    đệm. 0;

    kiểu danh sách. không ai;

    căn chỉnh văn bản. trái;

    }

    #menu li {

    chiều rộng. tự động;

    Chiều cao. 40px;

    chiều cao giữa các dòng. 40px;

    viền dưới. 1px cố định #e8e8e8;

    đệm. 0 1em;

    }

    #menu li a {

    trang trí văn bản. không ai;

    màu. #333;

    trọng lượng phông chữ. in đậm;

    trưng bày. chặn;

    }

    #menli. bay lượn {

    lai lịch. #CDE2CD;

    }

    Đến đây các menu con trong mục Tin tức sẽ bị lỗi hiển thị, nên chúng ta sẽ áp dụng CSS cho nó

    Chuyển đổi #menu li thành kiểu hiển thị tương đối

    #menu ul li {

    Chức vụ. liên quan đến;

    }

    Move. menu phụ về định dạng tuyệt đối và chỉnh sửa vị trí hiển thị của nó sang bên phải sao cho bằng với chiều rộng menu là 250px, đồng thời đưa menu con về sát mặt menu của mẹ

    #thực đơn. menu phụ {

    Chức vụ. tuyệt đối;

    trái. 250px;

    hàng đầu. 0;

    }

    Kết quả nhận được

    Lúc này chỉ cần thêm CSS để. sub-menu ẩn đi và chỉ hiện ra khi người dùng rê chuột vào #menu li có chứa. menu phụ đó