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

Сделал мега меню каталога для simplacms, выкладываю бесплатно


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

По заказу - Rybica
 
 Много лазил по форуму, но так и не смог найти готового решения для мега меню с уровнем вложенности категорий - 3
 
Пришлось делать самому. Единственное НО, сделал не через ul li, а через div. Выкладываю бесплатно.
 
Меню на сайте (высота меню 42px, выпадает по верх - ваша верстка не меняется):
 
Меню при наведении на основную категорию:
 
Что нужно сделать:
 
1. Вставляем в нужное место в index.tpl
<div id="topcatalog">
    <div id="catalogs_menu">
        {include file='categories.tpl' categories=$categories level=0}
      </div>
 </div>

 

2. Загружаем файл categories.tpl в папку с вашим шаблоном (/design/ваш шаблон/html/)

3. В 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;
}

Готово, пользуйтесь :)

 

categories.rar

 

Также можете обращаться за разработкой шаблонов и доработкой меню или еще чего либо.

skype: giscms.ru

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

1. По технической организации: В коде прилагаемого файле два куска очень похожие почти одинаковые, надо бы делать более рационально.

2. Показываются все категории, в том числе неактивные.

3. Если есть категории 4-го и более глубоких уровней, то они выводятся все, причем в довольно беспорядочном виде, не позволяющем пользователю понять реальную иерархию.

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

 

3. Если есть категории 4-го и более глубоких уровней, то они выводятся все, причем в довольно беспорядочном виде, не позволяющем пользователю понять реальную иерархию. 

Для таких и было написано "уровень вложенности - 3"

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

Для таких и было написано "уровень вложенности - 3"

Так сделайте лимит вложенности в шаблоне - все бы были такими "блондинками" как Корс. Секретарю (или кто там наполняет), да и заказчику трудно объяснить такое ограничение...
Ссылка на сообщение
Поделиться на другие сайты

Так сделайте лимит вложенности в шаблоне - все бы были такими "блондинками" как Корс. Секретарю (или кто там наполняет), да и заказчику трудно объяснить такое ограничение...

 

Как раз и создал тему по подобному вопросу http://forum.simplacms.ru/topic/8420-как-вывести-категории-в-меню-только-по-2-ой-уровен/

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

Так сделайте лимит вложенности в шаблоне - все бы были такими "блондинками" как Корс. Секретарю (или кто там наполняет), да и заказчику трудно объяснить такое ограничение...

 

лимит вложенности в шаблоне ? Это как?

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

При выключении категории она не убирается на сайте.

Об этом было сказано в посте 2, пункт 2. Автор пока никак не среагировал...

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

Оказалось забыл вставить 

                {* Показываем только видимые категории *}
                {if $c->visible}
теперь выключает
Ссылка на сообщение
Поделиться на другие сайты
  • 1 месяц спустя...

еще один момент, т.к меню горизонтальное и категорий на сайте может быть много. Поэтому, все категории, если шаблон фиксированный, не могут быть отображены на сайте. Этот самый на мой взгляд плохой момент. Думаю, в данном случае необходимо считать количество категорий в меню, а далее ставить ограничение на вывод определенного количества. Если количество больше, то выводить общую ссылку - Еще категории или ... (как это сделано в шаблонах 1С битрикс)

Например:

{if $categories|count>7} 
...
{/if}

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

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

 

Оказалось забыл вставить 

                {* Показываем только видимые категории *}
                {if $c->visible}
теперь выключает

 

 

еще один момент, т.к меню горизонтальное и категорий на сайте может быть много. Поэтому, все категории, если шаблон фиксированный, не могут быть отображены на сайте. Этот самый на мой взгляд плохой момент. Думаю, в данном случае необходимо считать количество категорий в меню, а далее ставить ограничение на вывод определенного количества. Если количество больше, то выводить общую ссылку - Еще категории или ... (как это сделано в шаблонах 1С битрикс)

Например:

{if $categories|count>7} 
...
{/if}

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

Как правильно обернуть и вставитьв код? Подскажите пожалуйста!

Ссылка на сообщение
Поделиться на другие сайты
  • 2 месяца спустя...

Как правильно обернуть и вставитьв код? Подскажите пожалуйста!

Да действительно, как замостить все остальные категории в одну кнопку, а то они выпадают из блока и как текст под меню сидят

post-18343-0-73594100-1426436532_thumb.png

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

Подскажите как в данном варианте прописать 4-5 уровень категории но при это указать class индивидуальный для каждого уровня

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

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

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

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

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

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

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

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

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

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