Перейти к содержанию

Переделка стандартного меню IPS4


Рекомендуемые сообщения

Итак, всем привет, боролся сам несколько дней, но полный провал. Переделываю стандартную тему IPS, вся загвоздка в меню осталась. Проблема в корректном изменение типа подменю, чтобы они выпадали, а не были ниже основного меню.

Спойлер

1.jpg

Это я почти добился, переделав основной код меню, убрав "лишнее" типа поиска и поставив класс dropdown или что-то в этом роде, уже не помню. Однако появилась другая проблема - меню стало странно себя вести (не отображать некоторых пунктов, которые добавлялись через меню менеджер), плюс на странице профилей и др. внутренних страницах меню преобразовывается в большую кнопку "Моre" т.е. больше - этот тот код, что прячет слишком много пунктов под неё. Проверить: http://witcher.fanpub.su/index.php?/profile/13-рогаст/ логин: тест пароль: тест

Сколько я не бился, не могу убрать этот функционал, или заставить его действовать правильно :(

Я также пытался брать коды с других дизайнов, например (мне нравится реализация прилипающего меню) в теме http://ipsmake.com/demos/theme.php?theme=Envision-Dark - однако у них дофига своих местных кодов, завязанных на стиле, все просто не утащишь. Либо может кто подсказать тему, где реализация подобного меню попроще и можно попроще укратсть? :) Прилипание я сделаю. Возможно, есть у кого-то на примете тема, где в меню сосредоточены выпадающие вниз пункты меню, личная  панель пользователя + поиск (например, прячущийся за кнопкой)? Спасибо заранее за предложения, буде таковые :) Всем пис :) 

Ссылка на комментарий
Поделиться на другие сайты

p.s. похоже, создал тему не в том форуме, нужно было в http://ipbmafia.ru/forum/103-temy-i-dizayn-ips-community-suite-4/

Ссылка на комментарий
Поделиться на другие сайты

Привет ...... замени:

core > front > global > navBar все содержание с етим:

<ol id="menu">
{template="navBarItems" app="core" group="global" location="front" params="\IPS\core\FrontNavigation::i()->roots( $preview ), \IPS\core\FrontNavigation::i()->subBars( $preview ), 0, $preview"}
</ol>

core > front > global > navBarltems все содержание с етим:

{{foreach $roots as $id => $item}}
	{{if $preview or $item->canView()}}
		{{$active = $item->activeOrChildActive();}}
		{{if $active}}
			{{\IPS\core\FrontNavigation::i()->activePrimaryNavBar = $item->id;}}
		{{endif}}
		<li {{if $active}}class='ipsNavBar_active' data-active{{endif}} id='elNavSecondary_{$item->id}' data-role="navBarItem" data-navApp="{expression="mb_substr( get_class( $item ), 4, mb_strpos( get_class( $item ), '\\', 4 ) - 4 )"}" data-navExt="{expression="mb_substr( get_class( $item ), mb_strrpos( get_class( $item ), '\\' ) + 1 )"}" data-FontAwesome="{$item->title()}">

			{{$children = $item->children();}}
			{{if $children}}
				<a href="{{if $item->link()}}{$item->link()}{{else}}#{{endif}}" id="elNavigation_{$id}" data-ipsMenu data-ipsMenu-appendTo='#{{if $parent}}elNavSecondary_{$parent}{{else}}elNavSecondary_{$id}{{endif}}' data-ipsMenu-activeClass='ipsNavActive_menu' data-navItem-id="{$item->id}" {{if $active}}data-navDefault{{endif}}>
					{$item->title()} <i class="fa fa-caret-down"></i>
				</a>
				<ul id="elNavigation_{$id}_menu" class="ipsMenu ipsMenu_auto ipsHide">
					{template="navBarChildren" app="core" group="global" location="front" params="$children, $preview"}
				</ul>
			{{else}}
				<a href="{{if $item->link()}}{$item->link()}{{else}}#{{endif}}" {{if method_exists( $item, 'target' ) AND $item->target()}}target='{$item->target()}'{{endif}} data-navItem-id="{$item->id}" {{if $active}}data-navDefault{{endif}}>
					{$item->title()}
				</a>
			{{endif}}
			{{if $subBars && isset( $subBars[ $id ] ) && count( $subBars[ $id ] )}}
				<ul class='pion' data-role='secondaryNavBar'>
					{template="navBarItems" app="core" group="global" location="front" params="$subBars[ $id ], NULL, $item->id, $preview"}
					<li class='ipsHide' id='elNavigationMore_{$id}' data-role='navMore'>
						<a href='#' data-ipsMenu data-ipsMenu-appendTo='#elNavigationMore_{$id}' id='elNavigationMore_{$id}_dropdown'>{lang="more"} <i class='fa fa-caret-down'></i></a>
						<ul class='ipsHide ipsMenu ipsMenu_auto' id='elNavigationMore_{$id}_dropdown_menu' data-role='moreDropdown'></ul>
					</li>
				</ul>
			{{endif}}
		</li>
	{{endif}}
{{endforeach}}

в custom.css поставите ето код:

#menu {
    float: right;
    list-style-type: none;
    line-height: 1;
    position: relative;
    height: 100%;
    font-size: 14px;
    font-weight: bold;
    margin-top: 25px;
}

#menu:after {
content:'';
display:block;
clear:both;
}

#menu > li {
float:left;
padding: 0 2px;
}

#menu > li.right {
float:right;
}
    
#menu > li > a {
text-decoration: none;
    text-align: center;
    color: #fff;
    display: block;
    position: relative;
    padding: 0 25px;
    line-height: 32px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

#menu > li.active > a{
    background-color: #ff7361;
    font-weight: bold;
    margin-top: 0;
}
#menu > li.active:hover > a{
   background-color: #ff7361;
}
#menu > li:hover > a {
  background-color: #ff7361;
}

@media screen and (max-width: 979px) {
 #menu {display:none; }
}

#menu > li:hover > ul.pion {
 display:block;
}
#menu > li > ul.pion {
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 2000;
    width: 200px;
    background-color: #FFF;
    -moz-box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

#menu > li > ul.pion > li {
position:relative;
}

#menu > li > ul.pion > li > a {
height: inherit;
    float: inherit;
    text-align: left;
    line-height: 35px;
    display: block;
    margin: 0!important;
    padding: 0 15px;
    z-index: 993;
    color: #2f3239;
    font-size: 13px;
    font-weight: normal;
}

#menu > li > ul.pion > li:hover {
background-color: #ff7361;
}

измените css background и цвет текста с вашем

Ссылка на комментарий
Поделиться на другие сайты

@Silence, спасибо, попробую и отпишусь. Спасибо!

Ссылка на комментарий
Поделиться на другие сайты

@Silence Благодарю, всё получилось! Ты мой спаситель в очередной раз :) Еще вопросик небольшой - как сдвинуть меню, чтобы было по середине, т.е. как в стандартном меню? Спасибо заранее:)

Спойлер

2017-05-27_18-27-29.png

 

Я так понимаю, там это скриптом реализовано, т.к. код добавляется прямо в тег под style=''

Ссылка на комментарий
Поделиться на другие сайты

Axeland, не наблюдаю данный стиль на вашем форуме 

Ссылка на комментарий
Поделиться на другие сайты

50 минут назад, WOLF сказал:

 

Axeland, не наблюдаю данный стиль на вашем форуме 

 

Хмм, он выбран основным для всех групп, в т.ч. и для гостей. Внизу переключатель, тема "Ведьмак".

p.s. Форум witcher.fanpub.su а не http://pub.fanpub.su/ - в начале темы сказано об этом...

Ссылка на комментарий
Поделиться на другие сайты

Только что, Axeland сказал:

Хмм, он выбран основным для всех групп, в т.ч. и для гостей. Внизу переключатель, тема "Ведьмак".

может тогда ссылку в профиле нужно поправить? ибо я не обладаю ясновидением чтобы узнать адрес вашего форума 

Screenshot_2.pngScreenshot_1.png

Ссылка на комментарий
Поделиться на другие сайты

Я занимаюсь несколькими проектами, ув. товарищ @WOLF, на основе своего основного, соррян, что не указываю в профиле каждый раз, когда создаю тему. В описании всё указано. Здесь и моя вина, признаю, еще раз извините) Вы написали только для того, чтобы указать на это?

Ссылка на комментарий
Поделиться на другие сайты

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

Вы написали только для того, чтобы указать на это?

нет, но теперь да. 

удачи

Ссылка на комментарий
Поделиться на другие сайты

1 час назад, WOLF сказал:

нет, но теперь да. 

удачи

И Вам, я Вас и не ждал))

Ссылка на комментарий
Поделиться на другие сайты

6 часов назад, Axeland сказал:

@Silence Благодарю, всё получилось! Ты мой спаситель в очередной раз :) Еще вопросик небольшой - как сдвинуть меню, чтобы было по середине, т.е. как в стандартном меню? Спасибо заранее:)

  Скрыть контент

2017-05-27_18-27-29.png

 

Я так понимаю, там это скриптом реализовано, т.к. код добавляется прямо в тег под style=''

в custom.css изменит данни

#menu > li > ul.pion

 

Ссылка на комментарий
Поделиться на другие сайты

1 час назад, Silence сказал:

в custom.css изменит данни


#menu > li > ul.pion

 

@Axeland Замените на это.

#menu > li > ul.pion {
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 2000;
    width: 200px;
    background-color: #141516;
    -moz-box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

Результат

Снимок экрана 2017-05-28 в 2.37.45.png

Ссылка на комментарий
Поделиться на другие сайты

  • 3 года спустя...

Думаю эта тема сойдёт для вопроса.

Поскольку стиль с боковой навигацией и там прописано  только то что  хотел автор стиля, у меня  нет навигационного меню вверху форума. там только название, кликая на которое переходишь на  главную.

Может кто подскажет что и где нужно прописать что бы к примеру появились кнопки "файлы" галерея" вот в этом месте:

 

1744409561_24-01-2021154134.thumb.jpg.5f560563178bb56c841ae88ec986391c.jpg

 

 

Сам код вертикального меню выгляди так: 

 <div class="forum-menu">
                     <a href="index.php?/"><ion-icon name="qr-scanner" class="usericodel"></ion-icon> Форумы </a>
                     <a href="index.php?/files"><ion-icon name="people" class="usericodel"></ion-icon> Файлы </a>
                     <a href="index.php?/leaderboard"><ion-icon name="trophy" class="usericodel"></ion-icon> Таблица лидеров </a>
                     <a href="index.php?/online"><ion-icon name="power" class="usericodel"></ion-icon> Онлайн </a>
 <a class="dropdown-btn"><ion-icon name="more" class="usericodel"></ion-icon> Больше
  </a>
  <div class="dropdown-container">
    <a href="#"><ion-icon name="arrow-round-forward" class="usericodel"></ion-icon> #1 Here Link</a>
    <a href="#"><ion-icon name="arrow-round-forward" class="usericodel"></ion-icon> #2 Here Link</a>
    <a href="#"><ion-icon name="arrow-round-forward" class="usericodel"></ion-icon> #3 Here Link</a>
  </div>
                     <a href="index.php?/discover"><ion-icon name="pulse" class="usericodel"></ion-icon> Активность </a>
                   </div>

И как в нём видно я туда прописал файлы, заменив ссылку "администрация онлайн". Это не правильно и не удобно и не видно..... К тому же фиг его знает где и как поменять бейдж....

В общем нужно с верху как то воплотить.

Ссылка на комментарий
Поделиться на другие сайты

В шабонах темы в админцентре поискать шаблон верхнего меню и туда вставить руками. Поиск можно делать по слову elSiteTitle.

Screenshot_1.jpg

Изменено пользователем Zero108
Ссылка на комментарий
Поделиться на другие сайты

4 минуты назад, Zero108 сказал:

В шабонах темы в админцентре поискать шаблон верхнего меню и туда вставить руками. Поиск можно делать по слову elSiteTitle

В css нашлось вот это, но с этим далеко не уедешь.

/* HEADER & MAIN NAV */
#elSiteTitle {
	color: #fff;
	font-size: 18px;
	line-height: 58px;
    margin-left:2em;
	text-decoration: none;
	font-weight: 300;
	-webkit-font-smoothing: antialiased;

 

Ссылка на комментарий
Поделиться на другие сайты

Не знаю, как там на 4.5 дела обстоят. Вот скрин из 4.4.10:

Screenshot_1.jpg

Ссылка на комментарий
Поделиться на другие сайты

7 минут назад, Zero108 сказал:

В шабонах темы в админцентре поискать шаблон верхнего меню и туда вставить руками. Поиск можно делать по слову elSiteTitle

Ну вот ещё в шаблоне logo: 

{{if \IPS\Theme::i()->logo['front']['url'] !== null }}
{{$logo = \IPS\File::get( 'core_Theme', \IPS\Theme::i()->logo['front']['url'] )->url;}}
<a href='{setting="base_url"}' id='elLogo' accesskey='1'><img src="{$logo}" alt='{setting="board_name" escape="true"}'></a>
{{else}}
<a href='{setting="base_url"}' id='elSiteTitle' accesskey='1'>{setting="board_name"}</a>
{{endif}}

 

Только что, Zero108 сказал:

Не знаю, как там на 4.5 дела обстоят. Вот скрин из 4.4.10:

Screenshot_1.jpg

Да это я нашёл. Но что мне с этим делать?)))

Ссылка на комментарий
Поделиться на другие сайты

Вот сюда пробуйте прописать пункты в <div></div> и красоту навести с помощью классов, добавленных в custom.css

Если для вас это сложно, то лучше найдите другой темный стиль для вашего сайта, где меню наверху.

Изменено пользователем Zero108
Ссылка на комментарий
Поделиться на другие сайты

9 минут назад, Zero108 сказал:

Вот сюда пробуйте прописать пункты в <div></div> и красоту навести с помощью классов, добавленных в custom.css

Если для вас это сложно, то лучше найдите другой темный стиль для вашего сайта, где меню наверху.

Нет не сложно

 

Сама строчка выглядит так:

<a href="ССЫЛКА НА СТРАНИЦУ" id="elSiteTitle" accesskey="2">ВАШЕ НАЗВАНИЕ</a>

Добавляем ещё по пути: шаблоны - logo

Поиск нужного усуществляем как написал выше  Zero108 по слову  elSiteTitle 

Ссылка на комментарий
Поделиться на другие сайты

Только правильным было бы указывать вместо текста код языковой строки. И заключать ссылку в <div></div>

В целом, смотрю на всё это как на лишний труд. Кому нужно верхнее меню, найдет другой тёмный стиль.

Ссылка на комментарий
Поделиться на другие сайты

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

Только правильным было бы указывать вместо текста код языковой строки. И заключать ссылку в <div></div>

В целом, смотрю на всё это как на лишний труд. Кому нужно верхнее меню, найдет другой тёмный стиль.

"код языковой строки" - для меня это звучит как Китайский язык. Если знаете как это прописать правильней, то дайте тогда уж пожалуйста правильную строку целиком, а не пытайтесь меня направить в дремучий лес на поиски. 😋

P.S Мне сейчас нужен именно этот стиль. Дело не в тёмном стиле.
P.P.S  и да, тут есть верхнее меню, но для этого нужно отключить боковое. А я этого не хочу. :)

 

1437430239_24-01-2021163157.thumb.jpg.426e82b14a701040b674a52694ffbbfd.jpg

Ссылка на комментарий
Поделиться на другие сайты

Вместо текста названия пункта меню вставляете код:
 

<a href="ССЫЛКА НА СТРАНИЦУ" id="elSiteTitle" accesskey="2">{lang="__app_forums"}</a>

Сами коды языковых строк можно найти поиском в разделе Языки:

 

Screenshot_0.jpg

Screenshot_1.jpg

Ссылка на комментарий
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...