Просмотр файла

ProMenu Plus 3.2.1

---

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

---

• Добавил
  Respected
• Добавлено
  02.07.2013
• Категория
  Компоненты, Приложения для IP.Board
• Название по-русски
  {value}
• Версия IP.Board

 

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

WinsanT, тем, кто в коде не хочет заморачиваться 

 

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

 

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

 

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

 

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

,

У пунктов с красными квадратами у тебя прописано 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, в шаблонах компонента ничего не вижу нужного   

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> 

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

Как же? А в шаблоне proMain? 

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

 

Отсюда:

		<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

Результат этих действий?

Respected, ровное меню результат 

Результат ДО выше на 7 сообщений, а после вот:

а почему он премиум?

poduna, потому что 40 баксов.

а почему он премиум?

потому что 40 баксов.

или гугл в помощь...

Отправил в паблик

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

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

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

 

Да, файлы залил не правильно

не правильно

ты оказался прав, видимо промахнулся с директорией заливки файлов в первый раз 

Подскажите как сменить фон выделенной вкладки. 

 

а то белый не в кассу 

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

в 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;
}

Видно же, не? background-color: #FFF ;

Видно же, не? background-color: #FFF ;

менял на #0b5794  ни чего не изменилось 

Мб так? background-color: #FFF !important;