Jump to content

Ширина Главного меню


 Share

Recommended Posts

Нужна помощь в решении вроде бы простой проблемы.

Меняю вид главного меню (навигации) на сайте

274344479_2022-09-1311-39-33.thumb.png.38f5aa2bad35c7ae741619597e52e7c6.png

Поиск в меню мне не нужен и для этого я удалил в шаблоне navBar строку {template="quickSearch" group="global" app="core" params="$preview"},но обнаружилось что тогда пункты меню ,которые "не поместились" на ширину сайта,не прячутся под кнопку Больше а переносятся на другую строку

1983586090_2022-09-1311-39-01.thumb.png.5fa52e7cc3e8cc680a438d92d55af1c8.png

Как решить эту проблемку,чтобы и меню было на всю ширину и при этом непоместившиеся пункты меню прятались под кнопку Больше ?

 

 

 

Link to comment
Share on other sites
8 часов назад, Кирилл сказал:

Что-то не припомню это меню, где оно располагается? 

Это обычное стандартное ,в чистой установке движка,меню.

Дефолтный шаблон navBar

{{if !\in_array('ipsLayout_minimal', \IPS\Output::i()->bodyClasses )}}
	<nav data-controller='core.front.core.navBar' class='{{if !\count( \IPS\core\FrontNavigation::i()->subBars( $preview ) )}}ipsNavBar_noSubBars{{endif}} {{if !$preview}}ipsResponsive_showDesktop{{endif}}'>
		<div class='ipsNavBar_primary ipsLayout_container {{if !\count( \IPS\core\FrontNavigation::i()->subBars( $preview ) )}}ipsNavBar_noSubBars{{endif}}'>
			<ul data-role="primaryNavBar" class='ipsClearfix'>
				{template="navBarItems" app="core" group="global" location="front" params="\IPS\core\FrontNavigation::i()->roots( $preview ), \IPS\core\FrontNavigation::i()->subBars( $preview ), 0, $preview"}
				<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>
			</ul>
{template="quickSearch" group="global" app="core" params="$preview"}
      </div>
	</nav>
{{elseif member.group['g_view_board'] and !\in_array('ipsLayout_minimalNoHome', \IPS\Output::i()->bodyClasses )}}
	<nav>
		<div class='ipsNavBar_primary ipsLayout_container ipsNavBar_noSubBars'>
			<ul data-role="primaryNavBar" class='ipsResponsive_showDesktop ipsClearfix'>
				<li>
					<a href='{setting="base_url"}' title='{lang="go_community_home"}'><i class='fa fa-angle-left'></i> {lang="community_home"}</a>
				</li>
			</ul>
		</div>
	</nav>
{{endif}}

в котором подключается шаблон поиска ( {template="quickSearch" group="global" app="core" params="$preview"} ) и на сайте выглядет так

316321280_2022-09-1410-15-13.thumb.png.cde36ace912f4fbd96e5ec0ebdf09ef2.png

Если в navBar удалить {template="quickSearch" group="global" app="core" params="$preview"} ,то меню выглядет так

407180564_2022-09-1410-15-43.thumb.png.773a4a9c431af20732e6d43133d6539c.png

И вот как решить проблему чтобы без поиска выглядело так

64807425_2022-09-1410-32-10.thumb.png.3485f330e90929537a65550665e9e573.png

Link to comment
Share on other sites

То есть чтобы пункты меню,которые не поместились в ширину ,"прятались" под кнопку Больше.

Link to comment
Share on other sites

Если через CSS скрыть поиск?

#elSearchWrapper{
  display:none;
}

 

Я на одном из своих сайтов скрыл именно через CSS и кнопка больше отображается нормально.

Edited by TemKa_SD
Link to comment
Share on other sites

TemKa_SD сss-способы естественно сразу же испытал,без результата

1330612736_2022-09-1510-08-56.thumb.png.24d755c5ea723a228daeb9e8a0cb2f83.png

Опытным путем,т.е методом тыка, выявил что на корректность отображения влияет id="elSearch",а вот почему хз.Почему-то еще и Кирилл молчит....

Мне необходимо чтобы выглядело так (фотомонтаж)

64807425_2022-09-1410-32-10.thumb.png.3485f330e90929537a65550665e9e573.png.536cff9193dc71fde4d6314f076f0820.png

Edited by Александр Христич
Link to comment
Share on other sites

Яваскрипт на лету рассчитывает размер элементов в строке навигации и корректирует поведение меню в зависимости от расстояний. 

Link to comment
Share on other sites
13 минут назад, Кирилл сказал:

Яваскрипт на лету рассчитывает размер элементов в строке навигации и корректирует поведение меню в зависимости от расстояний. 

А "подкорректировать" это как-то можно?

Link to comment
Share on other sites
8 минут назад, Кирилл сказал:

В custom.css:

#elSearchWrapper {display: none;}
#elSearch {
    width: 0;
}

 

Уже пробывал,без результата,ширина меню остается таким же, а на месте поиска пустое место

947597480_2022-09-1514-04-43.thumb.png.755d2faada2e17312a6569f7705ed00f.png

Не расширяется меню,хоть тресни епрст....

Link to comment
Share on other sites
3 минуты назад, Александр Христич сказал:

Уже пробывал,без результата,ширина меню остается таким же, а на месте поиска пустое место

947597480_2022-09-1514-04-43.thumb.png.755d2faada2e17312a6569f7705ed00f.png

Не расширяется меню,хоть тресни епрст....

Вариант, что написал @Кириллрабочий.

image.thumb.png.253fc1b96ff57493144cfdf9e999c62e.png

Link to comment
Share on other sites

Ну что же,все получилось как и требовалось.

Так как планировалось Поиск перенести из области Меню в шапку,то

решение,которое предложил Кирилл

#elSearchWrapper {display: none;}
#elSearch {
    width: 0;
}

не подошло и было реализованно немного по-другому.

В шаблоне navBar

{template="quickSearch" group="global" app="core" params="$preview"}

заменил на

<div id="elSearchWrapper" class='elSearchWrapper'>
  <div id='elSearch' class='elSearch'></div>
</div>

В custom.css добавил одноименные классы (ну так захотелось) к #elSearchWrapper и #elSearch

#elSearch.elSearch{
width:0px;
}
#elSearchWrapper.elSearchWrapper{
display:none;
}

тем самым мы не затронули основные глобальные стили Поиска для вывода в другом месте и Меню у нас на всю ширину .

И теперь все это выглядет так

1104793706_2022-09-1516-02-28.thumb.png.a9a4f84065cc69485dc621ed85e4ba1f.png

Нуууу вот как-то так !

Edited by Александр Христич
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

Messenger

    ×
    ×
    • Create New...

    Important Information

    By using our site you agree to our Privacy Policy