Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

javascript - Menu thả xuống điều hướng CSS tùy chỉnh

In lại Tác giả: Vũ trụ không gian Thời gian cập nhật: 2023-11-04 10:54:35 27 4
mua khóa gpt4 Nike

Hiện tại trên trang của tôi, khi tôi có quá nhiều liên kết, các liên kết đó sẽ bị thả xuống phía dưới điều hướng. Hãy xem ví dụ của tôi:https://jsfiddle.net/cn6z13n1/

Có thể đặt một cái ở ngoài cùng bên phải khôngThêm liên kết Mục danh sách có chứa danh sách thả xuống chứa các liên kết? 

.toolkit_nav {
    nền:#dfdfdf;
    chiều rộng: 100%;
    chiều cao:40px;
    phần đệm: 0;
}
.toolkit_nav ul {
    margin:0;
}
.toolkit_nav ul .page_item {
    hiển thị: khối nội tuyến;
    chiều cao dòng: 40px;
    danh sách kiểu-kiểu: không có;
    lề:0px;
    phần đệm: 0 20px;
}
.toolkit_nav ul .page_item:con đầu lòng {
    lề trái:0;
    đệm-trái: 0;
}
.page_item:hover, .current_page_item {
    nền: màu xám;
}
.page_item a {
    màu: đen;
    cỡ chữ: 0,9em;
    font-weight: 400;
    trang trí văn bản: không có;
}

câu trả lời hay nhất

Bạn cần làm điều này trong js, tôi khuyên bạn nên làm điều này

  1. Lấy chiều rộng của hàng (chiều rộng tối đa của điều hướng)
  2. Lặp lại các phần tử li và tính tổng chiều rộng ở đó (+ nhớ thêm chiều rộng của phần tử "more" vào đây
  3. Khi tổng chiều rộng của các phần tử điều hướng > chiều rộng của phần tử ẩn
  4. Thêm js vào nút "thêm" hiển thị các phần tử ẩn

Đoạn mã sau chưa được kiểm tra nhưng sẽ cho bạn ý tưởng:

var maxWidth = $('#nav').width();
var moreWidth = $('#more').width(); // li phần tử "more"

var sumWidth = moreWidth;
$('#nav li').each(function() {
    sumWidth += $(this).width();
    if(sumWidth > maxWidth) {
       $(this).addClass('hide'); // thêm css cho lớp ẩn
    }
});

$('#more').on('click', function() {
   $('#nav .hide').fadeIn(100);
   // Bạn sẽ cần thêm mã ở đây để đặt nó chính xác, có thể nối các phần tử vào một thùng chứa
});

Đây là một ví dụ về câu đố của bạn:

https://jsfiddle.net/cn6z13n1/3/

LƯU Ý: Đây chỉ là bản nháp thô, bạn có thể tính toán phần đệm, v.v. để nó hoạt động tốt

EDIT: Ví dụ được cập nhật bằng hàm $(window).resize()

https://jsfiddle.net/cn6z13n1/6/

Về javascript - menu thả xuống điều hướng CSS tùy chỉnh, chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/34739579/

27 4 0
Bài viết khuyến nghị: Xác định các từ phổ biến nhất từ ​​danh sách email dựa trên từ điển các từ thú vị
Bài viết khuyến nghị: java - nhận được 400 phản hồi khi tôi thử yêu cầu POST
Bài viết khuyến nghị: linux - Ai đó có thể giải thích cách tốt nhất để định dạng lại đầu ra của awk() | sắp xếp | uniq -c | sắp xếp -rg?
Bài viết khuyến nghị: Làm cách nào để xóa tên thư mục kết thúc khỏi đường dẫn trong tập lệnh Linux?
không gian vũ trụ
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress