Trong hướng dẫn tab CSS thuần túy này, chúng tôi thiết kế menu tab css đơn giản mà không có JS với: target và radio button. Ví dụ về các tab có mã HTML và CSS được bao gồm.

Bạn đang xem : thanh trình đơn tab css

Khi mức độ phổ biến của ứng dụng trang đơn tiếp tục tăng lên cùng với sự ra đời của các khung JavaScript như React, các nhà thiết kế web đang có xu hướng hướng tới các tính năng giao diện người dùng của các ứng dụng trang đơn như tab css. Các tab cho phép người dùng điều hướng đến các phần và khu vực khác nhau của một trang. Bất cứ khi nào các nội dung khác nhau cần được nhóm lại với nhau để có trải nghiệm người dùng tốt hơn, các công cụ điều hướng cục bộ có thể được sử dụng. dễ dàng xác định vị trí các nội dung cần thiết. Trong hướng dẫn này, chúng tôi sẽ sử dụng HTML và CSS thuần túy không có js để thiết kế một menu tab CSS đơn giản xem xét các mã ví dụ bằng hai kỹ thuật khác nhau.

Bất cứ khi nào nhà phát triển trang web nghĩ về thiết kế menu tab, điều đầu tiên thường gắn thẻ khi sử dụng HTML và CSS là JS. Không nghi ngờ gì nữa, việc sử dụng JS làm cho việc phát triển hiệu quả hơn rất nhiều và tất nhiên để sử dụng sâu hơn được khuyến nghị sử dụng JavaScript. Ngoài ra, Nếu bạn là người yêu thích Bootstrap, việc phát triển các tab với bootstrap trở nên dễ dàng hơn nhiều ngay cả với UI / UX đáp ứng. Và tất nhiên, có Jquery, material design, React, và các thư viện liên quan khác (hãy lên google nhé!) Để phát triển tab.

Cách tạo menu tab bằng HTML và CSS

Được rồi! Vì vậy, bạn đã chọn giải quyết vấn đề này bằng CSS thuần túy, bạn đã hiểu! Bạn muốn thiết kế menu tab chỉ với bố cục CSS .. hãy bắt đầu với nó và thiết kế và viết mã menu tab thuần CSS của riêng chúng tôi mà không cần js.

Kỹ thuật 1: Tạo các tab CSS bằng: Bộ chọn mục tiêu

Vẻ đẹp của bất kỳ trang web nào nằm ở khả năng phản hồi của nó đối với các hành động bên ngoài. Vì vậy, bất kỳ thiết kế giao diện người dùng nào cũng nên bao gồm các thay đổi trạng thái để cải thiện trải nghiệm người dùng. Bạn có thể đã sử dụng CSS pseudo-class để thay đổi trạng thái của các phần tử đã chọn theo một số yếu tố bên ngoài. Ví dụ: việc sử dụng hover được sử dụng rộng rãi trong phát triển web để hiển thị vị trí của chuột trên một số phần tử bằng cách thay đổi kiểu của nó. Vì vậy, để thay đổi trạng thái của các phần tử được chọn, chúng ta có thể sử dụng các bộ chọn lớp giả. Trong kỹ thuật này, chúng tôi sẽ sử dụng lớp giả target để thiết kế và phát triển menu tab bằng CSS thuần túy mà không có js.

Bước 1: Tạo trình đơn tab

Trước hết,
cho phép tạo một menu tab đơn giản với HTML đơn giản bằng cách sử dụng danh sách.

  & lt; h2 class = "header" & gt; Tab Xây dựng CS HTML thuần túy & lt; / h2 & gt;
& lt; ul class = "tab" & gt;
  & lt; section id = "html" & gt; & lt; h4 & gt; Đây là các tab HTML CSS thuần túy được thiết kế cho dự án tiếp theo của bạn & lt; / h4 & gt;
    & lt; p & gt; HTML: được sử dụng để cấu trúc trang & lt; / p & gt;
  & lt; / phần & gt;
  & lt; li & gt; & lt; a href = "# html" & gt; HTML & lt; / a & gt; & lt; / li & gt;
 
  & lt; section id = "css" & gt; & lt; h4 & gt; Đây là thiết kế tab css thuần túy chỉ sử dụng HTML và CSS & lt; / h4 & gt;
    & lt; p & gt; CSS: được sử dụng để tạo kiểu trang & lt; / p & gt;
  & lt; / phần & gt;
  & lt; li & gt; & lt; a href = "# css" & gt; CSS & lt; / a & gt; & lt; / li & gt;

  & lt; section id = "js" & gt; & lt; h4 & gt; Trong hướng dẫn này, chúng tôi thiết kế các tab cho trang web không có JavaScript. & lt; / h4 & gt; & lt; p & gt; JS: not used. & lt; / p & gt; & lt; / section & gt;
  & lt; li & gt; & lt; a href = "# js" & gt; JS & lt; / a & gt; & lt; / li & gt;
   
& lt; / ul & gt;
 

Phần chứa nội dung sẽ được hiển thị bởi mỗi siêu văn bản được ngụy trang dưới dạng tab menu. Bạn có thể nhận thấy việc sử dụng nội dung phần trước siêu liên kết.

HTML này chỉ hiển thị cấu trúc danh sách trên trang web với mỗi mục trong danh sách cung cấp siêu liên kết.

html css tab build cấu trúc html thô

Bước 2: Thêm kiểu

Theo kết quả của HTML, chúng ta có thể thấy một danh sách đơn giản đã được hiển thị trên trang web. Nó chỉ là một bộ xương phải không ?? Vì vậy, hãy thêm một số kiểu và làm cho nó trông bắt mắt hơn.

 .tab {
  chức vụ: thân nhân;
}

.tab li {
  float: trái;
  tràn: ẩn;
  list-style-type: none;
  hiển thị: khối;
  margin-right: 1px;
  trái: 70px;
  con trỏ: con trỏ;
  chức vụ: thân nhân;
  màu trắng;
  nền: # 6543F1;

}

.tab li a {
  hiển thị: khối;
  văn bản-trang trí: không có;
  màu trắng;
  đệm: 10px;
}

phần .tab {
  z-index: 0;
  chiều rộng: 70%;
  đệm: 5px;
  vị trí: tuyệt đối;
  đầu trang: 39px;
  trái: 110px;
  màu đen;
  nền: trắng;
  bán kính đường viền: 0px 5px 5px 5px;
  box-shadow: 0px 2px 2px 0px xám;
}  

Ở đây, việc sắp xếp vị trí và pixel trên đoạn mã trên là sự điều chỉnh đơn giản được thực hiện với thử nghiệm thử và sai. Ở đây, chúng tôi đã chọn mục danh sách và tạo cho nó một nền đẹp để loại bỏ giao diện mặc định của danh sách. Hãy đối mặt với nó, chúng tôi không muốn kiểu danh sách đó trên menu tab của chúng tôi, phải không? Sau đó, chúng tôi đã xóa kiểu mặc định của thẻ liên kết và thêm một số padding để có giao diện người dùng tốt hơn. Về phía phần nội dung, thuộc tính quan trọng nhất ở đây là định vị z-index , phần còn lại là thiết kế cấu trúc dạng hộp cho mỗi nội dung.

Việc sử dụng z-index

Bây giờ chúng ta hãy thảo luận về tầm quan trọng của định vị tuyệt đối và z-index đối với ứng dụng của chúng ta. định vị tuyệt đối cho phép chúng tôi định vị phần của mình mà không liên quan đến vị trí của các phần tử anh em khác. Chúng ta có thể xếp chồng các phần tử lên nhau. Tại sao chúng tôi muốn điều đó? Đó là điều không mong muốn, phải không ?? Nhưng chúng tôi có thể sử dụng thuộc tính z-index để sắp xếp thứ tự xếp chồng của nội dung và đó là những gì chúng tôi muốn.

Xem Thêm  Làm mới trang bằng JavaScript hoặc HTML - cách làm mới trang bằng javascript

Hãy để tôi xóa nó dễ dàng hơn. Ví dụ, tất cả ba phần được xếp chồng lên nhau trên cùng một vị trí, Bây giờ thay đổi thứ tự của ngăn xếp, chúng ta có thể hiển thị phần trên đầu trang của những phần khác, như chúng ta mong muốn.

Đã hiển thị thứ tự xếp chồng Phần cuối cùng được xếp chồng lên nhau

Tại đây, chúng ta có thể thấy nội dung cuối cùng đang được hiển thị vì tất cả các nội dung phần khác được xếp chồng bên dưới nó. Chà, chúng tôi không muốn hiển thị phần cuối cùng khi trang bắt đầu ở phần đầu. Vì vậy, hãy thay đổi thứ tự của phần đầu tiên bao gồm nội dung HTML để xếp chồng lên trên tất cả các phần khác.

  .tab section: first-child {
  chỉ số z: 1;
}  

Trước mã trên, tất cả ngăn xếp có z-index được đặt thành 0 . Bây giờ với đoạn mã trên, chúng ta đã đặt z-index của con đầu tiên của phần là phần html thành 1 mà bây giờ đưa phần vào đầu ngăn xếp.

Thêm Hiệu ứng Di chuột

Được rồi! Đó là rất nhiều để hiểu. Bây giờ, hãy thêm hiệu ứng hover , đây là bộ chọn lớp giả như đã đề cập trước đó.

  .tab li: hover {
  nền-màu: đen;
}  

Bước 3: Thêm Tính năng Tab

Trước khi giải thích thêm về mã, hãy nói một chút về target . Bất cứ khi nào một URL trên trang trỏ đến một số phần tử khác trong trang bằng cách sử dụng id của phần tử theo sau là dấu # , chúng ta có thể sử dụng target bộ chọn lớp giả để chọn phần tử cụ thể. Ví dụ: trong các mục danh sách của chúng tôi, chúng tôi có một thẻ liên kết sau

& lt; li & gt; & lt; a href = "# html" & gt; HTML & lt; / a & gt; & lt; li & gt;

Sử dụng target, chúng tôi có thể chọn một phần tử có id “html” , nghĩa là nó chọn phần tử sau.

& lt; section id = "html" & gt; & lt; h4 & gt; Đây là các tab HTML CSS thuần túy được thiết kế cho dự án tiếp theo của bạn & lt; / h4 & gt; & lt; p & gt; HTML: được sử dụng để cấu trúc trang & lt; / p & gt; & lt; / section & gt;

Được rồi, tôi hy vọng
điều đó rõ ràng. Nếu không, đoạn mã sau sẽ

  .tab section: target {
  chỉ số z: 2;
  lề: 0;

}  

Trong CSS này, lớp giả mục tiêu được đặt để đẩy thứ tự của phần đã chọn lên trên cùng. Bây giờ, hãy thử nhấp vào từng menu tab.

hãy theo dõi lại. Đầu tiên, chúng tôi đặt z-index của tất cả các phần thành 0. Sau đó, mỗi phần đã chọn được sắp xếp để xuất hiện ở đầu ngăn xếp ẩn các phần khác bên dưới nó. Câu hỏi về PHẦN NÀO được trả lời bởi lớp giả đích. Phần được trỏ bởi thẻ liên kết được đại diện bởi lớp giả đích sau khi siêu văn bản được nhấp vào và phần được đại diện được hiển thị dưới dạng một khối.

Với điều đó
xong, Chúng tôi có thể muốn đánh dấu tab đang được chọn cho mục sau
CSS được sử dụng.

Đánh dấu tab đã chọn

  .tab phần: target + li {

  nền: đen;

}  

Dấu “+”
bộ chọn chọn phần tử ngay sau phần tử được chỉ định.

Bây giờ một lần nữa
hãy theo dõi ngược lại bước 1, nơi chúng tôi đã thêm nội dung phần trước
Danh sách sản phẩm. Đó là bởi vì khi bằng bộ chọn mục tiêu cho phép nói rằng phần html là
đã chọn, chúng tôi muốn đánh dấu tab html. Vì vậy, bằng cách đặt hàng phần trước
mục danh sách, chúng tôi có thể sử dụng bộ chọn “+” để chọn mục danh sách để thay đổi
nền tảng của nó.

Thêm nền với Linear-gradient

Được rồi! Cầm giữ…
chúng tôi sắp hoàn thành. Hãy thêm một chút vẻ đẹp cuối cùng vào trang web của chúng tôi.

  html {
  chiều cao: 100%;
}

thân hình{
 background-image: linear-gradient (sang phải, # 0C796A, # 0B9A29);
 background-size: bìa;
  background-repeat: không lặp lại;
}

.header {
  màu trắng;
  margin-left: 25%;
  margin-top: 50px;
}  

Phù !! Cái đó
nên làm thôi ..

html css tab cuối cùng Xem trước

Viola! Menu tab được thiết kế riêng của chúng tôi Giao diện người dùng chỉ với HTML và CSS thuần túy mà không có js

Một trong những lỗ hổng lớn của việc phát triển tab này là việc sử dụng hàm băm URL khiến trang ngẫu nhiên nhảy xuống phần tử có id đã cho và đó là một trải nghiệm tồi tệ và quá trình phát triển khá tệ. Vì vậy, chúng tôi đã giới thiệu một kỹ thuật khác để thiết kế và phát triển mã menu tab CSS thuần túy mà không có js bên dưới với các ví dụ về cả mã HTML và CSS. Nhưng trước đó, hãy cho phép đọc lại tất cả các mã mà chúng tôi đã sử dụng cho các tab CSS thuần túy.

Các tab CSS thuần túy Mã sử ​​dụng: Bộ chọn mục tiêu

Mã HTML:

  & lt; h2 class = "header" & gt; Tab Xây dựng CS HTML thuần túy & lt; / h2 & gt;
& lt; ul class = "tab" & gt;
  & lt; section id = "html" & gt; & lt; h4 & gt; Đây là các tab HTML CSS thuần túy được thiết kế cho dự án tiếp theo của bạn & lt; / h4 & gt;
    & lt; p & gt; HTML: được sử dụng để cấu trúc trang & lt; / p & gt;
  & lt; / phần & gt;
  & lt; li & gt; & lt; a href = "# html" & gt; HTML & lt; / a & gt; & lt; / li & gt;
 
  & lt; section id = "css" & gt; & lt; h4 & gt; Đây là thiết kế tab css thuần túy chỉ sử dụng HTML và CSS & lt; / h4 & gt;
    & lt; p & gt; CSS: được sử dụng để tạo kiểu trang & lt; / p & gt;
  & lt; / phần & gt;
  & lt; li & gt; & lt; a href = "# css" & gt; CSS & lt; / a & gt; & lt; / li & gt;
  
  & lt; section id = "js" & gt; & lt; h4 & gt; Trong hướng dẫn này, chúng tôi thiết kế các tab cho trang web không có JavaScript. & lt; / h4 & gt; & lt; p & gt; JS: not used. & lt; / p & gt; & lt; / section & gt;
  & lt; li & gt; & lt; a href = "# js" & gt; JS & lt; / a & gt; & lt; / li & gt;
   
& lt; / ul & gt;  

Mã CSS:

  html {
  chiều cao: 100%;
}
thân hình{
 background-image: linear-gradient (sang phải, # 0C796A, # 0B9A29);
 background-size: bìa;
  background-repeat: không lặp lại;
}
.header {
  màu trắng;
  margin-left: 25%;
  margin-top: 50px;
}

.chuyển hướng{
  chức vụ: thân nhân;
}
.tab li {
  float: trái;
  tràn: ẩn;
  list-style-type: none;
  hiển thị: khối;
  margin-right: 1px;
  trái: 70px;
  con trỏ: con trỏ;
  chức vụ: thân nhân;
  màu trắng;
  nền: # 6543F1;
}

.tab li a {
 
  hiển thị: khối;
  văn bản-trang trí: không có;
  màu trắng;
  đệm: 10px;
}

phần .tab {
  z-index: 0;
  chiều rộng: 70%;
  đệm: 5px;
  vị trí: tuyệt đối;
  đầu trang: 39px;
  trái: 110px;
  màu đen;
  nền: trắng;
  bán kính đường viền: 0px 5px 5px 5px;
  box-shadow: 0px 2px 2px 0px xám;
}

.tab li: hover {
  nền-màu: đen;
}

.tab section: first-child {
  chỉ số z: 1;
}

phần .tab: target {
  chỉ số z: 2;
  lề: 0;
}
phần .tab: target + li {
  nền: đen;
}
 

Kỹ thuật 2: Tạo các tab CSS bằng nút radio

Vẻ đẹp của
một nút radio là khả năng chỉ được chọn một lần trong cùng một nhóm
các nút radio. Chúng ta có thể khai thác tính năng này để tạo menu tab.

Bước 1: Tạo các nút radio

Trước hết, hãy tạo danh sách các nút radio. Để các radio này hoạt động như một menu tab, tất cả các nút radio cần được nhóm lại dưới một tên .

& lt; input type = "radio" name = "tabs" id = "tab1" class = "radioClass" đã kiểm tra / & gt;

Dòng này tạo một nút radio và chúng tôi đã nhóm nút đó dưới tên "tab" . Thuộc tính đã kiểm tra đặt vị trí được kiểm tra mặc định của nút. Hãy nhớ rằng, chỉ một nút dưới cùng một tên nhóm có thể được “chọn” cùng một lúc. id được đặt để được sử dụng để thêm các nhãn của từng nút như bên dưới:

& lt; label for = "tab1" & gt; HTML & lt; / label & gt;

Trong khi class được thiết lập để sử dụng cho việc tạo kiểu khác. Để hoạt động như một menu tab, mỗi nút phải có một giá trị nội dung tương ứng được hiển thị. Vì vậy, khối div sau được thêm vào mỗi mục danh sách.

  & lt; div class = ”content” & gt;

  & lt; h4 & gt; HTML là viết tắt của Ngôn ngữ Đánh dấu Siêu văn bản & lt; / h4 & gt;

& lt; / div & gt;  

Được rồi, có
đã biết tất cả những điều cơ bản của từng mục cho phép xem bộ sưu tập các nút như thế nào
được tạo trong đoạn mã sau.

 & lt; h2 class = ”header” & gt; Tab Xây dựng CSS HTML thuần túy & lt; / h2 & gt;

& lt; ul class = ”tab” & gt;
    & lt; li class = ”tab” & gt;
        & lt; input class = ”radioClass” type = ”radio” name = ”tabs” đã kiểm tra id = ”tab1 ″ / & gt;
        & lt; label for = ”tab1 ″ & gt; HTML & lt; / label & gt;
        & lt; div class = ”content” & gt;
          & lt; h4 & gt; HTML là viết tắt của Ngôn ngữ Đánh dấu Siêu văn bản & lt; / h4 & gt;
          & lt; p & gt; Được sử dụng để cấu trúc trang & lt; / p & gt;
        & lt; / div & gt;
    & lt; / li & gt;

    & lt; li class = ”tab” & gt;
      & lt; input class = ”radioClass” type = ”radio” name = ”tabs” id = ”tab2 ″ / & gt;
      & lt; label for = ”tab2 ″ & gt; CSS & lt; / label & gt;
      & lt; div class = ”content” & gt;
          & lt; h4 & gt; CSSstand cho Trang tính Kiểu Xếp tầng & lt; / h4 & gt;
        & lt; p & gt; Được sử dụng để tạo kiểu trang & lt; / p & gt;
       & lt; / div & gt;
    & lt; / li & gt;

     & lt; li class = ”tab” & gt;
      & lt; input class = ”radioClass” type = ”radio” name = ”tabs” id = ”tab3 ″ / & gt;
      & lt; label for = ”tab3 ″ & gt; JavaScript & lt; / label & gt;
      & lt; div class = ”content” & gt;
          & lt; h4 & gt; JavaScript được sử dụng để làm cho các trang động. & lt; / h4 & gt;
        & lt; p & gt; Đó là ngôn ngữ viết kịch bản phía máy khách & lt; / p & gt;
      & lt; / div & gt;
    & lt; / li & gt;
  & lt; / ul & gt;  

HTML này chỉ hiển thị một nút radio với nhãn và nội dung tương ứng của nó.

tab ví dụ Cấu trúc HTML

Bước 2: Thêm kiểu CSS

Trước hết, hãy sắp xếp các mục theo chiều ngang, chúng tôi thực hiện việc này bằng cách sử dụng thuộc tính float với giá trị left . Ẩn tràn lúc này chỉ là biện pháp phòng ngừa để ẩn nội dung vượt quá khối của phần tử.

  .tabs .tab {
   margin-top: 28px;
   float: trái;
   tràn: ẩn;
}  

Sau đó, các dòng mã sau được sử dụng để định vị tuyệt đối của nút radio và tạo kiểu cho nhãn.

  .tabs .tab .radioClass {
    vị trí: tuyệt đối;
}

.tabs nhãn .tab {
    hiển thị: khối;
    margin-right: 1px;
    đệm: 10px;
    con trỏ: con trỏ;
    chức vụ: thân nhân;
    màu trắng;
    nền: # 6543F1;
}  

Nút radio menu tab

Ẩn và Xếp chồng Nội dung

Việc sử dụng định vị tuyệt đối là chồng chéo nội dung của từng nút và xếp chồng chúng lại với nhau ở cùng một vị trí. Vì vậy, chúng tôi có thể thu hồi từng nội dung để xuất hiện ở cùng một vị trí.

  .tabs .content {
    chiều rộng: 100%;
    đệm: 5px;
    vị trí: tuyệt đối;
    đầu trang: 58px;
    trái: 48px;
    màu trắng;
    nền: ĐEN;
    không trưng bày;
}  

Kiểu này chồng chéo nội dung tại vị trí được chỉ định và đặt display thành none . Để chúng tôi có thể hiển thị từng nội dung bằng cách kiểm tra nút radio tương ứng của nó.

js tab box design Một thiết kế hộp đơn giản

Thuộc tính CSS border border-radius được đặt để tạo một phương thức hộp như ở trên. Tuy nhiên, vì chúng tôi đã đặt hiển thị thành không, nên nội dung sẽ biến mất khỏi trang. Hãy thử xóa dòng display: none , Bạn sẽ thấy rằng nội dung cuối cùng được đưa ra trên cấu trúc html sẽ chỉ hiển thị. Điều này là do tất cả các nội dung khác trước đó được xếp chồng lên nhau bên dưới nội dung này.

Đánh dấu tab đã chọn

Bây giờ với cái này
xong, hãy đánh dấu menu để hiển thị lựa chọn của tab. Cho tới bây giờ,
thử nhấp vào từng tab bạn có thể thấy không ảnh hưởng gì ngoài radio trong nền
đang được nhấp đồng thời. Là một nhà thiết kế Giao diện Người dùng, bạn
nên cân nhắc việc hiển thị những thay đổi này một cách hiệu quả.

  .tabs & gt; .tab .radioClass: đã kiểm tra + nhãn {
    nền: TRẮNG;
    màu đen;
}  

Trong CSS ở trên, “+” và “& gt;” Các bộ chọn đã được sử dụng. Bộ chọn “+” chọn các phần tử ngay sau phần tử được chỉ định trong khi bộ chọn “& gt;” được sử dụng để chọn các phần tử con trực tiếp bên trong các phần tử được chỉ định. CSS đã cho đặt nền và màu của nhãn có nút tương ứng đã được chọn. Không tin tôi ?? Kiểm tra nó bằng cách nhấp vào từng tab menu.

Hiển thị Nội dung

Được rồi, hãy bắt đầu
hơn nữa. Vẫn nội dung của nút đã chọn không hiển thị. Vì vậy chúng ta cần
thêm CSS sau

  .tabs & gt; .tab .radioClass: đã kiểm tra ~ .content {

   hiển thị: khối;

}  

Cho đến thời điểm này, chúng tôi đã phát triển một ứng dụng cơ bản có tính năng tab. Nhưng giao diện trông rất tệ. Vì vậy, hãy thêm một nền đẹp bằng cách sử dụng gradient.

Thêm nền với gradient

  html {
  chiều cao: 100%;
}

thân hình{
 background-image: linear-gradient (sang phải, # 0C796A, # 0B9A29);
 background-size: bìa;
 background-repeat: không lặp lại;
}  

Bây giờ chúng ta có thể thấy
rằng tab menu và hộp nội dung trông giống như các mục rời rạc. Hãy tham gia cùng họ
cùng nhau.

  .header {
  màu trắng;
  margin-left: 25%;
  margin-top: 50px;
}

.tabs {
  hiển thị: khối;
  lề trái: 78px;
}  

nút radio menu tab html thuần css

Chà! Có vẻ thú vị! Bây giờ hãy xem thiết kế cuối cùng của các tab mà bạn vừa phát triển bằng cách chơi với HTML và CSS thô. Hãy thử điều chỉnh một số CSS nếu bạn muốn. Bạn vẫn có thể tạo ra một thiết kế tốt hơn. 😉

Toàn bộ mã tab CSS thuần túy được phát triển bằng kỹ thuật này mà không có JS:

Đoạn mã tab HTML:

  & lt; h2 class = "header" & gt; Tab Xây dựng CSS HTML thuần túy & lt; / h2 & gt;
& lt; ul class = "tab" & gt;
    
    & lt; li class = "tab" & gt;
        & lt; input class = "radioClass" type = "radio" name = "tab" đã kiểm tra id = "tab1" / & gt;
        & lt; label for = "tab1" & gt; HTML & lt; / label & gt;
        & lt; div class = "content" & gt;
          & lt; h4 & gt; Đây là các tab HTML CSS thuần túy được thiết kế cho dự án tiếp theo của bạn & lt; / h4 & gt;
          & lt; p & gt; HTML: được sử dụng để cấu trúc & lt; / p & gt;
          
        & lt; / div & gt;
    & lt; / li & gt;
    
    & lt; li class = "tab" & gt;
      & lt; input class = "radioClass" type = "radio" name = "tabs" id = "tab2" / & gt;
      & lt; label for = "tab2" & gt; CSS & lt; / label & gt;
      & lt; div class = "content" & gt;
          & lt; h4 & gt; Đây là thiết kế tab css thuần túy chỉ sử dụng HTML và CSS & lt; / h4 & gt;
        & lt; p & gt; CSS: Được sử dụng để tạo kiểu trang & lt; / p & gt;
          
       & lt; / div & gt;
    & lt; / li & gt;

     & lt; li class = "tab" & gt;
      & lt; input class = "radioClass" type = "radio" name = "tabs" id = "tab3" / & gt;
      & lt; label for = "tab3" & gt; JavaScript & lt; / label & gt;
      & lt; div class = "content" & gt;
          & lt; h4 & gt; Trong hướng dẫn này, chúng tôi thiết kế các tab cho trang web mà không có JavaScript. & lt; / h4 & gt;
        & lt; p & gt; JS: Không được sử dụng & lt; / p & gt;
          
      & lt; / div & gt;
    & lt; / li & gt;
    
  & lt; / ul & gt;
   

Mã tab CSS:

  .tabs .tab {
   margin-top: 28px;
   float: trái;
   tràn: ẩn;
}
.tabs .tab .radioClass {
    vị trí: tuyệt đối;
   
}
.tabs .tab nhãn {
    hiển thị: khối;
    margin-right: 1px;
    đệm: 10px;
    con trỏ: con trỏ;
    chức vụ: thân nhân;
    màu trắng;
    nền: # 6543F1;
}
.tabs .content {
    chiều rộng: 70%;
    không trưng bày;
    đệm: 5px;
    vị trí: tuyệt đối;
    đầu trang: 164px;
    trái: 126px;
    màu đen;
    nền: trắng;
    bán kính đường viền: 0px 5px 5px 5px;
    box-shadow: 0px 2px 2px 0px xám;
}
.tabs & gt; .tab .radioClass: đã chọn + nhãn {
    nền: TRẮNG;
    màu đen;
}
.tabs & gt; .tab .radioClass: đã kiểm tra ~ .content {
   hiển thị: khối;
}
html {
  chiều cao: 100%;
}
thân hình{
 background-image: linear-gradient (sang phải, # 0C796A, # 0B9A29);
 background-size: bìa;
  background-repeat: không lặp lại;
}
.header {
  màu trắng;
  margin-left: 25%;
  margin-top: 50px;
}
.tabs {
  hiển thị: khối;
  lề trái: 78px;
}  

Kết luận

Cuối cùng, chúng tôi đã quản lý để thiết kế và phát triển chức năng menu tab bằng HTML và CSS nhẹ mà không có JS. Chúng tôi đã xem xét mã tab CSS thuần túy đơn giản được phát triển bằng hai kỹ thuật. Từ đây, Bạn có thể tiếp tục thêm nhiều tab hơn chỉ bằng cách thêm nhiều div trong cấu trúc html. Từ đây, bạn có thể tiếp tục thêm các ảnh hưởng đến hoạt ảnh trên cùng một đoạn mã. Hãy thử sử dụng Jquery, bootstrap và Javascript để có thiết kế động tốt hơn vì hãy đối mặt với CSS là để tạo kiểu và sử dụng nó cho các tab là một cách sử dụng phức tạp và hơi khó.


Xem thêm những thông tin liên quan đến chủ đề thanh menu css tab

Simple Tabs using HTML, CSS & JavaScript

alt

  • Tác giả: FRONTRU - Web Tutorials
  • Ngày đăng: 2021-11-16
  • Đánh giá: 4 ⭐ ( 1134 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Simple Tabs using HTML, CSS & JavaScript

    Don't click here: https://bit.ly/3cGrLdg

    ⏱ Timecodes
    00:00 Preview
    00:21 HTML
    01:15 CSS
    03:45 JavaScript
    06:15 Overview

    Follow me ⤵️
    https://twitter.com/FRONTRU3
    https://www.reddit.com/user/frontru
    https://dribbble.com/FRONTRU

    Support me, buy me a coffee ☕️
    https://www.buymeacoffee.com/frontr​

    Thanks for watching!
    Make sure to like + Subscribe For More!

    Awesome User Card Interactions: https://youtu.be/1BsEkyf9idg
    Full Screen Navigation Menu: https://youtu.be/YZ7-xWEgQLM
    Page Scroll Indicator: https://youtu.be/FzuPC7S1uhY
    Character Limit: https://youtu.be/mqzC3N1BNsI
    Creative Hover Menu: https://youtu.be/D5-VhCG_0VY

    Music
    Snow Fall by Vendredi https://soundcloud.com/vendrediduo
    Creative Commons — Attribution 3.0 Unported — CC BY 3.0
    Free Download / Stream: https://bit.ly/3w2LBHx
    Music promoted by Audio Library https://youtu.be/WiMroZHQf7s

    Colorful Flowers by Tokyo Music Walker https://soundcloud.com/user-356546060
    Creative Commons — Attribution 3.0 Unported — CC BY 3.0
    Free Download / Stream: https://bit.ly/al-colorful-flowers
    Music promoted by Audio Library https://youtu.be/vYp14UesizY

    html​ css​ frontru

    tabs, html tabs, css tabs, pure css tabs, css tabs tutorial, tabs using html and css, css tabs design, css tabs with javascript, css tabs animation, how to create tabs using only html css and javascript, how to create tabs in html css javascript, pure css tabs design, tabs with indicator using only html css and javascript, tabs with indicator in html css, tabs navigation using only html css javascript, how to create pure css tabs, tabs using only css, HTML, CSS, JavaScript, FRONTRU

Hướng dẫn tạo right aligned menu và centered menu bằng CSS

  • Tác giả: freetuts.net
  • Đánh giá: 3 ⭐ ( 8430 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Menu tab là một phần quan trọng và không thể thiếu trong mọi trang web. Thiết kế một menu đẹp và hiện đại sẽ giúp cho trang web thiếp cận được nhiều người.

Hướng Dẫn Xây Dựng Tabs Với HTML, CSS và Javascript

  • Tác giả: www.thanhlongdev.com
  • Đánh giá: 5 ⭐ ( 6387 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Tạo menu đa cấp trong thiết kế web bằng html css

  • Tác giả: dichvuseogiarehanoi.com
  • Đánh giá: 5 ⭐ ( 2753 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thiết kế web bằng html css,hướng dẫn bạn cách tạo một menu đa cấp đẹp mà không cần phải sử dụng jquery

W3.CSS Tabs

  • Tác giả: www.w3schools.com
  • Đánh giá: 4 ⭐ ( 5535 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

35 menu CSS và HTML cho di động, blog, Thương mại điện tử và hơn thế nữa

  • Tác giả: www.creativosonline.org
  • Đánh giá: 3 ⭐ ( 5557 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 35 menu trong CSS và HTML nhằm vào thiết bị di động, blog, Thương mại điện tử và tất cả các loại trang web cần thiết để quản lý cấu trúc của một trang web.

20 Cool HTML & CSS Tabs [Examples]

  • Tác giả: alvarotrigo.com
  • Đánh giá: 3 ⭐ ( 7577 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Do you need to display large content on your website and you do not know how? CSS Tabs can be a great solution.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php