Jump to content

Featured Replies

Posted
comment_35878

ProMenu Plus 3.2.1


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


 

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

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

Most Popular Posts

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

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

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

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

post-4072-0-82348800-1375768116.jpg

 

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

 

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

 

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

 

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

  • Author
comment_38538

,

У пунктов с красными квадратами у тебя прописано 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.

comment_38679

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;", подскажи что убрать..

  • Author
comment_38687

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

comment_38867

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

comment_38998

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 месяца спустя...
comment_47043

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

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

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

 

comment_47056


в 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.