Перейти к содержанию
Официальный форум поддержки Simpla

Нужна помощь в простроении меню сайта


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

Здравствуйте друзья. Нужна помощь в построении меню сайта. Сейчас меню сайта реализовано таким кодом 

 

HTML:

<ul class="category-grid">
<li class="top-item first">

<div class="top-image">
<a href="http://site.ru/catalog/playstation-4"><img src="design/{$settings->theme|escape}/images/menu/ps4.png" alt="Playstation 4" title="Playstation 4" /></a>
</div>
<h4>Playstation 4</h4>
<ul>
<li><a href="http://site.ru/catalog/console_ps4">Приставки</a></li>
<li><a href="http://site.ru/catalog/gamepad_ds4">Геймпады</a></li>
 <li><a href="http://site.ru/catalog/accessorie_ps4">Аксессуары</a></li>
<li><a href="http://site.ru/catalog/buy-ps4-games">Прокачка</a></li>

</ul>
</li>

<li class="top-item">
<div class="top-image">
<a href="http://site.ru/catalog/console_xboxone"><img src="design/{$settings->theme|escape}/images/menu/xboxone.png" alt="XBOX ONE" title="XBOX ONE" /></a>
</div>
<h4>XBOX ONE</h4>
<ul>
<li><a href="http://site.ru/catalog/console/microsoft">Приставки</a></li>
<li><a href="http://site.ru/catalog/gamepad_xbox_one">Геймпады</a></li>
<li><a href="http://site.ru/catalog/accessories_xboxone">Аксессуары</a></li>
 <li><a href="http://site.ru/catalog/change">Обмен</a></li>
</ul>

<li class="top-item">
<div class="top-image">
<a href="http://site.ru/catalog/xbox-360"><img src="design/{$settings->theme|escape}/images/menu/xbox360.png" alt="XBOX 360" title="XBOX 360" /></a>
</div>
<h4>XBOX 360</h4>
<ul>
<li><a href="http://site.ru/catalog/console_xbox360">Приставки</a></li>
<li><a href="http://site.ru/catalog/gamepad_xbox360">Геймпады</a></li>
<li><a href="http://site.ru/catalog/gamepad_xbox360">Аксессуары</a></li>
  <li><a href="http://site.ru/catalog/change">Обмен</a></li>
</ul> 
 
<li class="top-item">
<div class="top-image">
<a href="http://site.ru/catalog/playstation-3"><img src="design/{$settings->theme|escape}/images/menu/ps3.png" alt="Playstation 3" title="Playstation 3" /></a>
</div>
<h4>Playstation 3</h4>
<ul>
<li><a href="http://site.ru/catalog/console_ps3">Приставки</a></li>
<li><a href="http://site.ru/catalog/gamepad_ds3">Геймпады</a></li>
<li><a href="http://site.ru/catalog/accessories_ps3">Аксессуары</a></li>
  <li><a href="http://site.ru/catalog/change">Обмен</a></li>
</ul>

 <li class="top-item">
<div class="top-image">
<a href="http://site.ru/catalog/games"><img src="design/{$settings->theme|escape}/images/menu/games.png" alt="Игры" title="Игры" /></a>
</div>
<h4>Игры</h4>
<ul>
 <li><a href="http://site.ru/catalog/disks-ps4">Диски Playstation 4</a></li>
<li><a href="http://site.ru/catalog/games_ps4">Playstation 4</a></li>
<li><a href="http://site.ru/catalog/games_xbox_one">Xbox One</a></li>
<li><a href="http://site.ru/catalog/rental_games">Прокат игр</a></li>
</ul>


</li>
</ul>

CSS код:

 

.category-grid { /*width: 100%;padding-left:88px */}
.category-grid td.top-item { float: none; width: 14.285714285%; margin-left: 0; }
.top-item { text-align: left; display: inline-block; margin-left: 15px; margin-bottom: 30px; width:170px; }
.ie7 .top-item { display: inline; }
.top-item:first-child { margin-left: 0; }
.top-item .top-image { height: 115px; line-height: 115px; margin-bottom: 10px; position: relative; }
.top-item .top-image img { vertical-align: bottom; max-width: 100%; }
.top-item h4 { font: 28px 'PFDinTextCompPro-Regular', serif; line-height: normal; color: #000; }
.top-item h4 a { text-decoration: none; color: #000; }
.top-item ul { font-size: 15px; }
.top-item ul li {}
.top-item ul li a {}

 

Визуально выглядит все это так 

 

post-19881-0-25215800-1484039482_thumb.png

 

Хочется организовать все через стандартный код simpla

<!-- Меню каталога -->
			<div id="catalog_menu">
             <ul>

              
			{* Рекурсивная функция вывода дерева категорий *}
			{function name=categories_tree}
			{if $categories}
			<ul>



			{foreach $categories as $c}
				{* Показываем только видимые категории *}
				{if $c->visible}
					<li>
						{if $c->image}<img src="{$config->categories_images_dir}{$c->image}" alt="{$c->name|escape}">{/if}
						<a {if $category->id == $c->id}class="selected"{/if} href="catalog/{$c->url}" data-category="{$c->id}">{$c->name|escape}</a>
                
						{categories_tree categories=$c->subcategories}

					</li>
				{/if}
			{/foreach}

			</ul>
			{/if}
			{/function}
 			{categories_tree categories=$categories}
			</div>
			<!-- Меню каталога (The End)-->		

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

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

Помочь может любой фрилансер работающий с симплой.

Вам бесплатно никто такое делать не будет, разве что придется прождать неделю.

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

Значит оно вам так нужно :D

Я думаю цена за 5 строчек в CSS вполне нормальная, но с моего сообщения сейчас может начатся флуд, так как апетиты у всех разные, и кто то может считать по другому.

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

Я думаю цена за 5 строчек в CSS вполне нормальная, но с моего сообщения сейчас может начатся флуд, так как апетиты у всех разные, и кто то может считать по другому.

Цену назначает ФРИЛАНСЕР, а не ЗАКАЗЧИК, потому как ФРИЛАНСЕР тратит свое время на его хотелки, помните это.
Ссылка на сообщение
Поделиться на другие сайты

Цену назначает ФРИЛАНСЕР, а не ЗАКАЗЧИК, потому как ФРИЛАНСЕР тратит свое время на его хотелки, помните это.

Да я понимаю, и уважаю это, я ограничен в бюджете.

Ссылка на сообщение
Поделиться на другие сайты
<ul class="category-grid">
	{foreach $categories as $c}
		{if $c->visible}
			<li class="top-item {if $c@first}first{/if}">
				{if $c->image}
					<div class="top-image">
						<a href="catalog/{$c->url}">
							<img src="{$config->categories_images_dir}{$c->image}" alt="{$c->name|escape}">
						</a>
					</div>
				{/if}
				
				<h4>{$c->name|escape}</h4>
				{if $c->subcategories}
					<ul>
						{foreach $c->subcategories as $sc}
							{if $sc->visible}
								<li><a href="catalog/{$sc->url}">{$sc->name|escape}</a></li>
							{/if}
						{/foreach}
					</ul>
				{/if}
			</li>
		{/if}
	{/foreach}
</ul>

стили те же

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

да, спс, поправил)

 

Спасибо Вам большое! напишите в лс куда отправить вознаграждение!

 

При таком коде, отображается верно

 

post-19881-0-12936000-1484067958_thumb.png

 

{foreach $categories as $sc}
                    <li><a href="catalog/{$sc->url}">{$sc->name|escape}</a></li>
                {/foreach}

при исправленном нет, все категории полезли 

 

{foreach $categories as $sc}
<li><a href="catalog/{$sc->url}">{$sc->name|escape}</a></li>
{/foreach}

post-19881-0-38356600-1484068023_thumb.png

 

А вот структура категорий какая. Получается ближе к 1му варианту (не исправленому)

 

post-19881-0-44756900-1484068075_thumb.png

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

Спасибо Вам большое! напишите в лс куда отправить вознаграждение!

 

При таком коде, отображается верно

 

attachicon.gifScreenshot_1.png

 

{foreach $categories as $sc}
                    <li><a href="catalog/{$sc->url}">{$sc->name|escape}</a></li>
                {/foreach}

при исправленном нет, все категории полезли 

 

{foreach $categories as $sc}
<li><a href="catalog/{$sc->url}">{$sc->name|escape}</a></li>
{/foreach}

attachicon.gifScreenshot_2.png

 

А вот структура категорий какая. Получается ближе к 1му варианту (не исправленому)

 

attachicon.gifScreenshot_3.png

 

видимо скорировали до изменения. там должно быть $c->subcategories

 

{foreach $c->subcategories as $sc}
	<li><a href="catalog/{$sc->url}">{$sc->name|escape}</a></li>
{/foreach}
Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

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

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

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

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

Загрузка...
×
×
  • Создать...