Современный облачный хостинг провайдер | Aéza
Контакты ООО "АЕЗА ГРУПП" ИНН 2312304914 ОГРН 1212300056430

Ищу Modern off canvas menu system

Pokschubin

Pokschubin

Заблокирован
Сообщения
603
Реакции
195
Баллы
3,370
Описание:
  • The menu remains visible at all times no matter where you are on a page:
  • The main menu components are contained in a flyout section
  • The submenu items are visible for the area the user is in
  • The user can select if they want the menu bar on the left or right
  • A tablet user can use the menu without their hand leaving the side of the tablet
  • A mobile phone user can always access the menu as it remains across the top
  • ...and more
BUT, to implement it is not for the faint hearted as it requires extensive template mods.

Implementation
The implementation is based on a stock Xenforo install and there are 4 components to its implementation:
  • Template edits - small changes to some templates, complete template changes and 1 new template to be created
  • Script file - there is one script file for the off canvas slide out menu that needs to be uploaded
  • Styles - there are some style files that need to be uploaded including font-awesome files
  • User Option - a new user option needs to be created to allow users to select where they want the menu bar, either left or right of the screen
1. Template Changes
(NOTE: all templates have my comments in them)
a) Header:
Код: 
<xen:edithint template="header.css" />

<xen:hook name="header">
<div id="header">
    <xen:include template="logo_block" />
    <xen:include template="navigation" />

<xen:comment> IB removed search and navigation for side menu </xen:comment>

</div>
</xen:hook>

b) Navigation
NOTE: This is the only template you will need to modify yourself. I have hard coded the main menu links in it so I can assign a different icon to each one and control their display order. I have left some examples of some other XF addon links in the template for you
PHP: 
<xen:comment> IB replaced entire template for slide menu system </xen:comment>

<xen:edithint template="navigation.css" />

<div class="menu_button" role="navigation">
    <a href="#" id="trigger"><span class="menu_label">Menu<br /></span><i class="fa fa-bars"></i></a>
</div>

<!-- SLIDE MENU -->
<div class="slidemenu closed">
    <header>
        <h2>Menu <a href="#" id="close"><img alt="Close" src="styles/slide_menu_close.png"></a></h2>
    </header>

    <xen:if is="{$canSearch}"><xen:include template="search_bar" /></xen:if>

    <ul class="maintabs">
        <li><a href="{$homeLink}" class="navLink"><i class="fa fa-home"></i>{xen:phrase home}</a></li>

        <!-- forums -->
        <xen:if is="{$tabs.forums}">
            <li><a href="{$tabs.forums.href}" class="navLink"><i class="fa fa-comments"></i>{$tabs.forums.title}</a></li>
        </xen:if>

        <xen:if is="{$tabs.members}">
            <li><a href="members" class="navLink"><i class="fa fa-user"></i>{$tabs.members.title}</a></li>
        </xen:if>

<xen:comment> IB example of other menu items for addons
        <li><a href="{xen:link showcase}" class="navLink"><i class="fa fa-plane"></i>{xen:phrase nflj_showcase}</a></li>
        <li><a href="{xen:link hotspots}" class="navLink"><i class="fa fa-arrows"></i>{xen:phrase waindigo_hotspots_hotspots}</a></li>
        <li><a href="{xen:link classifieds}" class="navLink"><i class="fa fa-tags"></i>{xen:phrase classifieds}</a></li>
        <li><a href="{xen:link events}" class="navLink"><i class="fa fa-bullhorn"></i>{xen:phrase events}</a></li>
        <li><a href="{xen:link groups}" class="navLink"><i class="fa fa-users"></i>{xen:phrase snog_socialgroups_groups}</a></li>
        <li><a href="{xen:link media}" class="navLink"><i class="fa fa-picture-o"></i>{xen:phrase xengallery_media}</a></li>
        <li><a href="http://www.clearprop.com.au/" target="_blank" class="navLink"><i class="fa fa-shopping-cart"></i>Pilot Shop</a></li>
        <li><a href="{xen:link resources}" class="navLink"><i class="fa fa-plus"></i>{xen:phrase resources}</a></li>
        <li><a href="{xen:link tutorials}" class="navLink" target="new"><i class="fa fa-graduation-cap"></i>Tutorials</a></li>
</xen:comment>

    </ul>

    <!-- MOBILE VIEW ONLY SUB MENUS -->
    <div class="mobile_sub_menu">
        <ul class="secondaryContent blockLinksList">
            <!-- account -->
            <xen:if is="{$tabs.account.selected}">
                <xen:hook name="navigation_tabs_account">
                    <li><a href="{xen:link account/personal-details}">Details</a></li>
                    <li><a href="{xen:link conversations}">Private Msg's</a></li>
                    <xen:if is="{$xenOptions.enableNewsFeed}"><li><a href="{xen:link account/news-feed}">My Feed</a></li></xen:if>
                    <li><a href="{xen:link account/likes}">Likes</a></li>
                </xen:hook>
            </xen:if>
            <!-- conversations -->
            <xen:if is="{$tabs.inbox.selected}">
                <li><a href="{xen:link conversations}">Private Msg's</a></li>
                <li><a href="{xen:link conversations/starred}">Starred Msg's</a></li>
                <li><a href="{xen:link conversations/yours}">Msg's I Started</a></li>
            </xen:if>
            <!-- extra tabs: home -->
            <xen:if is="{$extraTabs.home}">
                <xen:foreach loop="$extraTabs.home" key="$extraTabId" value="$extraTab">
                    <xen:if is="{$extraTab.linksTemplate}">
                        <div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} {$extraTabId}TabLinks">
                            {xen:raw $extraTab.linksTemplate}
                        </div>
                    </xen:if>
                </xen:foreach>
            </xen:if>
            <!-- forums -->
            <xen:if is="{$tabs.forums.selected}">
                <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">Mark Read</a></li></xen:if>
                    <xen:if is="{$canSearch}"><li><a href="{xen:link search, '', 'type=post'}">Search</a></li></xen:if>
                    <xen:if is="{$visitor.user_id}">
                        <li><a href="{xen:link 'watched/forums'}">Tagged Forums</a></li>
                        <li><a href="{xen:link 'watched/threads'}">Tagged Threads</a></li>
                    </xen:if>
                    <li><a href="{xen:link 'find-new/posts', '', 'recent=21'}" rel="nofollow">New (21days)</a></li>
                </xen:hook>
            </xen:if>
            <!-- extra tabs: middle -->
            <xen:if is="{$extraTabs.middle}">
                <xen:foreach loop="$extraTabs.middle" key="$extraTabId" value="$extraTab">
                    <xen:if is="{$extraTab.linksTemplate}">
                        <div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} {$extraTabId}TabLinks">
                            {xen:raw $extraTab.linksTemplate}
                        </div>
                    </xen:if>
                </xen:foreach>
            </xen:if>
            <!-- extra tabs: end -->
            <xen:if is="{$extraTabs.end}">
                <xen:foreach loop="$extraTabs.end" key="$extraTabId" value="$extraTab">
                    <xen:if is="{$extraTab.linksTemplate}">
                        <div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} {$extraTabId}TabLinks">
                            {xen:raw $extraTab.linksTemplate}
                        </div>
                    </xen:if>
                </xen:foreach>
            </xen:if>
            <!-- members -->
            <xen:if is="{$tabs.members.selected}">
                <xen:hook name="navigation_tabs_members">
                    <li><a href="{xen:link members}">Notable Users</a></li>
                    <xen:if is="{$xenOptions.enableMemberList}"><li><a href="{xen:link members/list}">Members</a></li></xen:if>
                    <li><a href="{xen:link online}">{xen:phrase current_visitors}</a></li>
                    <xen:if is="{$xenOptions.enableNewsFeed}"><li><a href="{xen:link recent-activity}">{xen:phrase recent_activity}</a></li></xen:if>
                    <xen:if is="{$canViewProfilePosts}"><li><a href="{xen:link find-new/profile-posts}">Profile Posts</a></li></xen:if>
                </xen:hook>
            </xen:if>
        </ul>
    </div>
</div>

<!-- MENU COLUMN -->
<div class="menu_column">
    <!-- user menu -->
    <xen:include template="navigation_visitor_tab" />

    <!-- PC VIEW ONLY SUB MENUS -->
    <div class="sub_menu_links">
        <ul class="secondaryContent blockLinksList">
            <!-- account -->
            <xen:if is="{$tabs.account.selected}">
                <xen:hook name="navigation_tabs_account">
                    <li><a href="{xen:link account/personal-details}">Details</a></li>
                    <li><a href="{xen:link conversations}">Private Msg's</a></li>
                    <xen:if is="{$xenOptions.enableNewsFeed}"><li><a href="{xen:link account/news-feed}">My Feed</a></li></xen:if>
                    <li><a href="{xen:link account/likes}">Likes</a></li>
                </xen:hook>
            </xen:if>
            <!-- conversations -->
            <xen:if is="{$tabs.inbox.selected}">
                <li><a href="{xen:link conversations}">Private Msg's</a></li>
                <li><a href="{xen:link conversations/starred}">Starred Msg's</a></li>
                <li><a href="{xen:link conversations/yours}">Msg's I Started</a></li>
            </xen:if>
            <!-- extra tabs: home -->
            <xen:if is="{$extraTabs.home}">
                <xen:foreach loop="$extraTabs.home" key="$extraTabId" value="$extraTab">
                    <xen:if is="{$extraTab.linksTemplate}">
                        <div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} {$extraTabId}TabLinks">
                            {xen:raw $extraTab.linksTemplate}
                        </div>
                    </xen:if>
                </xen:foreach>
            </xen:if>
            <!-- forums -->
            <xen:if is="{$tabs.forums.selected}">
                <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">Mark Read</a></li></xen:if>
                    <xen:if is="{$canSearch}"><li><a href="{xen:link search, '', 'type=post'}">Search</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', '', 'recent=21'}" rel="nofollow">New (21days)</a></li>
                </xen:hook>
            </xen:if>
            <!-- extra tabs: middle -->
            <xen:if is="{$extraTabs.middle}">
                <xen:foreach loop="$extraTabs.middle" key="$extraTabId" value="$extraTab">
                    <xen:if is="{$extraTab.linksTemplate}">
                        <div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} {$extraTabId}TabLinks">
                            {xen:raw $extraTab.linksTemplate}
                        </div>
                    </xen:if>
                </xen:foreach>
            </xen:if>
            <!-- extra tabs: end -->
            <xen:if is="{$extraTabs.end}">
                <xen:foreach loop="$extraTabs.end" key="$extraTabId" value="$extraTab">
                    <xen:if is="{$extraTab.linksTemplate}">
                        <div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} {$extraTabId}TabLinks">
                            {xen:raw $extraTab.linksTemplate}
                        </div>
                    </xen:if>
                </xen:foreach>
            </xen:if>
            <!-- members -->
            <xen:if is="{$tabs.members.selected}">
                <xen:hook name="navigation_tabs_members">
                    <li><a href="{xen:link members}">Notable Users</a></li>
                    <xen:if is="{$xenOptions.enableMemberList}"><li><a href="{xen:link members/list}">{xen:phrase registered_members}</a></li></xen:if>
                    <li><a href="{xen:link online}">{xen:phrase current_visitors}</a></li>
                    <xen:if is="{$xenOptions.enableNewsFeed}"><li><a href="{xen:link recent-activity}">{xen:phrase recent_activity}</a></li></xen:if>
                    <xen:if is="{$canViewProfilePosts}"><li><a href="{xen:link find-new/profile-posts}">{xen:phrase new_profile_posts}</a></li></xen:if>
                </xen:hook>
            </xen:if>
        </ul>
    </div>

</div>

c) Navigation.css
PHP: 
/* IB made multiple changes to template for slide menu system */


#col_right {margin-right:4.5rem; border-right: 1px solid @primaryLighter;}
#col_left {margin-left:4.5rem; border-left: 1px solid @primaryLighter;}
#loginBarHandle {display:none;}

.menu_label {padding-left:4px;}
#col_right .menu_button {position:fixed; top:3px; right:14px; z-index:200;}
#col_left .menu_button {position:fixed; top:3px; left:14px; z-index:200;}
.menu_button a i {font-size:3.1rem; line-height:3.1rem;}

.slidemenu {
    position: fixed;
    z-index: 1000;
    height: 100%;
    width: 300px;
    background: @contentBackground;}

#col_right .slidemenu {
    right: 0;
    top: 0;
    -webkit-transition: right 0.3s ease, -webkit-box-shadow 0.3s ease 0.2s;
    transition: right 0.3s ease, box-shadow 0.3s ease 0.2s;
    -webkit-box-shadow: -6px 0px 6px 0px @primaryDarker;
    -moz-box-shadow: -6px 0px 6px 0px @primaryDarker;
    box-shadow: -6px 0px 6px 0px @primaryDarker;}

#col_left .slidemenu {
    left: 0;
    top: 0;
    -webkit-transition: left 0.3s ease, -webkit-box-shadow 0.3s ease 0.2s;
    transition: left 0.3s ease, box-shadow 0.3s ease 0.2s;
    -webkit-box-shadow: 6px 0px 6px 0px @primaryDarker;
    -moz-box-shadow: 6px 0px 6px 0px @primaryDarker;
    box-shadow: 6px 0px 6px 0px @primaryDarker;}

#col_right .slidemenu.closed {
    right: -300px;
    -webkit-box-shadow: 0 0 0 @primaryLighter;
    -moz-box-shadow: 0 0 0 @primaryLighter;
    box-shadow: 0 0 0 @primaryLighter;}

#col_left .slidemenu.closed {
    left: -300px;
    -webkit-box-shadow: 0 0 0 @primaryLighter;
    -moz-box-shadow: 0 0 0 @primaryLighter;
    box-shadow: 0 0 0 @primaryLighter;}

.slidemenu #close {float:right; margin-right:6px;}

.slidemenu h2 {
    padding-left: .5em;
    color: @primaryDarker;
    margin: 10px 0px;
    font-size: 18pt;
    text-align: left;}

.slidemenu ul {padding:0; margin:0;}

.slidemenu .maintabs {margin-top:0.4em; margin-left:0.2em;}

.slidemenu .maintabs li {
    color:@primaryDarker;
    width:23%;
    height:75px;
    overflow:hidden;
    display:block;
    float:left;
    margin-right:5px;
    text-align:center; }

.slidemenu .maintabs li a {
    color:@primaryDarker;
    font-size:12px;
    overflow:hidden;
    display:block;
    padding:0;
    text-align:center;}

.slidemenu .maintabs li a i {
    font-size:45px;
    overflow:hidden;
    display:block;
    line-height:45px;
    padding:0;
    text-align:center;}

.slidemenu .maintabs li a:hover {
    background: @primaryLighterStill;
    border-color: @primaryLighterStill;
    text-decoration:none;}

.menu_column {
    position: fixed;
    overflow: hidden;
    text-align: center;
    width: 4.5rem;
    z-index: 100;
    height: 100%;
    margin-top:75px;
    background: @contentBackground;}

#col_right .menu_column {top:0;    right:0;}
#col_left .menu_column {top:0; left:0;}
.visitorTabs {width:100%;}
.visitorTabs li {padding:10px 0px;}
.visitorTabs li a, .visitorTabs li {width:100%; display:block;}
.visitorTabs li a i {font-size:22px;}

.navTab .accountPopup img {
    border: 1px solid @primaryDarker;
    border-radius: 5px;
    height: 30x;
    width: 30px;}

#AccountMenu, #AlertsMenu, #ConversationsMenu {z-index:100;}

/*-------------------------*/
/* Account Popup Menu */
#AccountMenu
{
    width: 274px;
}

#AccountMenu .menuHeader
{
    position: relative;
}

    #AccountMenu .menuHeader .avatar
    {
        float: left;
        margin-right: 10px;
    }

    #AccountMenu .menuHeader .visibilityForm
    {
        margin-top: 10px;
        color: @primaryMedium;
    }

    #AccountMenu .menuHeader .links .fl
    {
        position: absolute;
        bottom: 10px;
        left: {xen:calc '10 + 10 + 96'}px;
    }

    #AccountMenu .menuHeader .links .fr
    {
        position: absolute;
        bottom: 10px;
        right: 10px;
    }

#AccountMenu .menuColumns
{
    overflow: hidden; zoom: 1;
    padding: 2px;
}

    #AccountMenu .menuColumns ul
    {
        float: left;
        padding: 0;
        max-height: none;
        overflow: hidden;
    }

        #AccountMenu .menuColumns a,
        #AccountMenu .menuColumns label
        {
            width: 115px;
        }

#AccountMenu .statusPoster textarea
{
    width: 245px;
    margin: 0;
    resize: vertical;
    overflow: hidden;
}

#AccountMenu .statusPoster .submitUnit
{
    margin-top: 5px;
    text-align: right;
}

    #AccountMenu .statusPoster .submitUnit .statusEditorCounter
    {
        float: left;
        line-height: 23px;
        height: 23px;
    }

/* ---------------------------------------- */
/* Inbox, Alerts Popups */

.navPopup
{
    width: 260px;
}

.navPopup a:hover,
.navPopup .listItemText a:hover
{
    background: none;
    text-decoration: underline;
}

    .navPopup .menuHeader .InProgress
    {
        float: right;
        display: block;
        width: 20px;
        height: 20px;
    }

.navPopup .listPlaceholder
{
    max-height: 350px;
    overflow: auto;
}

    .navPopup .listPlaceholder ol.secondaryContent
    {
        padding: 0 10px;
    }

        .navPopup .listPlaceholder ol.secondaryContent.Unread
        {
            background-color: @inlineModChecked.background-color;
        }

.navPopup .listItem
{
    overflow: hidden; zoom: 1;
    padding: 5px 0;
    border-bottom: 1px solid @primaryLighterStill;
}

.navPopup .listItem:last-child
{
    border-bottom: none;
}

.navPopup .PopupItemLinkActive:hover
{
    margin: 0 -8px;
    padding: 5px 8px;
    border-radius: 5px;
    background-color: @primaryLighterStill;
    cursor: pointer;
}

.navPopup .avatar
{
    float: left;
}

    .navPopup .avatar img
    {
        width: 32px;
        height: 32px;
    }

.navPopup .listItemText
{
    margin-left: 37px;
}

    .navPopup .listItemText .muted
    {
        font-size: 9px;
    }

    .navPopup .unread .listItemText .title,
    .navPopup .listItemText .subject
    {
        font-weight: bold;
    }

.navPopup .sectionFooter .floatLink
{
    float: right;
}

.itemCount {
    font-weight: bold;
    font-size: 9px;
    color: white;
    background-color: #e03030;
    padding: 0 2px;
    border-radius: 2px;
    position: absolute;
    top: 0px;
    right: 10px;
    line-height: 16px;
    min-width: 12px;
    _width: 12px;
    text-align: center;
    text-shadow: none;
    white-space: nowrap;
    word-wrap: normal;
    box-shadow: 2px 2px 5px rgba(0,0,0, 0.25);
    height: 16px;}

.itemCount.Zero {display: none;}

.ac_left {left: 72px !important; top: 75px !important;}
.ac_right {right: 72px !important; top: 75px !important; left:auto !important;}
.con_left {left:72px !important; top:130px !important;}
.con_right {right:72px !important; top:130px !important; left:auto !important;}
.alert_left {left: 72px !important; top: 172px !important;}
.alert_right {right: 72px !important; top: 172px !important; left:auto !important;}

.whats_new {font-size:16px; font-weight:bold;}

/*----------------------*/
/* Reg, Login Button */
.reg_button {
    background-color: white;
    padding: 3px;
    border: 1px solid @secondaryLight;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0px 2px 5px rgba(0,0,0, 0.2);
    display: block;
    cursor: pointer;}

.reg_button .inner {
    font-weight: bold;
    font-size: 12pt;
    font-family: @button.font-family;
    color: @textCtrlBackground;
    background: @secondaryMedium url('@imagePath/xenforo/gradients/form-button-white-25px.png') repeat-x center -7px;
    border-radius: 4px;
    display: block;}

.reg_button:hover .inner {
    text-decoration: none;
    background-color: @primaryDarker;}

.reg_button:active {
    box-shadow: 0 0 3px rgba(0,0,0, 0.2);
    position: relative;
    top: 2px;}

.sub_menu_links .secondaryContent {background-color: @contentBackground; border-bottom-style: none;}
.sub_menu_links .blockLinksList a {padding: 8px 1px;}

.footer_links {position:fixed; bottom:0px; width:4.5rem;}

<xen:if is="@enableResponsive">
    @media (max-height:580px), (max-width:580px){
        #col_right, #col_left {margin:32px 0 0 0; border:none;}
               #AccountMenu{overflow-y:scroll; max-height:90%;}
      
        .menu_label, .sub_menu_links {display:none}
        .menu_button a i {font-size:32px; line-height:32px; margin-top:-3px; color:@textCtrlBackground;}

        .slidemenu {width:100%; height:100%; background:#fff; overflow-y:scroll; overflow-x:hidden; z-index:1000; position:fixed; top:0; right:0;}
        #col_right .slidemenu.closed {right:-100%;}
        #col_left .slidemenu.closed {left:-100%;}

        .menu_column {width:100%; height:32px; margin-top:0px; display:block; background-color: @primaryLightish;}
        #col_right .menu_column {text-align:left;}
        #col_left .menu_column {text-align:left; padding-left:3rem;}

        .navTab .accountPopup img {margin:0px 10px;}
        .visitorTabs {position:fixed; top:0px; width:100%; height:32px; text-align:justify; margin:0 auto;}
        .visitorTabs li {width:14%; height:32px; overflow:hidden; display:inline-block; float:left; text-align:center; padding:0px;}
        .visitorTabs li a {height:32px; overflow:hidden; line-height:32px; display:block;}
        .visitorTabs li a i {color:#fff; font-size:24px; line-height:32px;}
        .visitorTabs li a i:hover {color:@primaryMedium;}

        .itemCount {position:relative;top:-10px; padding:3px 5px;}

        .whats_new {color:@textCtrlBackground; border:1px solid @textCtrlBackground;}

        .footer_links {position:static; width:100%;}

        .reg_button {width:130px; padding: 0px; float:right; margin-right:50px;}
        .reg_button .inner {font-size: 9pt;}

        .mobile_sub_menu {display:inline-block; width:100%; text-align:center;}
        .mobile_sub_menu ul li {
            background:@primaryDarker;
            width:30%;
            height:30px;
            border-radius:8px;
            overflow:hidden;
            display:block;
            float:left;
            margin:5px 3px 0px;
            text-align:center;
            vertical-align:middle;
            line-height:30px; }
        .mobile_sub_menu ul li a {
            color:#fff;
            text-decoration:none;
            font-size:11px;
            overflow:hidden;
            width:100%;
            height:30px;
            display:block;
            padding:0;
            text-align:center;}
        .mobile_sub_menu ul li a:hover{text-decoration:none; background:@primaryLighterStill;}

        .ac_left, .con_left, .alert_left, .ac_right, .alert_right, .con_right {left: 10px !important; top: 32px !important;}
    }

    @media (min-height:740px), (min-width:740px){
        .mobile_sub_menu{display:none;}}
</xen:if>

d) navigation_admin
NOTE: This is a new template that you will need to create...note the name of the template must be navigation_admin
PHP: 
<xen:comment> IB new template for admin component of slide menu </xen:comment>

<li class="navTab admin Popup PopupControl PopupClosed">
   <a href="admin.php" class="navLink NoPopupGadget" rel="Menu" target="_blank"><i class="fa fa-cogs"></i>
     <xen:if is="{$visitor.is_moderator} AND {$session.moderationCounts.total} OR {$visitor.is_moderator} && !{$xenOptions.reportIntoForumId} && {$session.reportCounts.total} !=0 OR {$visitor.is_admin} AND {$session.canAdminUsers} AND {$session.userModerationCounts.total}">
       <xen:set var="$totalCounts">{xen:calc '{$session.userModerationCounts.total} + {$session.reportCounts.total} + {$session.moderationCounts.total}'}</xen:set>
       <span class="itemCount {xen:if {$totalCounts}, 'alert'}">{$totalCounts}</span></a>
     </xen:if>
   </a>

   <div class="Menu" style="z-index:100;">
     <div class="menuHeader primaryContent">
       <xen:if is="{$visitor.is_admin}">
         <h3>
           <span class="Progress InProgress"></span>
           <a href="admin.php" class="concealed" target="_blank"><span class="itemLabel">{xen:phrase admin_control_panel}</span></a>
         </h3>
       <xen:else />
         <h3>{xen:phrase admin_control_panel}</h3>
       </xen:if>
     </div>

     <div id="AccountMenu">
       <div class="menuColumns secondaryContent">
         <ul class="col1 blockLinksList">
           <xen:if is="{$visitor.is_moderator} && !{$xenOptions.reportIntoForumId}">
             <li>
               <a href="{xen:link reports}" class="reportedItems modLink">
                 <span class="itemLabel">{xen:phrase reported_items_short}<xen:if is="{$session.reportCounts.total} !=0">:</xen:if></span>
                 <xen:if is="{$session.reportCounts.total} !=0">
                   <span class="itemCount {xen:if '({$session.reportCounts.total} AND {$session.reportCounts.lastUpdate} > {$session.reportLastRead}) OR {$session.reportCounts.assigned}', 'alert'}" title="{xen:if $session.reportCounts.lastUpdate, '{xen:phrase last_report_update}: {xen:datetime $session.reportCounts.lastUpdate}'}"><xen:if is="{$session.reportCounts.assigned}">{$session.reportCounts.assigned} / {$session.reportCounts.total}<xen:else />{$session.reportCounts.total}</xen:if></span>
                 </xen:if>
               </a>
             </li>
           </xen:if>
           <xen:if is="{$visitor.is_admin} AND {$session.canAdminUsers} AND {$session.userModerationCounts.total}">
             <li>
               <a href="admin.php?users/moderated" class="userModerationQueue modLink">
                 <span class="itemLabel">{xen:phrase users_awaiting_approval_short}:</span>
                 <span class="itemCount {xen:if {$session.userModerationCounts.total}, 'alert'}">{$session.userModerationCounts.total}</span>
               </a>
             </li>
           </xen:if>
         </ul>
         <ul class="col2 blockLinksList">
           <xen:if is="{$visitor.is_moderator} AND {$session.moderationCounts.total}">
             <li>
               <a href="{xen:link moderation-queue}" class="moderationQueue modLink">
                 <span class="itemLabel">{xen:phrase moderation_queue_short}:</span>
                 <span class="itemCount {xen:if {$session.moderationCounts.total}, 'alert'}">{$session.moderationCounts.total}</span>
               </a>
             </li>
           </xen:if>
           <xen:if is="{$visitor.is_admin}">
             <xen:if is="{$session.permissionTest}">
               <li>
                 <a href="{xen:link misc/reset-permissions}" class="permissionTest adminLink OverlayTrigger">
                   <span class="itemLabel">{xen:phrase permissions_from_x, 'name={$session.permissionTest.username}'}</span>
                 </a>
               </li>
             </xen:if>
           </xen:if>
         </ul>
       </div>
       <div class="menuColumns secondaryContent">
         <ul class="col1 blockLinksList">
           <xen:if is="{$visitor.is_admin}">
             <li>
               <a href="admin.php?users" target="_blank"><span class="itemLabel">{xen:phrase users}</span></a>
             </li>
             <li>
               <a href="admin.php?options" target="_blank"><span class="itemLabel">{xen:phrase admin_navigation_optionsLink}</span></a>
             </li>
             <li>
               <a href="admin.php?stats/daily" target="_blank"><span class="itemLabel">{xen:phrase daily_statistics}</span></a>
             </li>
           </xen:if>
         </ul>
         <ul class="col2 blockLinksList">
           <xen:if is="{$visitor.is_admin}">
             <li>
               <a href="admin.php?threads/reply-bans" target="_blank"><span class="itemLabel">{xen:phrase thread_reply_bans}</span></a>
             </li>
             <li>
               <a href="admin.php?style-properties" target="_blank"><span class="itemLabel">{xen:phrase style_properties}</span></a>
             </li>
             <li>
               <a href="admin.php?stats/monthly" target="_blank"><span class="itemLabel">{xen:phrase monthly_statistics}</span></a>
             </li>
           </xen:if>
         </ul>
       </div>
     </div>
   </div>
</li>

e) navigation_visitor_tab

PHP: 
<xen:edithint template="navigation.css" />

<ul class="visitorTabs">

   <xen:if is="{$visitor.user_id}">
     <xen:hook name="navigation_visitor_tabs_start" />
     <!-- account -->
     <li class="navTab account Popup PopupControl PopupClosed {xen:if $tabs.account.selected, 'selected'}">

       <xen:set var="$visitorHiddenUnread" value="{xen:calc '{$visitor.alerts_unread} + {$visitor.conversations_unread}'}" />
       <a href="{xen:link account}" class="navLink accountPopup NoPopupGadget" rel="Menu"><span><img src="{xen:helper avatar, $visitor, s}" alt="" /></span></a>

       <div class="Menu JsOnly {xen:if '{$visitor.customFields.menu}', 'ac_right', 'ac_left'}" id="AccountMenu">
         <div class="primaryContent menuHeader">
           <xen:avatar user="$visitor" size="m" class="NoOverlay plainImage" title="{xen:phrase view_your_profile}" />
    
           <h3><a href="{xen:link members, $visitor}" class="concealed" title="{xen:phrase view_your_profile}">{$visitor.username}</a></h3>
    
           <xen:if hascontent="true"><div class="muted"><xen:contentcheck>{xen:helper usertitle, $visitor}</xen:contentcheck></div></xen:if>
    
           <ul class="links">
             <li class="fl"><a href="{xen:link members, $visitor}">{xen:phrase your_profile_page}</a></li>
           </ul>
         </div>

         <!-- admin and moderator links -->
         <xen:if is="{$visitor.is_moderator} || {$visitor.is_admin}">
           <div class="menuColumns secondaryContent">
             <ul class="col1 blockLinksList">
               <xen:if is="{$visitor.is_moderator} && !{$xenOptions.reportIntoForumId}">
                 <li>
                   <a href="{xen:link reports}" class="reportedItems modLink">
                     <span class="itemLabel">{xen:phrase reported_items_short}<xen:if is="{$session.reportCounts.total} !=0">:</xen:if></span>
                     <xen:if is="{$session.reportCounts.total} !=0">
                       <span class="itemCount {xen:if '({$session.reportCounts.total} AND {$session.reportCounts.lastUpdate} > {$session.reportLastRead}) OR {$session.reportCounts.assigned}', 'alert'}" title="{xen:if $session.reportCounts.lastUpdate, '{xen:phrase last_report_update}: {xen:datetime $session.reportCounts.lastUpdate}'}"><xen:if is="{$session.reportCounts.assigned}">{$session.reportCounts.assigned} / {$session.reportCounts.total}<xen:else />{$session.reportCounts.total}</xen:if></span>
                     </xen:if>
                   </a>
                 </li>
               </xen:if>
             </ul>
             <ul class="col2 blockLinksList">
               <xen:if is="{$visitor.is_moderator} AND {$session.moderationCounts.total}">
                 <li>
                   <a href="{xen:link moderation-queue}" class="moderationQueue modLink">
                     <span class="itemLabel">{xen:phrase moderation_queue_short}:</span>
                     <span class="itemCount {xen:if {$session.moderationCounts.total}, 'alert'}">{$session.moderationCounts.total}</span>
                   </a>
                 </li>
               </xen:if>
               <xen:if is="{$visitor.is_admin} AND {$session.canAdminUsers} AND {$session.userModerationCounts.total}">
                 <li>
                   <a href="admin.php?users/moderated" class="userModerationQueue modLink">
                     <span class="itemLabel">{xen:phrase users_awaiting_approval_short}:</span>
                     <span class="itemCount {xen:if {$session.userModerationCounts.total}, 'alert'}">{$session.userModerationCounts.total}</span>
                   </a>
                 </li>
               </xen:if>
             </ul>
           </div>
         </xen:if>

         <div class="menuColumns secondaryContent">
           <ul class="col1 blockLinksList">
           <xen:hook name="navigation_visitor_tab_links1">
             <xen:if is="{$canEditProfile}"><li><a href="{xen:link account/personal-details}">{xen:phrase personal_details}</a></li></xen:if>
             <xen:if is="{$canEditSignature}"><li><a href="{xen:link account/signature}">{xen:phrase signature}</a></li></xen:if>
             <li><a href="{xen:link account/contact-details}">{xen:phrase contact_details}</a></li>
             <li><a href="{xen:link account/privacy}">{xen:phrase privacy}</a></li>
             <li><a href="{xen:link account/preferences}" class="OverlayTrigger">{xen:phrase preferences}</a></li>
             <li><a href="{xen:link account/alert-preferences}">{xen:phrase alert_preferences}</a></li>
             <xen:if is="{$canUploadAvatar}"><li><a href="{xen:link account/avatar}" class="OverlayTrigger" data-cacheOverlay="true">{xen:phrase avatar}</a></li></xen:if>
             <xen:if is="{$xenOptions.facebookAppId} OR {$xenOptions.twitterAppKey} OR {$xenOptions.googleClientId}"><li><a href="{xen:link account/external-accounts}">{xen:phrase external_accounts}</a></li></xen:if>
             <li><a href="{xen:link account/security}">{xen:phrase password}</a></li>
           </xen:hook>
           </ul>
           <ul class="col2 blockLinksList">
           <xen:hook name="navigation_visitor_tab_links2">
             <xen:if is="{$xenOptions.enableNewsFeed}"><li><a href="{xen:link account/news-feed}">{xen:phrase your_news_feed}</a></li></xen:if>
             <li><a href="{xen:link conversations}">{xen:phrase conversations}
               <strong class="itemCount {xen:if $visitor.conversations_unread, '', 'Zero'}"
                 id="VisitorExtraMenu_ConversationsCounter">
                 <span class="Total">{xen:number $visitor.conversations_unread}</span>
               </strong></a></li>
             <li><a href="{xen:link account/alerts}">{xen:phrase alerts}
               <strong class="itemCount {xen:if $visitor.alerts_unread, '', 'Zero'}"
                 id="VisitorExtraMenu_AlertsCounter">
                 <span class="Total">{xen:number $visitor.alerts_unread}</span>
               </strong></a></li>
             <li><a href="{xen:link account/likes}">{xen:phrase likes_youve_received}</a></li>
             <li><a href="{xen:link search/member, '', 'user_id={$visitor.user_id}'}">{xen:phrase your_content}</a></li>
             <li><a href="{xen:link account/following}">{xen:phrase people_you_follow}</a></li>
             <li><a href="{xen:link account/ignored}">{xen:phrase people_you_ignore}</a></li>
             <xen:if is="{$xenCache.userUpgradeCount}"><li><a href="{xen:link account/upgrades}">{xen:phrase account_upgrades}</a></li></xen:if>
             <li><a href="{xen:link account/two-step}">{xen:phrase two_step_verification}</a></li>
           </xen:hook>
           </ul>
         </div>
         <div class="menuColumns secondaryContent">
           <ul class="col1 blockLinksList">
             <li>   
               <form action="{xen:link account/toggle-visibility}" method="post" class="AutoValidator visibilityForm">
                 <label><input type="checkbox" name="visible" value="1" class="SubmitOnChange" {xen:checked $visitor.visible} />
                   {xen:phrase show_online_status}</label>
                 <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
               </form>
             </li>
           </ul>
           <ul class="col2 blockLinksList">
             <li><a href="{xen:link logout, '', '_xfToken={$visitor.csrf_token_page}'}" class="LogOut">{xen:phrase log_out}</a></li>
           </ul>
         </div>
         <xen:if is="{$canUpdateStatus}">
           <form action="{xen:link members/post, $visitor}" method="post" class="sectionFooter statusPoster AutoValidator" data-optInOut="OptIn">
             <textarea name="message" class="textCtrl StatusEditor UserTagger Elastic" placeholder="{xen:phrase update_your_status}..." rows="1" cols="40" style="height:18px" data-statusEditorCounter="#visMenuSEdCount" data-nofocus="true"></textarea>
             <div class="submitUnit">
               <span id="visMenuSEdCount" title="{xen:phrase characters_remaining}"></span>
               <input type="submit" class="button primary MenuCloser" value="{xen:phrase post_verb}" />
               <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
               <input type="hidden" name="return" value="1" />
             </div>
           </form>
         </xen:if>
       </div>
     </li>

     <!-- conversations popup -->
     <li class="navTab inbox Popup PopupControl PopupClosed">

       <a href="{xen:link conversations}" rel="Menu" class="navLink NoPopupGadget"><i class="fa fa-envelope"></i>
         <strong class="itemCount {xen:if {$visitor.conversations_unread}, '', 'Zero'}"
           id="ConversationsMenu_Counter" data-text="{xen:phrase you_have_x_new_unread_conversations}">
           <span class="Total">{xen:number $visitor.conversations_unread}</span>
         </strong>
       </a>

       <div class="Menu JsOnly navPopup {xen:if '{$visitor.customFields.menu}', 'con_right', 'con_left'}" id="ConversationsMenu"
         data-contentSrc="{xen:link 'conversations/popup'}"
         data-contentDest="#ConversationsMenu .listPlaceholder">

         <div class="menuHeader primaryContent">
           <h3>
             <span class="Progress InProgress"></span>
             <a href="{xen:link conversations}" class="concealed">{xen:phrase conversations}</a>
           </h3>       
         </div>

         <div class="listPlaceholder"></div>

         <div class="sectionFooter">
           <xen:if is="{$canStartConversation}"><a href="{xen:link conversations/add}" class="floatLink">{xen:phrase start_new_conversation}</a></xen:if>
           <a href="{xen:link conversations}">{xen:phrase show_all}...</a>
         </div>
       </div>
     </li>

     <xen:hook name="navigation_visitor_tabs_middle" />

     <!-- alerts popup -->
     <li class="navTab alerts Popup PopupControl PopupClosed">

       <a href="{xen:link account/alerts}" rel="Menu" class="navLink NoPopupGadget"><i class="fa fa-flag"></i>
         <strong class="itemCount {xen:if {$visitor.alerts_unread}, '', 'Zero'}"
           id="AlertsMenu_Counter" data-text="{xen:phrase you_have_x_new_alerts}">
           <span class="Total">{xen:number $visitor.alerts_unread}</span>
         </strong>
       </a>

       <div class="Menu JsOnly navPopup {xen:if '{$visitor.customFields.menu}', 'alert_right', 'alert_left'}" id="AlertsMenu"
         data-contentSrc="{xen:link 'account/alerts-popup'}"
         data-contentDest="#AlertsMenu .listPlaceholder"
         data-removeCounter="#AlertsMenu_Counter">

         <div class="menuHeader primaryContent">
           <h3>
             <span class="Progress InProgress"></span>
             <a href="{xen:link account/alerts}" class="concealed">{xen:phrase alerts}</a>
           </h3>
         </div>

         <div class="listPlaceholder"></div>

         <div class="sectionFooter">
           <a href="{xen:link account/alert-preferences}" class="floatLink">{xen:phrase alert_preferences}</a>
           <a href="{xen:link account/alerts}">{xen:phrase show_all}...</a>
         </div>
       </div>
     </li>

     <xen:hook name="navigation_visitor_tabs_end" />

   <xen:else />
     <div>
       <label for="LoginControl" class="reg_button">
         <a href="{xen:link login}" class="inner">{xen:if $xenOptions.registrationSetup.enabled, "Log in or Join now for more", {xen:phrase log_in}}</a>
       </label>
     </div>
   </xen:if>

   <li><a href="{xen:link find-new/posts}" class="Tooltip" data-offsetY="-6" data-offsetX="0" title="What's New"><span class="whats_new">New</span></a></li>

   <!-- FOOTER LINKS -->
   <div class="footer_links">
       <li><a href="{$requestPaths.requestUri}#top"><i class="fa fa-chevron-circle-up"></i></a></li>
       <!-- admin link -->
       <xen:if is="{$visitor.is_moderator} || {$visitor.is_admin}"><xen:include template="navigation_admin" /></xen:if>

   </div>
</ul>

f) PAGE_CONTAINER
NOTE: The change in here is to add the font-awesome icons. If you already have them then you should know what to do
j) search_bar.css
HTML: 
<!DOCTYPE html><xen:set var="$isResponsive" value="{xen:if '@enableResponsive AND !{$noResponsive}', 1, 0}" />
<html id="XenForo" lang="{$visitorLanguage.language_code}" dir="{$visitorLanguage.text_direction}" class="Public NoJs {xen:if {$visitor.user_id}, 'LoggedIn', 'LoggedOut'} {xen:if {$sidebar}, 'Sidebar', 'NoSidebar'} {xen:if $hasAutoDeferred, RunDeferred} {xen:if $isResponsive, Responsive, NoResponsive}" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<xen:hook name="page_container_head">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <xen:if is="{$isResponsive}">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    </xen:if>
    <xen:if is="{$requestPaths.fullBasePath}">
        <base href="{$requestPaths.fullBasePath}" />
        <script><xen:comment>/* Chrome bug and for Google cache */</xen:comment>
            var _b = document.getElementsByTagName('base')[0], _bH = "{xen:jsescape $requestPaths.fullBasePath}";
            if (_b && _b.href != _bH) _b.href = _bH;
        </script>
    </xen:if>

    <title><xen:if is="{$title}">{xen:raw $title} | {$xenOptions.boardTitle}<xen:else />{$xenOptions.boardTitle}</xen:if></title>

    <noscript><style>.JsOnly, .jsOnly { display: none !important; }</style></noscript>
    <link rel="stylesheet" href="css.php?css=xenforo,form,public&amp;style={xen:urlencode $_styleId}&amp;dir={$visitorLanguage.text_direction}&amp;d={$visitorStyle.last_modified_date}" />
    <!--XenForo_Require:CSS-->
    {xen:helper ignoredCss, {$visitor.ignoredUsers}}

    <xen:include template="google_analytics" />
    <xen:include template="page_container_js_head" />

    <link rel="apple-touch-icon" href="{xen:helper fullurl, @ogLogoPath, 1}" />
    <link rel="alternate" type="application/rss+xml" title="{xen:phrase rss_feed_for_x, 'title={$xenOptions.boardTitle}'}" href="{xen:link forums/-/index.rss}" />
    <xen:if is="{$pageDescription.content} AND !{$pageDescription.skipmeta} AND !{$head.description}"><meta name="description" content="{xen:string wordTrim, {xen:helper stripHtml, {xen:raw $pageDescription.content}}, 200}" /></xen:if>
    <xen:if is="{$head}"><xen:foreach loop="$head" value="$headElement">{xen:raw $headElement}</xen:foreach></xen:if>
</xen:hook>

<xen:comment> IB added for navbar icons </xen:comment>
<link href="styles/font-awesome/css/font-awesome.min.css" rel="stylesheet">

</head>

<body{xen:if {$bodyClasses}, ' class="{$bodyClasses}"'}>

<xen:comment> IB added id for menu column </xen:comment>
<div {xen:if {$visitor.customFields.menu}, 'id="col_right"', 'id="col_left"'}>

<xen:hook name="body">

<xen:comment> IB removed mod bar </xen:comment>
<xen:if is="!{$visitor.user_id} && !{$hideLoginBar}">
    <xen:include template="login_bar" />
</xen:if>

<div id="headerMover">
    <div id="headerProxy"></div>

<div id="content" class="{$contentTemplate}">
    <div class="pageWidth">
        <div class="pageContent">
            <!-- main content area -->
  
            <xen:hook name="page_container_content_top" />
  
            <xen:if is="{$sidebar}">
                <div class="mainContainer">
                    <div class="mainContent"></xen:if>
              
                        <xen:include template="ad_above_top_breadcrumb" />
              
                        <xen:hook name="page_container_breadcrumb_top">
                        <div class="breadBoxTop {xen:if $topctrl, withTopCtrl}">
                            <xen:if is="{$topctrl}"><div class="topCtrl">{xen:raw $topctrl}</div></xen:if>
                            <xen:include template="breadcrumb"><xen:set var="$microdata">1</xen:set></xen:include>
                        </div>
                        </xen:hook>
              
                        <xen:include template="ad_below_top_breadcrumb" />
          
                        <!--[if lt IE 8]>
                            <p class="importantMessage">{xen:phrase you_are_using_out_of_date_browser_upgrade}</p>
                        <![endif]-->

                        <xen:hook name="page_container_notices">
                        <xen:include template="notices" />               
                        </xen:hook>
              
                        <xen:hook name="page_container_content_title_bar">
                        <xen:if is="!{$noH1}">               
                            <!-- h1 title, description -->
                            <div class="titleBar">
                                {xen:raw $beforeH1}
                                <h1><xen:if
                                    is="{$h1}">{xen:raw $h1}<xen:elseif
                                    is="{$title}" />{xen:raw $title}<xen:else
                                    />{$xenOptions.boardTitle}</xen:if></h1>
                      
                                <xen:if is="{$pageDescription.content}"><p id="pageDescription" class="muted {$pageDescription.class}">{xen:raw $pageDescription.content}</p></xen:if>
                            </div>
                        </xen:if>
                        </xen:hook>
              
                        <xen:include template="ad_above_content" />
              
                        <!-- main template -->
                        {xen:raw $contents}
              
                        <xen:include template="ad_below_content" />
              
                        <xen:if is="!{$visitor.user_id} && !{$hideLoginBar}">
                            <!-- login form, to be moved to the upper drop-down -->
                            <xen:include template="login_bar_form" />
                        </xen:if>
              
                    <xen:if is="{$sidebar}"></div>
                </div>
      
                <!-- sidebar -->
                <aside>
                    <div class="sidebar">
                        <xen:hook name="page_container_sidebar">
                        <xen:include template="ad_sidebar_top" />
                        <xen:if is="!{$noVisitorPanel}"><xen:include template="sidebar_visitor_panel" /></xen:if>
                        {xen:raw $sidebar}
                        <xen:include template="ad_sidebar_bottom" />
                        </xen:hook>
                    </div>
                </aside>
            </xen:if>
  
            <xen:hook name="page_container_breadcrumb_bottom">   
            <div class="breadBoxBottom"><xen:include template="breadcrumb" /></div>
            </xen:hook>
              
            <xen:include template="ad_below_bottom_breadcrumb" />
              
        </div>
    </div>
</div>

<header>
    <xen:include template="header" />
    <xen:edithint template="navigation" />
    <xen:edithint template="search_bar" />
</header>

</div>

<footer>
    <xen:include template="footer" />
</footer>

<xen:include template="page_container_js_body" />

<xen:if is="{$isIndexPage} AND {$canSearch}">
<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "WebSite",
    "url": "{xen:jsescape {xen:link canonical:index}}",
    "potentialAction": {
        "@type": "SearchAction",
        "target": "{xen:jsescape {xen:link canonical:search/search}}{xen:if $xenOptions.useFriendlyUrls, '?', '&'}keywords={search_keywords}",
        "query-input": "required name=search_keywords"
    }
}
</script>
</xen:if>

</xen:hook>

</div>

</body>
</html>

g) page_container_js_body
NOTE: Just add this to the very bottom of the template

PHP: 
<xen:comment> IB added for slide menu </xen:comment>
<script src="js/slide_menu.js"></script>

h) public.css
NOTE: Just change this block in the template
PHP: 
#headerMover #headerProxy
    {
        @property "header.background";
        background-color: @primaryMedium;
        @property "/header.background";
    background: rgb(23, 96, 147) url('styles/logoright.png') no-repeat top 10px right 10px;
    background: rgb(23, 96, 147) url('styles/logoright.png') no-repeat top 10px right 10px;
        height: {xen:calc '@headerLogoHeight + @headerTabHeight * 2 + 2'}px; /* +2 borders */

/* IB added for slide menu */
        height: @headerLogoHeight;
    }

i) search_bar

PHP: 
<xen:comment> IB changed entire template for slide menu </xen:comment>

<xen:edithint template="search_bar.css" />

<div id="searchBar">
    <xen:hook name="quick_search">

    <fieldset id="QuickSearch">
        <form action="{xen:link 'search/search'}" method="post" class="formPopup">
  
            <div class="primaryControls">
                <!-- block: primaryControls -->
                <input type="search" name="keywords" value="" class="textCtrl" placeholder="{xen:phrase search}..." title="{xen:phrase enter_your_search_and_hit_enter}" id="QuickSearchQuery" />
                <!-- end block: primaryControls -->
            </div>
  
            <div class="secondaryControls">
                <div class="controlsWrapper">
      
                    <!-- block: secondaryControls -->
                    <dl class="ctrlUnit">
                        <dt></dt>
                        <dd><ul>
                            <li><label><input type="checkbox" name="title_only" value="1"
                                id="search_bar_title_only" class="AutoChecker"
                                data-uncheck="#search_bar_thread" /> {xen:phrase search_titles_only}</label></li>
                        </ul></dd>
                    </dl>
      
                    <dl class="ctrlUnit">
                        <dt><label for="searchBar_users">{xen:phrase posted_by_member}:</label></dt>
                        <dd>
                            <input type="text" name="users" value="" class="textCtrl AutoComplete" id="searchBar_users" />
                            <p class="explain">{xen:phrase separate_names_with_comma}</p>
                        </dd>
                    </dl>
      
                    <dl class="ctrlUnit">
                        <dt><label for="searchBar_date">{xen:phrase newer_than}:</label></dt>
                        <dd><input type="date" name="date" value="" class="textCtrl" id="searchBar_date" /></dd>
                    </dl>
          
                    <xen:if is="{$searchBar}">
                    <dl class="ctrlUnit">
                        <dt></dt>
                        <dd><ul>
                                <xen:foreach loop="$searchBar" value="{$constraint}">
                                    <li>{xen:raw $constraint}</li>
                                </xen:foreach>
                        </ul></dd>
                    </dl>
                    </xen:if>
                </div>
                <!-- end block: secondaryControls -->
      
                <dl class="ctrlUnit submitUnit">
                    <dt></dt>
                    <dd>
                        <input type="submit" value="{xen:phrase search}" class="button primary Tooltip" title="{xen:phrase find_now}" />
                        <div class="Popup" id="commonSearches">
                            <a rel="Menu" class="button NoPopupGadget Tooltip" title="{xen:phrase useful_searches}" data-tipclass="flipped"><span class="arrowWidget"></span></a>
                            <div class="Menu">
                                <div class="primaryContent menuHeader">
                                    <h3>{xen:phrase useful_searches}</h3>
                                </div>
                                <ul class="secondaryContent blockLinksList">
                                    <!-- block: useful_searches -->
                                    <li><a href="{xen:link find-new/posts, '', 'recent=21'}" rel="nofollow">{xen:phrase recent_posts}</a></li>
                                    <xen:if is="{$visitor.user_id}">
                                    <li><a href="{xen:link search/member, '', 'user_id={$visitor.user_id}', 'content=thread'}">{xen:phrase your_threads}</a></li>
                                    <li><a href="{xen:link search/member, '', 'user_id={$visitor.user_id}', 'content=post'}">{xen:phrase your_posts}</a></li>
                                    <li><a href="{xen:link search/member, '', 'user_id={$visitor.user_id}', 'content=profile_post'}">{xen:phrase your_profile_posts}</a></li>
                                    </xen:if>
                                    <!-- end block: useful_searches -->
                                </ul>
                            </div>
                        </div>
                        <a href="{xen:link search}" class="button moreOptions Tooltip" title="{xen:phrase advanced_search}">{xen:phrase more}...</a>
                    </dd>
                </dl>
      
            </div>
  
            <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
        </form>
    </fieldset>
    </xen:hook>
</div>

j) search_bar.css

PHP: 
/* IB changed whole template for slide menu */

#searchBar .textCtrl, #searchBar .formPopup {width:96%;}
.searchmenu {display:inline-block; margin:0px 5px; width:100%;}

#searchBar
{
    margin:0.5em;
    width:100%;
}

    #QuickSearchPlaceholder
    {
            display:block;
    }

    #QuickSearch
    {
        display:block;

    }
  
        #QuickSearch .secondaryControls
        {
            display: none;
        }

        #QuickSearch.active
        {
            box-shadow: 5px 5px 25px rgba(0,0,0, 0.5);
            padding: 10px 0px 5px 10px;
            margin-right: 15px;
        }


    #QuickSearch .submitUnit .button
    {
        min-width: 0;
    }
 
    #QuickSearch input.button.primary
    {
        float: left;
        width: 50%;
    }

    #QuickSearch #commonSearches
    {
        float: right;
    }

        #QuickSearch #commonSearches .button
        {
            width: 23px;
            padding: 0;
        }
 
            #QuickSearch #commonSearches .arrowWidget
            {
                margin: 0;
                float: left;
                margin-left: 4px;
                margin-top: 4px;
            }

    #QuickSearch .moreOptions
    {
        display: block;
        margin: 0 24px 0 50%;
        width: auto;
    }

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveMediumWidth)
{
    .Responsive #QuickSearchPlaceholder
    {
        display: block;
    }

    .Responsive #QuickSearchPlaceholder.hide
    {
        display: none;
    }
}
</xen:if>

Итоги:



 

Вложения

  • 5.jpg
    5.jpg
    246.8 KB · Просмотры: 41
  • 4.jpg
    4.jpg
    236.7 KB · Просмотры: 40
  • 10.jpg
    10.jpg
    211.9 KB · Просмотры: 39
  • 1.jpg
    1.jpg
    240.9 KB · Просмотры: 39
  • 7.jpg
    7.jpg
    244.9 KB · Просмотры: 39
  • 2.jpg
    2.jpg
    205.8 KB · Просмотры: 39
  • 3.jpg
    3.jpg
    219.9 KB · Просмотры: 39
  • 8.jpg
    8.jpg
    196.3 KB · Просмотры: 35
  • 6.jpg
    6.jpg
    248.1 KB · Просмотры: 36
  • 9.jpg
    9.jpg
    245 KB · Просмотры: 34
Последнее редактирование модератором:
Сортировка по дате Сортировка по голосам
По мне так какое-то ужасное меню для совсем специфических форумов и где-то видел уже дополнение похожее только не с заменой, а в дополнение к навигации. И почему никто не может сделать нормальное меню, типа worldofwarcraft.com или gosugamers.net, копию второго для XenForo я бы даже проспонсировал или купил. Хотя от части я и понимаю, что где-то есть технические ограничения со стороны движка, да и в целом много изменить нужно будет.
 
Позитивный голос 0 Негативный голос
Войдите или зарегистрируйтесь для ответа.
Современный облачный хостинг провайдер | Aéza
Контакты
ООО "АЕЗА ГРУПП" ИНН 2312304914 ОГРН 1212300056430 г. Краснодар, ул. Маяковского 160, офис 2.4

Похожие темы

request
  • Решено
XF 2.2 Почему не выводит аватар в профиле пользователя?
Ответы
3
Просмотры
342
IlyaPep
IlyaPep
ФАКЕР
  • Вопрос
Криво отображается html блок
Ответы
2
Просмотры
208
ФАКЕР
ФАКЕР
ФАКЕР
  • Вопрос
XF 2.2 Шаблон виджета 'новые сообщения'
Ответы
1
Просмотры
287
IlyaPep
IlyaPep
ФАКЕР
  • Закрыта
  • Вопрос
XF 2.2 Как зашифровать часть кода на странице?
Ответы
8
Просмотры
487
ФАКЕР
ФАКЕР
Kildaaa
  • Решено
XF 2.2 Как сдвинуть элементы виджета в центр
Ответы
7
Просмотры
305
Kildaaa
Kildaaa
Назад
Сверху Снизу