Jump to content
View in the app

A better way to browse. Learn more.

IPBMafia.ru - поддержка Invision Community, релизы, темы, плагины и приложения

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Featured Replies

Posted

ProMenu Plus 3.2.1


ProMenu Plus 3.2.1 - профессиональный компонент для создания и гибкого редактирования меню на форуме.


 

  • Replies 67
  • Просмотров 11,5k
  • Created
  • Последний ответ

Лучшие авторы в теме

Most Popular Posts

  • Может и пригодится ))))) 

  • , У пунктов с красными квадратами у тебя прописано padding-right:15px; Нужно убрать из исходного кода в шаблонах   Открыть promenu_plus.css и у #more_apps_menucontentul li>a:hover прописать: b

  • , эту инструкцию нужно искать в шаблонах компонента, сказать где не могу - не установлено.

  • 1 месяц спустя...

post-4072-0-82348800-1375768116.jpg

 

Как сделать отступы где красные квадраты, как после кнопки "Главная"?  :shake:

 

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

 

Как сделать чтобы длина выпадающего меню была по самой длинной строчке? Зелёным обозначил где лишнее пространство.

 

Самое главное с первым вопросом разобраться..

  • Author

,

У пунктов с красными квадратами у тебя прописано padding-right:15px;

Нужно убрать из исходного кода в шаблонах

 

Открыть promenu_plus.css и у #more_apps_menucontentul li>a:hover прописать:

border-radius: 10px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

 


Как сделать чтобы длина выпадающего меню была по самой длинной строчке? Зелёным обозначил где лишнее пространство.

Попробуй задать этому боксу width: auto !important.

Respected, в "promenu_plus.css"

/** icons **/
.non_sprite {
	display: inline-block;
}
.non_sprite img {
	vertical-align: bottom;
}

/** load the sprite **/
.sprites {
	margin-bottom: -2px;
	display: inline-block;
	background-image: url({style_images_url}/promenu/icons/promenu_default_icons.png) !important;
	background-repeat: no-repeat !important;
	width: 14px;
	height: 14px;
}

.Arcade_icon {
	background-position: 0px 0px;
}

.Blog_icon {
	background-position: 0px -28px;
}

.Calendar_icon {
	background-position: 0px -56px;
}

.Cart_icon {
	background-position: 0px -84px;
}

.Chat_icon {
	background-position: 0px -112px;
}

.Download_icon {
	background-position: 0px -140px;
}

.Forums_icon {
	background-position: 0px -168px;
}

.Gallery_icon {
	background-position: 0px -196px;
}

.Help_icon {
	background-position: 0px -224px;
}

.Home_icon {
	background-position: 0px -252px;
}

.Info_icon {
	background-position: 0px -280px;
}

.Media_icon {
	background-position: 0px -308px;
}

.Members_icon {
	background-position: 0px -336px;
}

.More_icon {
	background-position: 0px -364px;
}

.News_icon {
	background-position: 0px -392px;
}

.Shoutbox_icon {
	background-position: 0px -420px;
}
.ipsList_vertical > li {
	margin: 3px 0px;
}

/** primary menu **/



/** Hover styling **/
#community_app_menu div  li:hover > a, #community_app_menu  li:hover > a, #community_app_menu li.click.click_active > a, #more_apps_menucontentul  li > a:hover{
	background-color: #173455; 
	color: #FFF;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
}

/** active styling **/
#community_app_menu .active > a, #more_apps_menucontentul .active > a, #community_app_menu .active:hover > a  {
	background-color: #FFF ;
	color: #0b5794 ;
}

/** no active/hover background color, for menus, blocks, mega, etc **/
#community_app_menu  li > div > ul > li > a, #community_app_menu .blocks, #community_app_menu .mega, #more_apps_menucontentul  li > a {
	background-color: #1C3B5F;
}

#community_app_menu li > div > ul > li > a, #community_app_menu .mega td.col > a, #community_app_menu .mega	div.col > a {
	display: block !important;
	white-space: nowrap !important;
	color: #FFF;
}

#community_app_menu li > div > ul > li > a {
	padding: 6px 15px 8px;
}

#community_app_menu li, #more_apps_menucontentul  li {
	cursor: pointer;
	position: relative;
	top: 0;
}

#community_app_menu .custom_icon {
	display: inline-block;
	position: relative;
}

#community_app_menu .custom_icon, #community_app_menu li > div > ul > li > a, #community_app_menu .mega .col {
	min-width: 150px;
}

#community_app_menu .mega {
	padding: 10px;
}

#community_app_menu .downarrow, #community_app_menu li.click.click_active > a.downarrow {
	background-image: url({style_images_url}/promenu/arrows/primary/down_arrow.png) !important;
	background-repeat: no-repeat !important;
	background-position: right center !important;
	background-origin: content-box !important;
}

#community_app_menu .otherarrow {
	background-image: url({style_images_url}/promenu/arrows/primary/other_arrow.png) !important;
	background-repeat: no-repeat !important;
	background-position: right center !important;
	background-origin: content-box !important;
}

#community_app_menu li.active > .downarrow{
	background-image: url({style_images_url}/promenu/arrows/primary/down_arrow_active.png) !important;
}

#community_app_menu li.active > .otherarrow{
	background-image: url({style_images_url}/promenu/arrows/primary/other_arrow_active.png) !important;
}

#community_app_menu a.mainParent {
	text-decoration: underline;
	font-weight: bold;
	padding: 5px 0px 5px 0px;
}

#community_app_menu .blocks {
	color:#FFF;
}

/***header menu****/

#header_menu {
	top: 0;
	left:0;
	width: 100%;
	position: absolute;
	text-align: left;
	font-size: 13px;
}

#header_app_menu > li {
	margin: 0px 3px 0 0;
}

#header_app_menu > li > a, #header_app_menu li > div > ul > li > a, #header_app_menu .mega td.col > a, #header_app_menu .mega div.col > a {
	color: #8A8A8A;
	white-space: nowrap !important;
	display: block !important;
	text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
}

#header_app_menu .mega {
	padding: 10px;
}

#header_app_menu > li > a, #header_app_menu li > div > ul > li > a {
	padding: 6px 15px 8px;
}

/** active styling **/
#header_app_menu .active > a, #header_app_menu .active:hover > a  {
	background-color: #292929 ;
	color: #FC6D32;
}

/** hover styling **/
#header_app_menu  li:hover > a, #header_app_menu li > ul > li > a:hover, #header_app_menu li.click_active > a {
	background-color: #292929;
	color: #FFF;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
}

/** standard background coloring for menus, blocks, etc **/
#header_menu, #header_app_menu  li > div > ul > li > a, #header_app_menu .blocks, #header_app_menu .mega {
	background-color: #181818 ;
}

#header_app_menu li {
	cursor: pointer;
	position: relative;
	top: 0;
}

#header_app_menu .custom_icon {
	display: inline-block;
	position: relative;
}

#header_app_menu .custom_icon, #header_app_menu li > div > ul > li > a {
	min-width: 150px;
}

#header_app_menu .downarrow {
	background-image: url({style_images_url}/promenu/arrows/header/down_arrow.png) !important;
	background-repeat: no-repeat !important;
	background-position: right center !important;
	background-origin: content-box !important;
}

#header_app_menu .otherarrow {
	background-image: url({style_images_url}/promenu/arrows/header/other_arrow.png) !important;
	background-repeat: no-repeat !important;
	background-position: right center !important;
	background-origin: content-box !important;
}

#header_app_menu li.active > .otherarrow, #header_app_menu li:hover > a.otherarrow, #header_app_menu li.click_active .otherarrow {
	background-image: url({style_images_url}/promenu/arrows/header/other_arrow_active.png) !important;
}

#header_app_menu li.active > .downarrow, #header_app_menu li:hover .downarrow, #header_app_menu li.click_active .downarrow {
	background-image: url({style_images_url}/promenu/arrows/header/down_arrow_active.png) !important;
}

#header_app_menu .mega .col {
	min-width: 150px;
}

#header_app_menu a.mainParent {
	text-decoration: underline;
	font-weight: bold;
	margin-top: 5px;
	margin-bottom: 5px;
}

#header_app_menu .blocks {
	color:#FFF;
}
/***Footer menu****/

#footer_menu {
	text-align: left;
	margin-top: 20px;
	vertical-align: top;
	width: 100%;
	z-index: 15000;
}

#footer_menu .main_widths {
	min-width: 940px;
	margin-left: 10px;
}

#footer_menu .category {
	display: inline-block;
	vertical-align: top;
	margin: 10px;
}

#footer_menu .category > a {
	width: 0 !important;
	min-width: 100px; /* change this to adjust your category minimum width */
	cursor: pointer;
	display: block;
	word-wrap: break-word;
}
#footer_menu .mainParent {
	text-decoration: underline;
	font-weight: bold;
	padding-top: 5px;
	padding-bottom: 5px;
	display: block;
}

#footer_menu .blocks {
	margin-top: 5px;
	word-wrap: break-word;
}

/***Site menu***/

#site_menu {
	background-color: #fff;
	text-align: left;
	vertical-align: top;
	width: 100%;
	font-size: 13px;
	min-height: 200px;
	left: 0;
	z-index: 15000;
}

#site_menu .main_widths {
	min-width: 980px;
	margin-left: 30px;
	margin-right: 30px;
}

#site_menu .category {
	display: inline-block;
	vertical-align: top;
	margin: 10px;
}

#site_menu .category > a {
	width: 0 !important;
	min-width: 100px; /* change this to adjust your category minimum width */
	cursor: pointer;
	display: block;
	word-wrap: break-word;
}

#site_menu .mainParent {
	text-decoration: underline;
	font-weight: bold;
	padding-top: 5px;
	padding-bottom: 5px;
	display: block;
}

#site_menu .blocks {
	margin-top: 5px;
}

Нету вроде "padding-right:15px;", подскажи что убрать..

Respected, в шаблонах компонента ничего не вижу нужного  :shake: 

proJS

<if test="$this->settings['promenu_menus_remote_jquery']">
	<script>
		iIsHere = false;
		if (!window.jQuery) {
			document.write("<" + "script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></" + "script>");
			iIsHere = true;
		}
	</script>
<else />
	<script>
		iIsHere = false;
		if (!window.jQuery) {
			document.write("<" + "script type='text/javascript' src='{parse url="js/3rd_party/jquery-1.8.3.min.js" base="public_dir"}'></" + "script>");
			iIsHere = true;
		}
	</script>
</if>
<script>
	if(iIsHere){
		projQ = jQuery.noConflict();
	}
	else{
		projQ = jQuery;
	}
</script>
<if test="$this->registry->profunctions->CanItouch() && !$this->settings['promenu_disable_tab_pop']">
	<if test="$this->settings['promenu_jquery_ui_css']">
		<link rel="stylesheet" type="text/css"  href="{$this->settings['promenu_jquery_ui_css']}" />
	</if>
	<if test="$this->settings['promenu_menus_remote_jquery']">
		<script>
			if (!jQuery.ui) {
				document.write("<" + "script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js'></" + "script>");
			}	
		</script>
	<else />
		<script>
			if (!jQuery.ui) {
				document.write("<" + "script type='text/javascript' src='{parse url="js/3rd_party/jquery-ui-1.9.2.custom.min.js" base="public_dir"}'></" + "script>");
			}	
		</script>	
	</if>
</if> 


proMain

<li id="nav_app_{$data['promenu_menus_nav_app']}" class="{$data['promenu_menus_click']} <if test="$data['promenu_menus_parent_id'] || $data['promenu_menus_has_sub'] || $data['promenu_menus_block']">skip_moremenu</if>">
	<a id="cpromenu_{$data['promenu_menus_id']}" class="{$data['promenu_menus_hovernoclick']} <if test="!$data['promenu_menus_icon_check']">{$data['promenu_menus_arrow']}</if> {$data['promenu_menus_attr']['class']}" style="{$data['promenu_menus_attr']['style']}" {$data['promenu_menus_attr']['attr']} {$data['promenu_menus_url']} >
			<if test="$data['promenu_menus_icon_check']">
				<span class="non_sprite">
					<img src="{$data['promenu_menus_icon']}" width="{$data['promenu_menus_icon_w']}px" height="{$data['promenu_menus_icon_h']}px"/>
				</span>
			<else />
				<if test="$data['promenu_menus_icon']">
					<span class="sprites {$data['promenu_menus_icon_class']}_icon"></span>
				</if>
			</if>		
		<span <if test="$data['promenu_menus_icon_check'] && $data['promenu_menus_arrow']">class="<if test="$data['promenu_menus_parent_id']">custom_icon</if> {$data['promenu_menus_arrow']}"</if> <if test="$data['promenu_menus_arrow']">style="padding-right:15px;background-origin: padding-box !important;"</if>>
			<if test="$data['promenu_menus_img_as_title_check']">
				<img src="{$data['promenu_menus_title_icon']}" width="{$data['promenu_menus_img_as_title_w']}" height="{$data['promenu_menus_img_as_title_h']}" style="vertical-align: bottom;"/>
			<else />
				{$data['promenu_menus_name']}
			</if>
		</span>
	</a>
	<if test="!$data['promenu_menus_is_mega']">	
		<if test="$data['promenu_menus_has_sub']">
			<div  class="boxShadow <if test="!$data['promenu_menus_parent_id'] && !$group['promenu_groups_is_vertical']"> baseRoot </if>" style="display: none; position: absolute;">
				<ul>
					<if test="$data['promenu_menus_block']">
						<li class="{$data['promenu_menus_click']}" style="position:relative;">
							<div class="blocks">
								{$data['promenu_menus_block']}
							</div>
						</li>
					</if>
					<foreach loop="$menu[$data['promenu_menus_id']] as $k => $c">
						{parse template="proMain" group="promenu_plus" params="$c, $menu, $group,0"}
					</foreach>
				</ul>
			</div>
		</if>
		<if test="$data['promenu_menus_block']">
			<div class="boxShadow  blocks <if test="!$data['promenu_menus_parent_id'] && !$group['promenu_groups_is_vertical']"> baseRoot </if>" style="display: none; position: absolute;">
				{$data['promenu_menus_block']}
			</div>
		</if>
	<else />
		<if test="$data['promenu_menus_has_sub'] || $data['promenu_menus_block']">
			<div class="boxShadow mega<if test="!$data['promenu_menus_parent_id'] && !$group['promenu_groups_is_vertical']"> baseRoot </if>" style="display:none;position:absolute;">
				<table>
					<if test="$data['promenu_menus_block']">
						<tr>
							<td class="blocks" colspan="{$data['promenu_menus_mega_column_count']}">
								{$data['promenu_menus_block']}
							</td>
						</tr>
					</if>
					<tr>
					<if test="count($menu[$data['promenu_menus_id']]) && is_array($menu[$data['promenu_menus_id']])">
						<foreach loop="$menu[$data['promenu_menus_id']] as $k => $c">
							<php>
								if($i >= $data['promenu_menus_mega_column_count'])
								{
									$i = 0;
								}
							</php>
							{parse template="proMega" group="promenu_plus" params="$c, $menu, $group, 1, $data['promenu_menus_mega_column_count'], $i"}
							<php>
								$i++;
							</php>
						</foreach>
				</if>
				<if test="$i != $data['promenu_menus_mega_column_count']">
					</tr>
				</if>
				</table>
			</div>
		</if>
	</if>
</li>
<if test="$data['promenu_menus_by_url']">
<script>
	projQ("#nav_app_{$data['promenu_menus_nav_app']}").ProActivationByUrl({ByUrlGroup: {$group['promenu_groups_by_url']}, ByUrlMenu: {$data['promenu_menus_by_url']} });
</script>
</if> 


proMega

<if test="$isMega">
	<td class="col" class="{$data['promenu_menus_click']}" style="vertical-align:top;">
<else />
	<div class="col" class="{$data['promenu_menus_click']}" style="vertical-align:top;">
</if>
	<a class="<if test="$data['promenu_menus_has_sub'] || $data['promenu_menus_block']">mainParent</if> {$data['promenu_menus_attr']['class']}" style="cursor:pointer;{$data['promenu_menus_attr']['style']}" {$data['promenu_menus_attr']['attr']} {$data['promenu_menus_url']} >
			<if test="$data['promenu_menus_icon_check']">
				<div class="non_sprite">
					<img src="{$data['promenu_menus_icon']}" width="{$data['promenu_menus_icon_w']}px" height="{$data['promenu_menus_icon_h']}px" style="vertical-align: bottom;"/>
				</div>
			<else />
				<if test="$data['promenu_menus_icon']">
					<div class="sprites {$data['promenu_menus_icon_class']}_icon"></div>
				</if>
			</if>		
		<span <if test="$data['promenu_menus_icon_check'] && $data['promenu_menus_arrow']">class="<if test="$data['promenu_menus_parent_id']">custom_icon</if>"</if>>
			<if test="$data['promenu_menus_img_as_title_check']">
				<img src="{$data['promenu_menus_title_icon']}" width="{$data['promenu_menus_img_as_title_w']}" height="{$data['promenu_menus_img_as_title_h']}" style="vertical-align: bottom;" />
			<else />
				{$data['promenu_menus_name']}
			</if>
		</span>	
	</a>
	<if test="$data['promenu_menus_has_sub'] || $data['promenu_menus_block']">
		<if test="$data['promenu_menus_block']">
			<div class="blocks">
				{$data['promenu_menus_block']}
			</div>
		</if>
		<if test="$data['promenu_menus_has_sub']">
			<foreach loop="$menu[$data['promenu_menus_id']] as $k => $c">
				{parse template="proMega" group="promenu_plus" params="$c, $menu, $group"}
			</foreach>
		</if>
	</if>
<if test="$isMega">
	</td>
	<php>
		$html='';
		if($i == $shift){
			$html = '</tr><tr>';
			$i =0;
		}
	</php>
	{$html}	
<else />
	</div>
</if> 


proOther

<div <if test="!$data['promenu_menus_parent_id']">class="category"</if>>
			<a class="<if test="$data['promenu_menus_has_sub'] || $data['promenu_menus_block']">mainParent</if> {$data['promenu_menus_attr']['class']}" style="{$data['promenu_menus_attr']['style']}" {$data['promenu_menus_attr']['attr']} {$data['promenu_menus_url']} >
				<if test="$data['promenu_menus_icon_check']">
					<div class="non_sprite">
						<img src="{$data['promenu_menus_icon']}" width="{$data['promenu_menus_icon_w']}px" height="{$data['promenu_menus_icon_h']}px"/>
					</div>
				<else />
					<if test="$data['promenu_menus_icon']">
						<div class="sprites {$data['promenu_menus_icon_class']}_icon"></div>
					</if>
				</if>		
				<if test="$data['promenu_menus_img_as_title_check']">
					<img src="{$data['promenu_menus_title_icon']}" width="{$data['promenu_menus_img_as_title_w']}" height="{$data['promenu_menus_img_as_title_h']}" />
				<else />
					{$data['promenu_menus_name']}
				</if>	
			</a>
			<if test="$data['promenu_menus_has_sub'] || $data['promenu_menus_block']">
				<if test="$data['promenu_menus_block']">
					<div class="blocks othersubs">
						{$data['promenu_menus_block']}
					</div>
				</if>
				<if test="$data['promenu_menus_has_sub']">
					<foreach loop="$menu[$data['promenu_menus_id']] as $k => $c">
						<div class="othersubs">
							{parse template="proOther" group="promenu_plus" params="$c, $menu, $group, 0"}
						</div>
					</foreach>
				</if>
			</if>
		</div> 



Кстати на стандартном стиле вообще какие-то стрелочки вниз вместо пропусков, может так проще будет сделать?

post-4072-0-61484300-1375936114.jpg

Respected, да, я слепой  :hang:

 

Отсюда:

		<span <if test="$data['promenu_menus_icon_check'] && $data['promenu_menus_arrow']">class="<if test="$data['promenu_menus_parent_id']">custom_icon</if> {$data['promenu_menus_arrow']}"</if> <if test="$data['promenu_menus_arrow']">style="padding-right:15px;background-origin: padding-box !important;"</if>>
			<if test="$data['promenu_menus_img_as_title_check']">
				<img src="{$data['promenu_menus_title_icon']}" width="{$data['promenu_menus_img_as_title_w']}" height="{$data['promenu_menus_img_as_title_h']}" style="vertical-align: bottom;"/>
			<else />
				{$data['promenu_menus_name']}
			</if>
		</span>

Удалил

padding-right:15px
  • 2 месяца спустя...

Залил на хост - но в АЦ не предлагает установить преклад.

Сейчас стоит ProMenu  v2.1.5 

 
Думал обновится не удаляя версию 2.1.5  это возможно ?

 


в css файле компонента псевдокласс :active

нашел только это 

 
/** Hover styling **/
#community_app_menu div  li:hover > a, #community_app_menu  li:hover > a, #community_app_menu li.click.click_active > a, #more_apps_menucontentul  li > a:hover{
	background-color: #173455; 
	color: #FFF;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
}

/** active styling **/
#community_app_menu .active > a, #more_apps_menucontentul .active > a, #community_app_menu .active:hover > a  {
	background-color: #FFF ;
	color: #0b5794 ;
}

/** no active/hover background color, for menus, blocks, mega, etc **/
#community_app_menu  li > div > ul > li > a, #community_app_menu .blocks, #community_app_menu .mega, #more_apps_menucontentul  li > a {
	background-color: #1C3B5F;
}

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Ответить в этой теме...

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

  • No registered users viewing this page.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.