Решено Адаптивное меню

Статус
В этой теме нельзя размещать новые ответы.

chit24

Проверенные
Сообщения
204
Реакции
16
Баллы
3,320
Кто может помочь решить вопрос с меню.
как он выглядит с ПкСнимок.PNG

При уменьшения разрешения Снимок3.PNG

И еще раз уменьшения разрешения Снимок1.PNG


Вкладываю файлы меню
navigation
PHP:
<xen:edithint template="navigation.css" />

<div id="navigation" class="pageWidth {xen:if $canSearch, withSearch}">
    <div class="pageContent">
        <nav>


        <div id="menu">
            <div id="panel">
                <!-- start: header_welcomeblock_guest -->
<div class="links">

<xen:if is="{$visitor.user_id}">

    <!-- 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"><strong class="accountUsername">{$visitor.username}</strong>
        </a>
       
        <div class="Menu JsOnly" id="AccountMenu">
            <div class="primaryContent menuHeader">
                <xen:avatar user="$visitor" size="m" class="NoOverlay plainImage" title="{xen:phrase view_your_profile}" />
               
                <h3><center><a href="{xen:link members, $visitor}" class="concealed" title="{xen:phrase view_your_profile}">{$visitor.username}</a></center></h3>
               
                <xen:if hascontent="true"><center><div class="muted"><xen:contentcheck>{xen:helper usertitle, $visitor}</xen:contentcheck></div></center></xen:if>
               
                <ul class="links">
                    <li class="fl"><a href="{xen:link members, $visitor}">{xen:phrase your_profile_page}</a></li>
                </ul>
            </div>
            <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>               
                        <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>
                    <li><a href="{xen:link logout, '', '_xfToken={$visitor.csrf_token_page}'}" class="LogOut">{xen:phrase log_out}</a></li>
                </ul>
                </xen:hook>
                </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>
       
    <xen:if is="{$tabs.account.selected}">
    <li class="navTab selected">
        <div class="tabLinks">
            <ul class="secondaryContent blockLinksList">
            <xen:hook name="navigation_tabs_account">
                <li><a href="{xen:link account/personal-details}">{xen:phrase personal_details}</a></li>
                <li><a href="{xen:link conversations}">{xen:phrase conversations}</a></li>
                <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 account/likes}">{xen:phrase likes_youve_received}</a></li>
            </xen:hook>
            </ul>
        </div>
    </li>
    </xen:if>
   
    <!-- conversations popup -->
    <li class="navTab inbox Popup PopupControl PopupClosed {xen:if $tabs.inbox.selected, 'selected'}">
                   
        <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>
                <span class="arrow"></span>
            </strong>
        </a>
       
        <div class="Menu JsOnly navPopup" 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:if is="{$tabs.inbox.selected}">
    <li class="navTab selected">
        <div class="tabLinks">
            <ul class="secondaryContent blockLinksList">
                <li><a href="{xen:link conversations}">{xen:phrase conversations}</a></li>
                <li><a href="{xen:link conversations/starred}">{xen:phrase starred_conversations}</a></li>
                <li><a href="{xen:link conversations/yours}">{xen:phrase conversations_you_started}</a></li>
            </ul>
        </div>
    </li>
    </xen:if>
   
    <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-bell"></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>
                <span class="arrow"></span>
            </strong>
        </a>
        <div class="Menu JsOnly navPopup" 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:if>
<xen:if is="!{$visitor.user_id}">
                <li><a href="/login/"><i class="fa fa-database"></i> <span>Авторизация</span></a></li>
                <li><a href="/register/"><i class="fa fa-pencil-square-o"></i> <span>Регистрация</span></a></li>
</xen:if>
</div>
<!-- end: header_welcomeblock_guest -->
            </div>
            <ul>
                <li><a href="/"><i class="icon-white icon-home" style="font-size: 15px;margin-right:2px;"></i> <span>Главная</span></a></li>
                <li><a href="/members/"><i class="fa fa-male"></i> <span>Пользователи</span></a></li>
                <li><a href="/help/terms"><i class="fa fa-ban"></i> <span>Правила</span></a></li>
                <li><a href="/help/faq/"><i class="fa fa-question-circle"></i> <span>F.A.Q.</span></a></li>
                <li><a href="/pages/service/"><i class="fa fa-diamond"></i> <span>Платный сервис</span></a></li>
                <li><a href="/#rynok.107"><i class="fa fa-university"></i> <span>Рынок</span></a></li>
                <li><a href="/threads/raidcall-sajta.196/"><i class="fa fa-whatsapp"></i> <span>RaidCall</span></a></li>
                <li><a href="/foto/"><i class="fa fa-picture-o"></i> <span>Фотохостинг</span></a></li>
            </ul>
        </div>

    <xen:if is="{$visitor.user_id}"><xen:include template="navigation_visitor_tab" /></xen:if>
           

    </div>
</div>
navigation.css
PHP:
#navigation .pageContent
{
    height: {xen:calc '@headerTabHeight * 2 + 2 - 10'}px;
    position: relative;
}

#navigation .menuIcon
{
    position: relative;
    font-size:18px;
    width: 16px;
    display: inline-block;
    text-indent: -9999px;
}

#navigation .PopupOpen .menuIcon:before,
#navigation .navLink .menuIcon:before
{
    zoom: 1;
}

#navigation .menuIcon:before
{
    content: "";
    font-size: 18px;
    position: absolute;
    top: {xen:calc 'round(-0.31 + 0.029 * @headerTabHeight, 1)'}em;
    left: 0;
    width: 16px;
    height: 2px;
    border-top: 6px double currentColor;
    border-bottom: 2px solid currentColor;
}

    .navTabs
    {
        @property "navTabs";
        font-size: @fafontsizel;
        color: @facolor5;
        background-color: #141414;
        padding: 0 15px;
        border: 1px solid #141414;
        border-top-left-radius: @fa_borderradiuss;
        border-top-right-radius: @fa_borderradiuss;
        @property "/navTabs";
     
        height: @headerTabHeight;
    }
 
        .navTabs .publicTabs
        {
            float: left;
        }
     
        .navTabs .visitorTabs
        {
            float: right;
        }
 
            .navTabs .navTab
            {
                float: left;
                white-space: nowrap;
                word-wrap: normal;
             
                <xen:if is="{$pageIsRtl}">*display: inline; *float: none; *zoom: 1;</xen:if>
            }


/* ---------------------------------------- */
/* Links Inside Tabs */

.navTabs .navLink,
.navTabs .SplitCtrl
{
    @property "navLink";
    font-family: @fa_secondaryfont;
    display: block;
    float: left;
    vertical-align: text-bottom;
    text-align: center;
    outline: 0 none;
    @property "/navLink";
 
    <xen:if is="{$pageIsRtl}">*float: none; *display: inline; *zoom: 1;</xen:if>
 
    height: @headerTabHeight;
    line-height: @headerTabHeight;
}

    .navTabs .publicTabs .navLink
    {
        padding: 0 20px;
    }
 
    .navTabs .visitorTabs .navLink
    {
        padding: 0 10px;
    }
 
    .navTabs .navLink:hover
    {
        text-decoration: none;
    }
 
    /* ---------------------------------------- */
    /* unselected tab, popup closed */

    .navTabs .navTab.PopupClosed
    {
        position: relative;
    }
 
    .navTabs .navTab.PopupClosed .navLink
    {
        color: @primaryLighter;
    }
 
        .navTabs .navTab.PopupClosed:hover
        {
            background-color: @primaryMedium;
        }
     
            .navTabs .navTab.PopupClosed .navLink:hover
            {
                color: @textCtrlBackground;
            }
     
    .navTabs .navTab.PopupClosed .arrowWidget
    {
        /* circle-arrow-down-light */
        background-position: -64px 0;
    }
 
    .navTabs .navTab .SplitCtrl
    {
        margin-left: -14px;
        width: 20px;
    }

 
    /* ---------------------------------------- */
    /* selected tab */

    .navTabs .navTab.selected .navLink
    {
        position: relative;
        @property "navTabSelected";
        color: @facolor7;

    }
 
    .navTabs .navTab.selected .SplitCtrl
    {
        display: none;
    }
 
    .navTabs .navTab.selected .arrowWidget
    {
        /* circle-arrow-down */
        background-position: -32px 0;
    }
 
        .navTabs .navTab.selected.PopupOpen .arrowWidget
        {
            /* circle-arrow-up */
            background-position: -16px 0;
        }
 
    /* ---------------------------------------- */
    /* unselected tab, popup open */
 
    .navTabs .navTab.PopupOpen .navLink
    {
    }
 
 
    /* ---------------------------------------- */
    /* selected tab, popup open (account) */
 
    .navTabs .navTab.selected.PopupOpen .navLink
    {
        @property "popupControl";
        color: @faintTextColor;
        background-color: @primaryDark;
        border-top-left-radius: @fa_borderradiuss;
        border-top-right-radius: @fa_borderradiuss;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
        @property "/popupControl";
    }
 
/* ---------------------------------------- */
/* Second Row */

.navTabs .navTab.selected .tabLinks
{
    @property "navTabSelected.background";
    background-color: @facolor3;
    @property "/navTabSelected.background";
 
    width: 100%; 
    padding: 0;
    border: none;
    overflow: hidden; zoom: 1; 
    position: absolute;
    left: 0px; 
    top: {xen:calc '@headerTabHeight + 2'}px;
    height: @headerTabHeight;
    background-position: 0px -@headerTabHeight;
    *clear:expression(style.width = document.getElementById('navigation').offsetWidth + 'px', style.clear = "none", 0);
}

    .navTabs .navTab.selected .blockLinksList
    {
        background: none;
        padding: 0;
        border: none;
        margin-left: 8px;
    }

    .withSearch .navTabs .navTab.selected .blockLinksList
    {
        margin-right: 275px;
    }

    .navTabs .navTab.selected .tabLinks .menuHeader
    {
        display: none;
    }
 
    .navTabs .navTab.selected .tabLinks li
    {
        float: left;
        padding: 2px 0;
    }
 
        .navTabs .navTab.selected .tabLinks a
        {
            @property "navTabLink";
            font-size: @fafontsizes;
            color: @facolor7;
            padding: 1px 10px;
            display: block;
            line-height: 36px !important;
            @property "/navTabLink";
         
            line-height: {xen:calc '@headerTabHeight - 6'}px;
        }
     
        .navTabs .navTab.selected .tabLinks .PopupOpen a
        {
            color: inherit;
            text-shadow: none;
        }
     
            .navTabs .navTab.selected .tabLinks a:hover,
            .navTabs .navTab.selected .tabLinks a:focus
            {
                @property "navTabLinkHover";
                text-decoration: none;
                background: rgba(0, 0, 0, 0);
                border-width: 0;
                outline: 0;
                @property "/navTabLinkHover";
            }
         
            .navTabs .navTab.selected .tabLinks .Popup a:hover,
            .navTabs .navTab.selected .tabLinks .Popup a:focus
            {
                color: inherit;
                background: none;
                border-color: transparent;
                border-radius: 0;
                text-shadow: none;
            }
 
/* ---------------------------------------- */
/* Alert Balloons */
 
.navTabs .navLink .itemCount
{
    @property "alertBalloon";
    font-weight: bold;
    font-size: 9px;
    color: white;
    background-color: #e03030;
    padding: 0 2px;
    position: absolute;
    right: 5px;
    top: 1px;
    line-height: 14px;
    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: 14px;
    @property "/alertBalloon";
}

    .navTabs .navLink .itemCount .arrow
    {
        @property "alertBalloonArrow";
        border: 3px solid transparent;
        border-top-color: #e03030;
        border-bottom: 1px none black;
        position: absolute;
        bottom: -3px;
        right: 4px;
        line-height: 0px;
        text-shadow: none;
        _display: none;
/* Hide from IE6 */
width: 0px;
        height: 0px;
        @property "/alertBalloonArrow";
    }
 
.navTabs .navLink .itemCount.Zero
{
    display: none;
}

.navTabs .navLink .itemCount.ResponsiveOnly
{
    display: none !important;
}

.NoResponsive #VisitorExtraMenu_Counter,
.NoResponsive #VisitorExtraMenu_ConversationsCounter,
.NoResponsive #VisitorExtraMenu_AlertsCounter
{
    display: none !important;
}
 
/* ---------------------------------------- */
/* Account Popup Menu */

    .navTabs .navTab.account .navLink .accountUsername
    {
        display: block;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

#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;
}

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveMediumWidth)
{
    .Responsive .navTabs
    {
        padding-left: 10px;
        padding-right: 10px;
    }

    .Responsive .withSearch .navTabs .navTab.selected .blockLinksList
    {
        margin-right: 50px;
    }
}

@media (max-width:@maxResponsiveNarrowWidth)
{
    .Responsive.hasJs .navTabs:not(.showAll) .publicTabs .navTab:not(.selected):not(.navigationHiddenTabs)
    {
        display: none;
    }
}
</xen:if>
navigation_visitor_tab
<xen:edithint template="navigation.css" />
 
Последнее редактирование:
Приветствую.
А как же автор стиля, он должен Вам был оказать техническую поддержку, и судя по изменениям в шаблоне навигации, там придётся всё переделывать, для достижения адаптивности, ну или делать всё почти с нуля.
 
Приветствую.
А как же автор стиля, он должен Вам был оказать техническую поддержку, и судя по изменениям в шаблоне навигации, там придётся всё переделывать, для достижения адаптивности, ну или делать всё почти с нуля.
автор как вы сами поняли некчемный помошник
 
Так и написали бы, что проблему решили, при помощи дополнения - Custom Tabs.
Так как меню ломалось, судя по коду, из-за добавленных пунктов навигации, которые и были перемещены в дополнение.
 
  • Мне нравится
Реакции: Hope
Статус
В этой теме нельзя размещать новые ответы.
Современный облачный хостинг провайдер | Aéza
Назад
Сверху Снизу