Jump to content

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


Recommended Posts

По заказу - 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

Link to post
Share on other sites

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

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

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

Link to post
Share on other sites

 

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

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

Link to post
Share on other sites

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

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

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

 

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

Link to post
Share on other sites

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

 

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

Link to post
Share on other sites

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

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

Link to post
Share on other sites
  • 3 weeks later...
  • 1 month later...

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

Например:

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

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

Link to post
Share on other sites
  • 4 weeks later...

 

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

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

 

 

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

Например:

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

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

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

Link to post
Share on other sites
  • 2 months later...

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

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

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

Link to post
Share on other sites
  • 2 years later...

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

Link to post
Share on other sites
  • 4 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...