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

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

  • 2 недели спустя...
Окей. К примеру за сколько сможешь сделать меню как у http://www.5ok.com.ua ?

Ну я не дизайнер и не пхп промер, поэтому не думаю, что смогу удовлетворить полностью все твои требования, но чисто скрипт+стили=$50.
Там не так уж и сложно сделать это меню.
Просто добавить третью вложенность,
.ulsub width=100%,
.lisub width=33% (если три колонки или 25% если четыре и т.д.)
Ну как-то так.
Ссылка на сообщение
Поделиться на другие сайты
  • 1 год спустя...
  • 2 месяца спустя...

Это в индекс

<div id="catalog_menu">
{include file='categories.tpl' categories=$categories level=0}
</div>

Это в categories.tpl

?{if $categories}
{if $level == 0}<ul class="ulcat">
{foreach item=c from=$categories}
{if $c->subcategories}
<li class="licat">
<a href="catalog/{$c->url}" class="acat">{$c->name}</a>
{include file='categories.tpl' categories=$c->subcategories level=1}</li>
{else}
<li class="licat">
<a href="catalog/{$c->url}" class="acat">{$c->name}</a>
</li>

{/if}
{/foreach}

</ul>{/if}
{if $level == 1}<ul class="ulsub">
{foreach item=c from=$categories}
{if $c->subcategories}
<li class="lisub">
<a href="catalog/{$c->url}" class="text-bold" class="asub">{$c->name}</a>
{include file='categories.tpl' categories=$c->subcategories level=1}
</li>
{else}
<li class="lisub">
<a href="catalog/{$c->url}" class="asub">{$c->name}</a>
</li>
{/if}
{/foreach}
</ul>
{/if}

{/if}

Это в стили

#catalog_menu{ margin:8px 0 0 5px; padding: 0; float: left; width: 100%; font-size:13px; } .ulcat { list-style: none; margin:0; padding:0; float: left; } .licat { background:url('../images/h-menu-pad-right.jpg') no-repeat top right, url('../images/h-menu-pad-left.jpg') no-repeat top left, url('../images/h-menu-pad-center.jpg') repeat-x top; float: left; position: relative; text-align:center; vertical-align:center; height:42px; width:120px; } .licat { -moz-border-radius:5px 5px 0 0; -webkit-border-radius:5px 5px 0 0; -khtml-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0; } .acat { color:#ffffff; font-weight:bold; text-decoration: none; display: block; width: 110px; padding: 0px 5px; margin-top:5px; } .ulsub { float: left; background:#ffffff; border:2px solid #4AA93F; display: none; position: absolute; padding: 5px; width: 310px; z-index:99; margin-top:-12px; list-style: none; text-align:left; } .lisub { float: left; margin:0; padding:0; border:none; width:100%; background: none; border:none; } .asub { width: 300px; font-size:14px; text-align:left; color:#333333; border:none; text-decoration:none; padding:4px 10px; display: block; } .licat:hover, .licat.jshover { background:url('../images/h-menu-pad-sel-right.jpg') no-repeat top right, url('../images/h-menu-pad-sel-left.jpg') no-repeat top left, url('../images/h-menu-pad-sel-center.jpg') repeat-x top; } .licat:hover .acat, .licat.jshover .acat { color:#ffffff; } .licat:hover.asub, .licat.jshover.asub { } .licat:hover.asub:hover { color:#e84d07; } .lisub:hover, .lisub.jshover { background:#DDE7F3; border:none; } .licat:hover .ulsub, .licat.jshover .ulsub { display: block; }

У меня работает, но тебе надо подобрать картинки фоновые, ну если хтмл как-то понимаешь то разберешься. Кстати, то же меню можно сделать и с обычной функцией. Максимальная вложенность меню = 2. Т.е. категории и подкатегории, а под-подкатегорий нет. Но сделать можно по примеру. Удачи.

Спасибо большое пригодилось на двух сайтах!!!  в одном подправил на вывод в 3 столбика ))) а собственно и править почти не чего было ))) и так выводило флоатом на новую строку )))

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

Это в индекс

<div id="catalog_menu">
{include file='categories.tpl' categories=$categories level=0}
</div>

Это в categories.tpl

?{if $categories}
{if $level == 0}<ul class="ulcat">
{foreach item=c from=$categories}
{if $c->subcategories}
<li class="licat">
<a href="catalog/{$c->url}" class="acat">{$c->name}</a>
{include file='categories.tpl' categories=$c->subcategories level=1}</li>
{else}
<li class="licat">
<a href="catalog/{$c->url}" class="acat">{$c->name}</a>
</li>

{/if}
{/foreach}

</ul>{/if}
{if $level == 1}<ul class="ulsub">
{foreach item=c from=$categories}
{if $c->subcategories}
<li class="lisub">
<a href="catalog/{$c->url}" class="text-bold" class="asub">{$c->name}</a>
{include file='categories.tpl' categories=$c->subcategories level=1}
</li>
{else}
<li class="lisub">
<a href="catalog/{$c->url}" class="asub">{$c->name}</a>
</li>
{/if}
{/foreach}
</ul>
{/if}

{/if}

Это в стили

#catalog_menu{ margin:8px 0 0 5px; padding: 0; float: left; width: 100%; font-size:13px; } .ulcat { list-style: none; margin:0; padding:0; float: left; } .licat { background:url('../images/h-menu-pad-right.jpg') no-repeat top right, url('../images/h-menu-pad-left.jpg') no-repeat top left, url('../images/h-menu-pad-center.jpg') repeat-x top; float: left; position: relative; text-align:center; vertical-align:center; height:42px; width:120px; } .licat { -moz-border-radius:5px 5px 0 0; -webkit-border-radius:5px 5px 0 0; -khtml-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0; } .acat { color:#ffffff; font-weight:bold; text-decoration: none; display: block; width: 110px; padding: 0px 5px; margin-top:5px; } .ulsub { float: left; background:#ffffff; border:2px solid #4AA93F; display: none; position: absolute; padding: 5px; width: 310px; z-index:99; margin-top:-12px; list-style: none; text-align:left; } .lisub { float: left; margin:0; padding:0; border:none; width:100%; background: none; border:none; } .asub { width: 300px; font-size:14px; text-align:left; color:#333333; border:none; text-decoration:none; padding:4px 10px; display: block; } .licat:hover, .licat.jshover { background:url('../images/h-menu-pad-sel-right.jpg') no-repeat top right, url('../images/h-menu-pad-sel-left.jpg') no-repeat top left, url('../images/h-menu-pad-sel-center.jpg') repeat-x top; } .licat:hover .acat, .licat.jshover .acat { color:#ffffff; } .licat:hover.asub, .licat.jshover.asub { } .licat:hover.asub:hover { color:#e84d07; } .lisub:hover, .lisub.jshover { background:#DDE7F3; border:none; } .licat:hover .ulsub, .licat.jshover .ulsub { display: block; }

У меня работает, но тебе надо подобрать картинки фоновые, ну если хтмл как-то понимаешь то разберешься. Кстати, то же меню можно сделать и с обычной функцией. Максимальная вложенность меню = 2. Т.е. категории и подкатегории, а под-подкатегорий нет. Но сделать можно по примеру. Удачи.

 

Подскажите, пожалуйста, куда здесь добавить {if $c->visible} чтобы выводились только активные категории?

--------------

Решение нашел

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

созрели вопросы:

 

1. Как сделать, чтобы подкатегория не показывалась, если там нет товара в наличии (если она пуста)?

2. Как можно сделать цифру рядом с названием подкатегории с кол-во в ней товаров в наличии?

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

Всем привет! нужен специалист по симпле, переделка сайта(со старой версии на новую+дизайн+Модули и.т.д) 

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

А как сделать второй уровень такого типа меню http://www.designchemical.com/lab/jquery-vertical-mega-menu-plugin/examples/  вот под этот css в самом HTML?

 

/* Основное меню */
.mega-menu{
     font: bold 13px Arial, sans-serif; 
     line-height: 16px; 
     background: #333;
     border-left: 1px solid #1B1B1B; 
     position: relative; /* Обязательно */
}
.mega-menu li a {
     display: block; 
     color: #fff; 
     padding: 12px 38px 12px 25px; 
     text-shadow: 1px 1px 1px #000; 
     text-decoration: none;  
     border-top: 1px solid #555; 
     border-bottom: 1px solid #222; 
     border-right: 1px solid #1B1B1B;
}
.mega-menu li a:hover, .mega-menu li.mega-hover a {
     background: #4b4b4b; 
     color: #fff; 
     border-right: 1px solid #4b4b4b;
}
.mega-menu li a.dc-mega {
     position: relative;
}


/* Стрелки основного меню */
.mega-menu li a .dc-mega-icon {
     display: block; 
     position: absolute; 
     top: 18px; 
     right: 15px; 
     width: 6px; 
     height: 8px; 
     background: url(../images/arrow_right.png) no-repeat 0 0;
}


/* Стили подменю */
.mega-menu li .sub-container {
     position: absolute; /* Обязательно */
     background: #4B4B4B;
     padding: 10px 10px 0 10px; 
     border: 1px solid #4b4b4b; 
     border-left: none;
}
.mega-menu li .sub-container .sub {}

.mega-menu li .sub .row {
     width: 100%; 
     overflow: hidden;
}
.mega-menu li .sub li {
     float: none; 
     width: 150px; 
     font-size: 1em; 
     font-weight: normal;
}
.mega-menu li .sub li.mega-hdr {
     float: left; /* Обязательно */
     margin: 0 5px 10px 5px;
}
.mega-menu li .sub a, .mega-menu.left li .sub a {
     background: none; 
     border: none; 
     text-shadow: none;
     float: none;
     color: #fff; 
     padding: 7px 10px; 
     display: block;
     text-decoration: none; 
     font-size: 0.9em;
}
.mega-menu li .sub li.mega-hdr a.mega-hdr-a {
     padding: 5px 5px 5px 15px; 
     margin-bottom: 5px; 
     background: #E88221; 
     text-transform: uppercase; 
     font-weight: bold; 
     color: #fff; 
     text-shadow: 1px 1px 1px #333;
}
.mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {
     color: #000; 
     text-shadow: none;
}
.mega-menu .sub li.mega-hdr li a {
     padding: 4px 5px 4px 20px; 
     background: url(../images/arrow_white.png) no-repeat 5px 8px; 
     font-weight: normal;
}
.mega-menu .sub li.mega-hdr li a:hover {
     color: #a32403; 
     background: #efefef url(../images/arrow_on.png) no-repeat 5px 8px;
}
.mega-menu .sub ul li {
     padding-right: 0;
}


/* Стили подменю второго уровня */
.mega-menu li .sub-container.non-mega .sub {
     padding: 10px;}
     .mega-menu li .sub-container.non-mega li {
     padding: 0; 
     margin: 0;
     width: 150px;
}
.mega-menu li .sub-container.non-mega li a {
     padding: 7px 5px 7px 22px; 
     background: url(../images/arrow_white.png) no-repeat 7px 10px;
}
.mega-menu li .sub-container.non-mega li a:hover {
     color: #a32403; 
     background: #efefef url(../images/arrow_on.png) no-repeat 7px 10px;
}
Ссылка на сообщение
Поделиться на другие сайты

 

А как сделать второй уровень такого типа меню http://www.designchemical.com/lab/jquery-vertical-mega-menu-plugin/examples/  вот под этот css в самом HTML?

 

/* Основное меню */
.mega-menu{
     font: bold 13px Arial, sans-serif; 
     line-height: 16px; 
     background: #333;
     border-left: 1px solid #1B1B1B; 
     position: relative; /* Обязательно */
}
.mega-menu li a {
     display: block; 
     color: #fff; 
     padding: 12px 38px 12px 25px; 
     text-shadow: 1px 1px 1px #000; 
     text-decoration: none;  
     border-top: 1px solid #555; 
     border-bottom: 1px solid #222; 
     border-right: 1px solid #1B1B1B;
}
.mega-menu li a:hover, .mega-menu li.mega-hover a {
     background: #4b4b4b; 
     color: #fff; 
     border-right: 1px solid #4b4b4b;
}
.mega-menu li a.dc-mega {
     position: relative;
}


/* Стрелки основного меню */
.mega-menu li a .dc-mega-icon {
     display: block; 
     position: absolute; 
     top: 18px; 
     right: 15px; 
     width: 6px; 
     height: 8px; 
     background: url(../images/arrow_right.png) no-repeat 0 0;
}


/* Стили подменю */
.mega-menu li .sub-container {
     position: absolute; /* Обязательно */
     background: #4B4B4B;
     padding: 10px 10px 0 10px; 
     border: 1px solid #4b4b4b; 
     border-left: none;
}
.mega-menu li .sub-container .sub {}

.mega-menu li .sub .row {
     width: 100%; 
     overflow: hidden;
}
.mega-menu li .sub li {
     float: none; 
     width: 150px; 
     font-size: 1em; 
     font-weight: normal;
}
.mega-menu li .sub li.mega-hdr {
     float: left; /* Обязательно */
     margin: 0 5px 10px 5px;
}
.mega-menu li .sub a, .mega-menu.left li .sub a {
     background: none; 
     border: none; 
     text-shadow: none;
     float: none;
     color: #fff; 
     padding: 7px 10px; 
     display: block;
     text-decoration: none; 
     font-size: 0.9em;
}
.mega-menu li .sub li.mega-hdr a.mega-hdr-a {
     padding: 5px 5px 5px 15px; 
     margin-bottom: 5px; 
     background: #E88221; 
     text-transform: uppercase; 
     font-weight: bold; 
     color: #fff; 
     text-shadow: 1px 1px 1px #333;
}
.mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {
     color: #000; 
     text-shadow: none;
}
.mega-menu .sub li.mega-hdr li a {
     padding: 4px 5px 4px 20px; 
     background: url(../images/arrow_white.png) no-repeat 5px 8px; 
     font-weight: normal;
}
.mega-menu .sub li.mega-hdr li a:hover {
     color: #a32403; 
     background: #efefef url(../images/arrow_on.png) no-repeat 5px 8px;
}
.mega-menu .sub ul li {
     padding-right: 0;
}


/* Стили подменю второго уровня */
.mega-menu li .sub-container.non-mega .sub {
     padding: 10px;}
     .mega-menu li .sub-container.non-mega li {
     padding: 0; 
     margin: 0;
     width: 150px;
}
.mega-menu li .sub-container.non-mega li a {
     padding: 7px 5px 7px 22px; 
     background: url(../images/arrow_white.png) no-repeat 7px 10px;
}
.mega-menu li .sub-container.non-mega li a:hover {
     color: #a32403; 
     background: #efefef url(../images/arrow_on.png) no-repeat 7px 10px;
}

 

Вроде бы так добавил класс             <a{categories_tree categories=$categories}class="sub-container"></a>

Ссылка на сообщение
Поделиться на другие сайты
  • 1 год спустя...
{if $categories}
<ul id="mega-menu-6" class="mega-menu">
{foreach $categories as $cat}
{if $cat->visible}
<li>
<a {if $category->id == $cat->id} class="selected"{/if} href="catalog/{$cat->url}" >{$cat->name}</a>

{if $cat->subcategories}
{* если есть subcategories *}
<ul>
{foreach $cat->subcategories as $sub}
<li>
<a {if $category->id == $sub->id} class="selected"{/if} href="catalog/{$sub->url}" >{$sub->name}</a>
</li>
 
 
{/foreach}
<li>
</li>
</ul>
{/if}
</li>
{/if}
{/foreach}
</ul>
{/if}


Подскажите пожалуйста как сделать что бы колонки были в столбик а не в строку. (разбить <ul> на 4 части)

 

{if $level == 1 && ($c@iteration%10 == 0 && !$c@last)}

нашел вот это

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

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

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

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

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

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

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

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

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

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