Tutorial 2x DIY xf mega menu with image - Tự làm menu xf mega với hình ảnh cho XenForo 2

[PVS]

DIY xf mega menu with image - Tự làm menu xf mega với hình ảnh cho XenForo 2

NB: Bạn sẽ cần một ít kiến thức về html và CSS cơ bản cho việc này. Ngoài ra, bạn sẽ cần phải làm quen với trình quản lý điều hướng xenForo.

Trước hết, đây là một ví dụ:

View attachment 249107-af91d1bcfef4209add5656b5c0ca363d.mp4
​

Điều này có thể hữu ích khi menu lớn và bạn muốn có nhiều cột. Trong trường hợp này, nó là một menu có liên kết đến một trang web khác, vì vậy cũng rất tuyệt nếu có biểu tượng của trang web.

Giai đoạn 1:

• Lưu ý id của mục điều hướng cấp cao nhất là có menu lớn.
• Thêm phần sau vào extra.less để tạo cột (thay đổi văn bản màu đỏ thành id mục điều hướng của bạn và độ rộng cho phù hợp)

li.id-of-navitem .menu-content
{width:520px;
-webkit-column-width: 172px;
     -moz-column-width: 172px;
     column-width: 172px;
-webkit-column-gap: 2px;
     -moz-column-gap: 2px;
     column-gap: 2px;}

Chiều rộng và chiều rộng/khoảng cách cột có thể là những gì bạn thích. Trong trường hợp này, chiều rộng 520px với 3 cột và khoảng cách giữa 2px. Lưu ý rằng (3 x 172) + (2 x 2) = 520.

Bạn cần kiểm tra xem trình đơn thả xuống không quá rộng ở chiều rộng trình duyệt hẹp nhất ngay trước điểm ngắt đáp ứng. Điều này tất nhiên sẽ phụ thuộc vào vị trí của mục cấp cao nhất. Nếu nó quá rộng, bạn sẽ nhận được thanh cuộn ngang đáng sợ

Như bạn có thể thấy ở đây, 520px đặt nó ở ngay giới hạn cho mục điều hướng này, nhưng ở mục cấp cao nhất đầu tiên hoặc thứ hai, nó có thể rộng hơn.

​

Tuy nhiên:

Bạn có thể bù lại menu thả xuống (ví dụ: di chuyển tất cả sang bên trái) bằng cách thêm vị trí vào CSS ở trên

position:relative;
left:-100px;

Giai đoạn 2: Hình ảnh

Đây chỉ là tiêu đề của mục con đầu tiên (menu con). Nhiều người không nhận ra việc biến tiêu đề menu con thành hình ảnh dễ dàng như thế nào bằng cách sử dụng thẻ html img thay vì văn bản.

Vì vậy, trong danh sách trình quản lý điều hướng của bạn, mục con đầu tiên ở đây là logo:

​

Trước tiên, bạn sẽ cần biết vị trí hình ảnh (đường dẫn đến hình ảnh), tạo tên class và thuộc tính alt để thay thế văn bản màu đỏ.

<img class="nav-image" src="path-to-image" style="width:152px;height:auto" alt="description" />

NB: Chiều rộng 152px trong trường hợp này để chứa padding 10px ở hai bên trên cột 172px.

Ở giai đoạn này, tất cả sẽ hoạt động nhưng bạn có thể làm một số việc khác:

Giai đoạn 3 (tùy chọn) làm cho logo trở thành mục duy nhất trong cột 1

Để như vậy, khoảng trống dưới logo sẽ được sử dụng bởi một số mục văn bản của menu con trong danh sách. Đó có thể là những gì bạn muốn, nhưng nếu bạn muốn logo nằm riêng trong cột đó, bạn có thể tạo cho nó một lề bên dưới chiếm không gian đó (như trong ví dụ. Nhưng bạn sẽ không muốn lề đó trong menu off canvas. Vì vậy, trừ khi chúng ta làm điều này:

//image only on column 1 on desktop but not off canvas

@media (min-width: @xf-responsiveMedium)
{.nav-image
    {margin-bottom:50px}}

(bất kỳ class nào bạn đã cho nó trong thẻ hình ảnh trong trình quản lý điều hướng). Kích thước lề sẽ phụ thuộc vào chiều cao của menu thả xuống khi bạn đã điền nó với tất cả các mục menu con. Bạn có thể tính toán điều này bằng cách thêm chiều cao của các mục menu con (nếu không sẽ sử dụng khoảng trống đó) vào chiều cao logo hoặc chỉ sử dụng thử và sai.

Bây giờ đến phần Columbo "chỉ một điều nữa ..."

Khi bạn nhấp vào mục cấp cao nhất, hình ảnh (kích thước đầy đủ và có lề dưới) hiện trông rất ngu ngốc trong hàng điều hướng phụ.

​

Vì vậy, hãy loại bỏ lề và giảm kích thước:

​

.p-navEl-link .nav-image
{margin-bottom:0px;
    width:60px!important;
vertical-align:top
}

hoặc bạn có thể chỉ cần loại bỏ nó:

.p-navEl-link .nav-image
{display:none;
}

Giai đoạn 4 (tùy chọn) làm cho nó thả xuống khi di chuột

Thêm vào extra.less:

@media (min-width: (@xf-responsiveMedium + 1))

{
    .has-no-touchevents .p-nav, .has-no-touchevents .p-sectionLinks
    {
        .p-navEl[data-has-children]
            {
                position: relative;
                &:hover:not(.is-selected) .menu
                {
                    display: block;
                    opacity: 1;
                    top: @header-navHeight;
                    z-index: @zIndex-4;
                
                }
                .p-navEl-splitTrigger { pointer-events: none; }
        }
        .hScroller { overflow: visible; }
        .hScroller-scroll
        {
            margin-bottom: 0 !important;
            overflow: visible;
            padding-bottom: 0 !important;
        }
    }
    .has-no-touchevents .p-sectionLinks .p-navEl[data-has-children]:hover:not(.is-selected) .menu { top: @header-subNavHeight; }
}

Chúc các bạn thành công.

Nguồn: xenforo.com​