avatar

Выпадающее горизонтальное мега-меню

Опубликовал в блог Дополнения и модули для Simpla CMS
0


Открываем файл index.tpl вашего шаблона и ищем
<!-- Меню каталога -->
			<div id="catalog_menu">
					
			{* Рекурсивная функция вывода дерева категорий *}
			{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)-->	

Меняем на
<div id="topcatalog">
    <div id="catalogs_menu">
        {include file='categories.tpl' categories=$categories level=0}
      </div>
 </div>

Далее скачиваем файл categories.tpl и закидываем его в папку html вашего шаблона.
Теперь добавим стили в файл style.css вашего шаблона.
#topcatalog {
 display: block;
 width: 1024px;
 height: 42px;
 position: relative;
 margin: 0px auto;
 background: linear-gradient(to top, rgba(36, 69, 128, 1), rgba(94, 143, 230, 1));
}

#catalogs_menu {
 display: block;
 overflow: hidden;
 width: 1024px;
}

.ulcat {
display: block;
width: 1024px;
height: 44px;
}

.licat {
display: inline-block;
float: left;
}

.acat {
color: #fff;
font-size: 16px;
padding: 0px 20px;
text-decoration: none;
text-shadow: 0px 1px 1px #000;
display: inline-block;
height: 42px;
line-height: 42px;
}

.text-bold {
color: #000;
text-decoration: none;
display: block;
margin-bottom: 10px;
font-size: 16px;
}


#catalogs_menu .licat> .ulsub {
display: none;
}

#catalogs_menu .licat:hover> .ulsub {
display: block;
width: 984px;
padding: 20px;
background: #fff;
box-shadow: 0px 1px 5px #717171;
position: absolute;
left: 0px;
top: 42px;
text-align: left;
overflow: hidden;
}

#catalogs_menu .licat> .ulsub> .lisub {
 display: inline-block;
 float: left;
 padding-right: 50px;
}

#catalogs_menu .licat> .ulsub> .lisub> .ulsub .lisub a{
 text-decoration:none;
 font-size: 14px;
 display: block;
 height: 20px;
 line-height: 20px;
}

Вот и все. Меняем стили под свой дизайн и радуемся.
0 комментариев RSS
Нет комментариев
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.