Đưa ra sự lựa chọn các tab navigation dropdown menu

[PVS]

Đưa ra sự lựa chọn các tab navigation dropdown menu

Hướng dẫn này sẽ giúp cho bạn thấy làm thế nào để thiết lập navigation XenForo của bạn để cho phép Dropdowns trên tất cả các tab và nó chủ yếu là các skin mà muốn nhiều tùy chỉnh, không gian rõ ràng trong các tiêu đề, hoặc chỉ muốn nổi bật so với phần còn lại. Theo mặc định, XenForo chọn để hiển thị các tab hiện tại mà không có một menu và hiển thị nội dung của menu bên trong lớp 'tabLinks', như vậy:

​

Khi bạn di chuột qua tab được chọn, một menu sẽ hiển thị, nhưng đây không phải là trường hợp khi bạn di chuột qua tab được chọn.

Vì vậy, cho phép bắt đầu! Trước tiên, bạn cần phải đi đến Appearance > Styles của bạn sau đó điều hướng đến style lựa chọn của bạn> Templates > navigation. Trong template này, bạn sẽ thấy một block mã cho mỗi tab. Dưới đây là những gì trông thấy ở tab Forum:

        <!-- forums -->
        <xen:if is="{$tabs.forums}">
            <li class="navTab forums {xen:if $tabs.forums.selected, 'selected'} Popup PopupControl PopupClosed">

                <a href="{$tabs.forums.href}" class="navLink">{$tabs.forums.title}</a>
                <a href="{$tabs.forums.href}" class="SplitCtrl" rel="Menu"></a>

                <div class="{xen:if {$tabs.forums.selected}, 'tabLinks'} Menu JsOnly tabMenu">
                    <div class="primaryContent menuHeader">
                        <h3>{$tabs.forums.title}</h3>
                        <div class="muted">{xen:phrase quick_links}</div>
                    </div>
                    <ul class="secondaryContent blockLinksList">
                    <xen:hook name="navigation_tabs_forums">
                        <xen:if is="{$visitor.user_id}"><li><a href="{xen:link 'forums/-/mark-read', $forum, 'date={$serverTime}'}" class="OverlayTrigger">{xen:phrase mark_forums_read}</a></li></xen:if>
                        <xen:if is="{$canSearch}"><li><a href="{xen:link search, '', 'type=post'}">{xen:phrase search_forums}</a></li></xen:if>
                        <xen:if is="{$visitor.user_id}"><li><a href="{xen:link 'watched/threads'}">{xen:phrase watched_threads}</a></li></xen:if>
                        <li><a href="{xen:link 'find-new/threads'}">{xen:phrase whats_new}</a></li>
                    </xen:hook>
                    </ul>
                </div>
            </li>
        </xen:if>

Mặc dù đây là tab forum, thay đổi mã là như nhau.

Đầu tiên, tìm:

<li class="navTab forums {xen:if $tabs.forums.selected, 'selected', 'Popup PopupControl PopupClosed'}">

Thay bằng:

<li class="navTab forums {xen:if $tabs.forums.selected, 'selected'} Popup PopupControl PopupClosed">

Cũng trong template navigation, tìm:

<div class="{xen:if {$tabs.forums.selected}, 'tabLinks', 'Menu JsOnly tabMenu'}">

Thay bằng:

<div class="{xen:if {$tabs.forums.selected}, 'selectedMenu'} Menu JsOnly tabMenu">

Sau đó vào template EXTRA.css và thêm đoạn code dưới đây:

.navTabs .navTab.selected .SplitCtrl {
    display: block;
}

​

Vì vậy, hiện tại chúng tôi có một khoảng cách, và có hai điều chúng ta có thể làm được điều này, và cách mà bạn lựa chọn là hoàn toàn vào bạn:

1. Chúng tôi giữ tabLinks đó như là một danh sách liên kết cũng như các menu chúng ta chỉ cần thêm, hoặc
2. Chúng tôi loại bỏ nó hoàn toàn.

Đây là nơi bạn chia đường dẫn, tùy theo bạn có thể chọn ghi nhớ để không thêm bất kỳ các thay đổi từ phương pháp ngược lại.

Sử dụng phương pháp đầu tiên

Để bắt đầu, chúng tôi về cơ bản cần phải lặp HTML sau đó vị trí của nó khác nhau. Vì vậy, vẫn còn trong các lĩnh vực của tab forum, tôi thêm vào code này trên mã hiển thị menu.

                <xen:if is="{$tabs.forums.selected}">
                <div class="tabLinks">
                    <div class="primaryContent menuHeader">
                        <h3>{$tabs.forums.title}</h3>
                        <div class="muted">{xen:phrase quick_links}</div>
                    </div>
                    <ul class="secondaryContent blockLinksList">
                    <xen:hook name="navigation_tabs_forums">
                        <xen:if is="{$visitor.user_id}"><li><a href="{xen:link 'forums/-/mark-read', $forum, 'date={$serverTime}'}" class="OverlayTrigger">{xen:phrase mark_forums_read}</a></li></xen:if>
                        <xen:if is="{$canSearch}"><li><a href="{xen:link search, '', 'type=post'}">{xen:phrase search_forums}</a></li></xen:if>
                        <xen:if is="{$visitor.user_id}"><li><a href="{xen:link 'watched/threads'}">{xen:phrase watched_threads}</a></li></xen:if>
                        <li><a href="{xen:link 'find-new/threads'}">{xen:phrase whats_new}</a></li>
                    </xen:hook>
                    </ul>
                </div>
                </xen:if>

Một lần nữa, tất cả tôi đã làm là sao chép menu, thay đổi lớp tabLinks, và quấn nó tất cả trong một điều kiện đó đảm bảo nó chỉ xuất hiện trên các trang bảng chọn.

Chúng ta cũng cần thêm một dòng CSS vào EXTRA.css để sửa chữa các vị trí:

.navTabs .navTab.Popup {
    position: static;
}

​

Và khi tất cả được nói và làm, với các tùy chọn đầu tiên bạn có kết quả cuối cùng này:

​

Phương pháp thứ hai, để gỡ bỏ nó là như sau:

Cách XenForo làm việc là nó khá nhiều bản đồ ra các yếu tố chiều cao tiêu đề, cho biết thêm tất cả chúng, và do đó bạn có thể trượt thanh đăng nhập lại và di chuyển các header (với CSS) trở về đầu trang. Vì vậy, chúng tôi về cơ bản cần phải cho các div #headerProxy rằng nó đã bị mất một số trọng lượng. Kể từ khi chuyển hướng và tabLink div chính là cả hai cùng một chiều cao, chúng ta chỉ cần chia chiều cao của cả hai. Nhưng kể từ khi XenForo được nhân lên trong những nơi đầu tiên, chúng tôi chỉ xóa các multiplication. Vì vậy, trở lại trong tập tin EXTRA.css của bạn, hãy thêm đoạn code này:

#headerMover #headerProxy
{
    height: {xen:calc '@headerLogoHeight + @headerTabHeight + 2'}px;
}

#navigation .pageContent
{
    height: {xen:calc '@headerTabHeight + 2'}px;
    position: relative;
}

​

Điều này đã bị loại bỏ mà thêm không gian, nhưng bây giờ tìm kiếm không có chỗ nghỉ ngơi khác hơn là trên cùng của nội dung khác. Bạn có thể chọn những gì bạn muốn, nhưng các mã sau đây sẽ định vị được sự độc đáo trong tiêu đề canh bên phải. Nó cũng dọn dẹp nó lên một chút, background-wise:

#QuickSearch {
    top: -70px;
}

#QuickSearch,
#QuickSearch .formPopup  {
    background: none;
}

#QuickSearch.active {
    background: @content.background-color;
}

​

Và khi tất cả được nói và làm, với tùy chọn thứ hai bạn có kết quả cuối cùng này:

​

LƯU Ý: Các khu vực privateTabs (username, inbox, alerts, logout) đã có những menu thả xuống (tiết kiệm cho logout, nhưng tôi không nghĩ rằng đăng xuất nên có một thả xuống). Vì vậy, bạn phải sử dụng phán đoán tốt nhất của bạn ở đây. Đối với tôi, tôi chỉ cần loại bỏ các tablinks cho các tab này, kể từ khi các liên kết dưới (Personal Details, Conversations, Your News Feed, Likes You've Received) hiển thị tất cả dưới thả xuống tên anyways).

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

Nguồn: xenforo.com​

 

[phankt]

Bác ơi. làm sao để làm header như idichvuseo.. menu và search box

 

[tuna]

Bác ơi. làm sao để làm header như idichvuseo.. menu và search box
View attachment 15013

làm như trên :0

 

[secpol]

Trong navigation của mình nó như bên dưới thì làm như nào @PVS ?

<!-- forums -->
        <xen:if is="{$tabs.forums}">
            <li class="navTab forums {xen:if $tabs.forums.selected, 'selected'} Popup PopupControl PopupClosed">
           
                <a href="{$tabs.forums.href}" class="navLink">{$tabs.forums.title}</a>
                <a href="{$tabs.forums.href}" class="SplitCtrl" rel="Menu"></a>
               
                <div class="{xen:if {$tabs.forums.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} forumsTabLinks">
                    <div class="primaryContent menuHeader">
                        <h3>{$tabs.forums.title}</h3>
                        <div class="muted">{xen:phrase quick_links}</div>
                    </div>
                    <ul class="secondaryContent blockLinksList">
                    <xen:hook name="navigation_tabs_forums">
                        <xen:if is="{$visitor.user_id}"><li><a href="{xen:link 'forums/-/mark-read', $forum, 'date={$serverTime}'}" class="OverlayTrigger">{xen:phrase mark_forums_read}</a></li></xen:if>
                        <xen:if is="{$canSearch}"><li><a href="{xen:link search, '', 'type=post'}">{xen:phrase search_forums}</a></li></xen:if>
                        <xen:if is="{$visitor.user_id}">
                            <li><a href="{xen:link 'watched/forums'}">{xen:phrase watched_forums}</a></li>
                            <li><a href="{xen:link 'watched/threads'}">{xen:phrase watched_threads}</a></li>
                        </xen:if>
                        <li><a href="{xen:link 'find-new/posts'}" rel="nofollow">{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}</a></li>
                    </xen:hook>
                    </ul>
                </div>
            </li>
        </xen:if>

Temp mặc định.

 

[dakhucquan.net]

bài này khó hiểu quá, m làm theo y đúc mất luôn menu nhỏ dưới luôn