Как сделать меню не сворачивающемся

Posted 20 апреля, 20196 yr

Здравствуйте. как сделать что бы меню не сворачивалась при дополнительном контенте в navBar

520432452_Screenshot(1).png.8ade135e8abb522d4d234dd9abd294f9.png

Заранее спасибо

Тестовый форум http://cj05545.tmweb.ru/

20 апреля, 20196 yr

Ishidare может у тебя в настройках меню такая иерархия?

20 апреля, 20196 yr

Author

accop нет, не менял в коде нечего, щас добавил второе меню, всё равно там отображается

20 апреля, 20196 yr

1 минуту назад, Ishidare сказал:

accop нет, не менял в коде нечего, щас добавил второе меню, всё равно там отображается

надо смотреть код шаблона.

убрать внешний ul с этой кнопкой вытащить вложенный ul

20 апреля, 20196 yr

Author

accop получилось вырезать код

Спойлер

<ul data-role="primaryNavBar" class='ta_nav'>
               {template="navBarItems" app="core" group="global" location="front" params="\IPS\core\FrontNavigation::i()->roots( $preview ), \IPS\core\FrontNavigation::i()->subBars( $preview ), 0, $preview"}
   {{if theme.dummy}}
<li class='ipsHide' id='elNavigationMore' data-role='navMore'>
                   <a href='#' data-ipsMenu data-ipsMenu-appendTo='#elNavigationMore' id='elNavigationMore_dropdown'>{lang="more"}</a>
                   <ul class='ipsNavBar_secondary ipsHide' data-role='secondaryNavBar'>
                       <li class='ipsHide' id='elNavigationMore_more' data-role='navMore'>
                           <a href='#' data-ipsMenu data-ipsMenu-appendTo='#elNavigationMore_more' id='elNavigationMore_more_dropdown'>{lang="more"} <i class='fa fa-caret-down'></i></a>
                           <ul class='ipsHide ipsMenu ipsMenu_auto' id='elNavigationMore_more_dropdown_menu' data-role='moreDropdown'></ul>
                       </li>
                   </ul>
               </li>{{endif}}
           </ul>

И вставлять собственный url 😂

accop
1

21 апреля, 20196 yr

Я вообще не стал заморачиватся а просто оставил основную и дебавил хедер с менюшкой

21 апреля, 20196 yr

Author

Evols Тоже норм, есть код в доступе?

22 апреля, 20196 yr

18 часов назад, Ishidare сказал:

Evols Тоже норм, есть код в доступе?

Вставь в globalTemplate

<div class="ipsResponsive_hidePhone header-position">
<div class="outer-width">
<header class="ipsfocus-header">
<div class="width">
<div class="ipsfocus-logo">
<a href="https://gtafivestar.ru/forum/index.php?/bg/">Bug<span>Tracker</span></a>
</div>
<nav class="navigation header-desktop">
<ul>
<li><a href="https://gtafivestar.ru/donate" target="_blank"><i class="fa fa-shopping-basket" aria-hidden="true"></i> Донат</a></li>
<li><a href='#dialogContent' data-ipsDialog data-ipsDialog-content='#dialogContent'><i class="fa fa-cloud-download" aria-hidden="true"></i> Начать играть</a></li> 
<div id="dialogContent" class='ipsHide FaviHead'>
  <div class="fixed_inner" style="margin: 0 0 15px 0;padding: 155px;">
    <div class="ipsPad">
<div class="FaviDiolog0">
<h1 style="color: #fff;">Как начать играть на FiveStar?</h1>
<p style="color: #fff;">Установите GTA 5, скачайте лаунчер Rage MP и наслаждайтесь игрой на нашем увлекательном сервере.</p></div>
<div class="FaviDiolog1">Уважаемые игроки!<br>
Помните, что на проекте FiveStar можно играть исключительно с лицензионной версии GTA 5.</div>
<a class="ipsButton ipsButton_medium ipsButton_important" href="https://cdn.gtanet.work/RAGE_Multiplayer.zip" data-ipsdialog="" data-ipsdialog-size="narrow" style="border-radius: 50px;margin: 2px;"><i class="fa fa-download"></i> Скачать RAGE клиент</a>
<a class="ipsButton ipsButton_medium ipsButton_important" href="/forum/index.php?/forum/47-вопрос-ответ/" data-ipsdialog="" data-ipsdialog-size="narrow" style="border-radius: 50px;margin: 2px;"><i class="fa fa-question-circle"></i> Задать вопрос на форуме</a>      
</div></div></div> 
<li class="nav-icon"><a href="https://discordapp.com/invite/ycjNrEe" target="_blank">
<img src='{resource="discord_101785.png" app="forums" location="global"}'><span class="nav-tooltip">Группа FiveStar RP в Discord'e</span>
</a></li>  
<li class="nav-icon"><a href="https://www.twitch.tv/sarmatfivestar" target="_blank">
<img src='{resource="twitch.png" app="forums" location="global"}'><span class="nav-tooltip">Twitch канал FiveStar RP</span>
</a></li>
<li class="nav-icon"><a href="/" target="_blank">
<img src='{resource="youtube.png" app="forums" location="global"}'><span class="nav-tooltip">Youtube канал FiveStar RP</span>
</a></li>   
</ul>
</nav>
</div>
</header>
</div>
</div>

В custom.css

/* Header */
.header-position, #footer, .mobile-nav-panel {
    line-height: 1.6;
}
.header-position {
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    position: fixed;
    background: #6f140d3d;
}
.outer-width {
    margin: 0 auto;
    max-width: 1920px;
}
.ipsfocus-header {
    /*position: fixed;
    background: #D42027;
    border-bottom: 1px solid rgba(0,0,0,0.6);
    position: relative;*/
    line-height: 60px;
}
.ipsfocus-header .width {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.width {
    max-width: 1280px;
    width: calc(100% - 80px);
    margin: 0 auto;
}
.ipsfocus-logo a:hover {
    -webkit-filter: blur(2px);
    filter: blur(2px);
}
.ipsfocus-logo a span {
    color: rgba(255,255,255,0.8);
}
.ipsfocus-logo a {
    display: block;
    color: #fff;
    text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
    font-size: 24px;
    font-weight: bold;
    padding: 0 15px;
    -webkit-transition: all ease-in-out 0.2s;
    transition: all ease-in-out 0.2s;
}
.navigation a:active {
    background: rgba(0,0,0,0.2) !important;
}
.navigation {
    font-size: 13px;
    font-weight: bold;
    color: rgb(255, 255, 255);
}
.navigation a {
    display: block;
    color: inherit;
    padding: 0 10px;
    position: relative;
}
.navigation .nav-icon a {
    padding: 0 13px;
}
.navigation .nav-icon .fa {
    font-size: 24px;
    line-height: inherit;
    display: block;
    min-width: 20px;
    margin: 0;
}
.navigation> ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.navigation> ul {
     margin: 0px 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.navigation> ul> li:hover {
    z-index: 10;
}
.navigation li:hover> a {
    color: #d42027;
}
.navigation> ul> li {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    position: relative;
}
.navigation li:hover .nav-tooltip {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
}
.nav-tooltip {
    position: absolute;
    right: 0;
    bottom: -36px;
    line-height: 30px;
    white-space: nowrap;
    font-size: 11px;
    text-transform: none;
    background: rgba(28,34,40,0.95);
    color: #fff;
    padding: 0 10px;
    pointer-events: none;
    border-radius: 2px;
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
    opacity: 0;
    -webkit-transition: all ease-in-out 0.2s;
    transition: all ease-in-out 0.2s;
}
.nav-tooltip:before {
    content: '';
    border: 5px solid transparent;
    border-bottom-color: rgba(28,34,40,0.95);
    position: absolute;
    right: 18px;
    top: -10px;
}
@media only screen and (min-width: 910px)
.navigation li:hover .nav-tooltip {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
}
@media only screen and (min-width: 910px)
.nav-tooltip {
    position: absolute;
    right: 0;
    bottom: -36px;
    line-height: 30px;
    white-space: nowrap;
    font-size: 11px;
    text-transform: none;
    background: rgba(28,34,40,0.95);
    color: #fff;
    padding: 0 10px;
    pointer-events: none;
    border-radius: 2px;
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
    opacity: 0;
    -webkit-transition: all ease-in-out 0.2s;
    transition: all ease-in-out 0.2s;
}
/* Header End */

Ссылки поменяй на свои да отредактируй как тебе надо.

22 апреля, 20196 yr

Author

Evols Спасибо большое

5 мая, 20196 yr

В 21.04.2019 в 19:39, Evols сказал:

Я вообще не стал заморачиватся

да ты в принципе не заморачиваясь стащил статистику с форума не изменяя классов. Петушиная черта

Evols
1

7 мая, 20196 yr

В 06.05.2019 в 01:25, andros0789 сказал:

да ты в принципе не заморачиваясь стащил статистику с форума не изменяя классов. Петушиная черта

От петушка слышу.

Сам та изменил классы? Вытащил с xF и считаешь своим, иди плакайся дальше.

Sign In

Как сделать меню не сворачивающемся

Featured Replies

Последние посетители 0

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)