Перейти к содержимому


Делаем развернутое меню на jQuery


  • Вы не можете ответить в тему
Сообщений в теме: 92

#1 vsupport

    Продвинутый пользователь

  • Администраторы
  • 758 сообщений
Репутация: 31
Ассистент

Отправлено 27 March 2011 - 05:45 PM

Подключаю библиотеку на Jquery
1. Открываем фаил - big_category_tree.tpl
2. Находим:
{if $big_categories_tree && $big_categories_tree_count>0}
[left]
  {section name=h loop=$big_categories_tree}
  {if $big_categories_tree[h].categoryID != 1}
  
	
	  {section name=j loop=$big_categories_tree max=$big_categories_tree[h].level}
	  
	  {/section}
	  
	
  										[img]data/{$smarty.const.TPL}/pixel.gif[/img]							{if $smarty.const.CONF_SHOW_COUNTPROD eq 1}  {$big_categories_tree[h].products_count}{/if}[url="{if%20$smarty.const.CONF_MOD_REWRITE%20eq%201}category_{$big_categories_tree[h].categoryID}.html{else}index.php?categoryID={$big_categories_tree[h].categoryID}{/if}"]{$big_categories_tree[h].name}[/url]			
  {if $smarty.section.h.index ne $big_categories_tree_count-1}
  
[img]data/{$smarty.const.TPL}/pixel.gif[/img]
  {/if}
  {/if}
  {/section}[/left]

{else}
[center]{$smarty.const.STRING_NO_CATEGORIES}[/center]

{/if}
3. Заменяем:
{if $big_categories_tree && $big_categories_tree_count>0}
{assign var="oldnumber" value=0}[list]
{section name=h loop=$big_categories_tree}
{if $big_categories_tree[h].categoryID != 1}
{if $big_categories_tree[h].level > $oldnumber}[*]
[list]
{/if}
{if $big_categories_tree[h].level < $oldnumber}{section name=w loop=$oldnumber-$big_categories_tree[h].level}
[/list]{/section}
{/if}
{if $big_categories_tree[h].subcount > 0}
{if  $categoryID !=  $big_categories_tree[h].categoryID}[*]{else}
[*]{/if}{else}
[*]{/if}[url="{if%20$smarty.const.CONF_MOD_REWRITE%20eq%20%201}category_{$big_categories_tree[h].categoryID}.html{else}index.php?categoryID={$big_categories_tree[h].categoryID}{/if}"]{$big_categories_tree[h].name}
{if $categoryID == $big_categories_tree[h].categoryID}
{/if}
{assign var="oldnumber" value=$big_categories_tree[h].level}
{assign var="oldcat" value=$big_categories_tree[h].categoryID}
{/if}
{/section}[/url]
[/list]

[url="{if%20$smarty.const.CONF_MOD_REWRITE%20eq%20%201}category_{$big_categories_tree[h].categoryID}.html{else}index.php?categoryID={$big_categories_tree[h].categoryID}{/if}"]{else}[/url]
[url="{if%20$smarty.const.CONF_MOD_REWRITE%20eq%20%201}category_{$big_categories_tree[h].categoryID}.html{else}index.php?categoryID={$big_categories_tree[h].categoryID}{/if}"]{$smarty.const.STRING_NO_CATEGORIES}[/url]

[url="{if%20$smarty.const.CONF_MOD_REWRITE%20eq%20%201}category_{$big_categories_tree[h].categoryID}.html{else}index.php?categoryID={$big_categories_tree[h].categoryID}{/if}"]{/if}
{literal}
<script type="text/javascript">
navHover = function() {
   var lis = document.getElementById("navmenu-v").getElementsByTagName("LI");
   for (var i=0; i 	  lis[i].onmouseover=function() {
		 this.className+=" iehover";
	  }
	  lis[i].onmouseout=function() {
		 this.className=this.className.replace(new RegExp(" iehover\\b"), "");
	  }
   }
}
if (window.attachEvent) window.attachEvent("onload", navHover);
</script>
{/literal}
Меняем цвет по вкусу!))) Пример:
Изображение

Внимание! Это все для версии 3.1.x

Еще один вариант Java-меню в виде аккордиона: [/url]инструкция здесь
  • 0

#2 kratos

    Новичок

  • Download User
  • Pip
  • 5 сообщений
Репутация: 4
Начинающий

Отправлено 19 May 2011 - 02:51 PM

Чёт у меня не получилося вроде всё по инструкции кто нить делал работает????:confused::confused::confused:
  • 0

#3 vsupport

    Продвинутый пользователь

  • Администраторы
  • 758 сообщений
Репутация: 31
Ассистент

Отправлено 19 May 2011 - 02:56 PM

Чёт у меня не получилося вроде всё по инструкции кто нить делал работает????

Какая версия движка?
  • 0

#4 sta1ker

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 84 сообщений
Репутация: 3
Начинающий

Отправлено 20 May 2011 - 11:21 AM

а для 3.1.2 такого нет?
  • 0

#5 vsupport

    Продвинутый пользователь

  • Администраторы
  • 758 сообщений
Репутация: 31
Ассистент

Отправлено 20 May 2011 - 12:43 PM

а для 3.1.2 такого нет?

Ну если руки прямые по этому принципу можно и переделать
  • 0

#6 Cheshir

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 212 сообщений
Репутация: 48
Ассистент

Отправлено 01 July 2011 - 06:04 PM

Как??? Как это реализовать на 3.1.2?!?:(

А в таком исполнении
- Просто было бы идеально!!!
Еть у кого такое решение?
  • 0

#7 Cheshir

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 212 сообщений
Репутация: 48
Ассистент

Отправлено 01 July 2011 - 09:00 PM

а для 3.1.2 такого нет?


Есть похожее решение

новый блок:


    {if $big_categories_tree && $big_categories_tree_count>0}
{assign var="oldnumber" value=0}

{else}
{$smarty.const.STRING_NO_CATEGORIES}
{/if}


css

    ul#navmenu-h { margin: 0; padding: 0; list-style: none; position: relative; }

ul#navmenu-h ul {
width: 160px; /* Sub Menu Width */
margin: 0;
list-style: none;
display: none;
position: absolute;
top: 100%;
left: 0;
}

ul#navmenu-h ul ul,ul#navmenu-h ul ul ul { top: 0; left: 100%; }

ul#navmenu-h li { float: left; display: inline; position: relative; }
ul#navmenu-h ul li { width: 100%; display: block; }

/* Root Menu */
ul#navmenu-h a {
border-top: 1px solid #FFF;
border-right: 1px solid #FFF;
padding: 6px;
float: left;
display: block;
background: #DDD;
color: #666;
font: bold 11px Arial, sans-serif;
text-decoration: none;
height: 1%;
}

/* Root Menu Hover Persistence */
ul#navmenu-h a:hover,ul#navmenu-h li:hover a,ul#navmenu-h li.iehover a {
background: #BBB;
color: #FFF;

}

/* 2nd Menu */
ul#navmenu-h li:hover li a,ul#navmenu-h li.iehover li a {
float: none;
background: #BBB;
}

/* 2nd Menu Hover Persistence */
ul#navmenu-h li:hover li a:hover,ul#navmenu-h li:hover li:hover a,ul#navmenu-h li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover a {
background: #999;
}

/* 3rd Menu */
ul#navmenu-h li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li a {
background: #999;
}

/* 3rd Menu Hover Persistence */
ul#navmenu-h li:hover li:hover li a:hover,ul#navmenu-h li:hover li:hover li:hover a,ul#navmenu-h li.iehover li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover a {
background: #666;
}

/* 4th Menu */
ul#navmenu-h li:hover li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li.iehover li a {
background: #666;
}

/* 4th Menu Hover */
ul#navmenu-h li:hover li:hover li:hover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover li a:hover {
background: #333;
}

/* Hover Function - Do Not Move */
ul#navmenu-h li:hover ul ul,ul#navmenu-h li:hover ul ul ul,ul#navmenu-h li.iehover ul ul,ul#navmenu-h li.iehover ul ul ul { display: none; }
ul#navmenu-h li:hover ul,ul#navmenu-h ul li:hover ul,ul#navmenu-h ul ul li:hover ul,ul#navmenu-h li.iehover ul,ul#navmenu-h ul li.iehover ul,ul#navmenu-h ul ul li.iehover ul { display: block; }


#page { margin: 0 auto; width: 800px; text-align: left; position: relative; }
/* Clear */
.clear { clear: both; }
.clearfix,#page,#nav,#body,#content,#foot { display: inline-block; }
.clearfix:after,#page:after,#nav:after,#body:after,#content:after,#foot:after { clear: both; display: block; font: 0px/0px serif; content: "."; height: 0; visibility: hidden; }
html[xmlns] .clearfix,html[xmlns] #page,html[xmlns] #nav,html[xmlns] #body,html[xmlns] #content,html[xmlns] #foot { display: block; }

/* Some classes */
.small { font-size: .8em; }
.large { font-size: 2em; }
.quiet { color: #999; }
.highlight { background: #FFC; }
.top { margin-top: 0; padding-top: 0; }
.bottom { margin-bottom: 0; padding-bottom: 0; }
.left { margin: 0 20px 20px 0; float: left; }
.right { margin: 0 0 20px 20px; float: right; }
.hide { display: none; }
p { margin: 0 0 20px; }
ul,ol { margin: 0 30px 20px; }
ul ul,ol ol,ul ol,ol ul { margin-bottom: 0; }
ul { list-style-type: disc; }
ol { list-style-type: decimal; }
dl { margin: 0 40px 20px; }
dl dt { font-weight: bold; }
dl dd { margin: 0 0 0 20px; }
abbr,acronym { border-bottom: 1px dotted #000; cursor: help; }
address { margin: 0 0 20px; font-style: italic; }
del {}
blockquote { margin: 0 40px; }
strong { font-weight: bold; }
em,dfn { font-style: italic; }
dfn { font-weight: bold; }
pre { margin: 0 0 20px; }
pre,code { font: 11px/1.5 monospace; white-space: pre; }
caption { background: #FFC; }
#content { padding: 0px 20px 1px; z-index: 1;}
* { margin: 0; padding: 0; font-size: 100%; }


Но как выровнить по вертикали - хз...
  • 0

#8 Cheshir

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 212 сообщений
Репутация: 48
Ассистент

Отправлено 07 July 2011 - 11:10 AM

Css для вертикального меню

[HIDE="5"]
/* Sub Menu Width */

    ul#navmenu-h { margin: 0; padding: 0; list-style: none; position: relative; width: 100%;}

    ul#navmenu-h ul {
    width: 160px; /* Sub Menu Width */
    margin: 0;
    list-style: none;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    }

    ul#navmenu-h ul ul,ul#navmenu-h ul ul ul { top: 0; left: 100%; }

    ul#navmenu-h li { float: left; display: inline; position: relative; width: 100%; }
    ul#navmenu-h ul li { width: 100%; display: block;}

    /* Root Menu */
    ul#navmenu-h a {
    border-top: 1px solid #FFF;
    border-right: 1px solid #FFF;
    padding: 16px;
    float: left;
    display: block;
    background: #DDD;
    color: #666;
    font: 16px Arial,Tahoma, "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
    text-decoration: none;
    height: 1%;
	width: 240px;
	position:relative; left: auto;
    }

    /* Root Menu Hover Persistence */
    ul#navmenu-h a:hover,ul#navmenu-h li:hover a,ul#navmenu-h li.iehover a {
    background: #BBB;
    color: #FFF;
	}

    /* 2nd Menu */
    ul#navmenu-h li:hover li a,ul#navmenu-h li.iehover li a {
    float: none;
    background: #BBB;
	display: block;
	position: relative; left: 233px; bottom: 53px;
	width: 75%;
	font: 14px Arial,Tahoma, "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
    }

    /* 2nd Menu Hover Persistence */
    ul#navmenu-h li:hover li a:hover,ul#navmenu-h li:hover li:hover a,ul#navmenu-h li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover a {
    background: #999;
    }

    /* 3rd Menu */
    ul#navmenu-h li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li a {
    background: #999;
	display: block;
	position: relative; left: 186px; bottom: 53px;
	width: 75%;
	font: 13px Arial,Tahoma, "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
	}

    /* 3rd Menu Hover Persistence */
    ul#navmenu-h li:hover li:hover li a:hover,ul#navmenu-h li:hover li:hover li:hover a,ul#navmenu-h li.iehover li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover a {
    background: #666;
    }

    /* 4th Menu */
    ul#navmenu-h li:hover li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li.iehover li a {
    background: #666;
	display: block;
	position: relative; left: 139px; bottom: 53px;
	width: 75%;
	font: 12px Arial,Tahoma, "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
	}

    /* 4th Menu Hover */
    ul#navmenu-h li:hover li:hover li:hover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover li a:hover {
    background: #333;
	}

    /* 5rd Menu */
    ul#navmenu-h li:hover li:hover li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li.iehover li.iehover li a {
    background: #999;
	display: block;
	margin-left: 0;
	position: relative; left: 92px; bottom: 53px;
	width: 75%;
	font: 12px Arial,Tahoma, "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
	}

    /* 5rd Menu Hover Persistence */
    ul#navmenu-h li:hover li:hover li:hover li:hover li a:hover,ul#navmenu-h li:hover li:hover li:hover li:hover li:hover a,ul#navmenu-h li.iehover li.iehover li.iehover li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover li.iehover li.iehover a {
    background: #666;
    }

    /* Hover Function - Do Not Move */
    ul#navmenu-h li:hover ul ul,ul#navmenu-h li:hover ul ul ul,ul#navmenu-h li.iehover ul ul,ul#navmenu-h li.iehover ul ul ul { display: none; }
    ul#navmenu-h li:hover ul,ul#navmenu-h ul li:hover ul,ul#navmenu-h ul ul li:hover ul,ul#navmenu-h li.iehover ul,ul#navmenu-h ul li.iehover ul,ul#navmenu-h ul ul li.iehover ul { display: block; }
[/HIDE]
  • 0

#9 alhimik

    Пользователь

  • Пользователи
  • PipPip
  • 20 сообщений
Репутация: 0
Начинающий

Отправлено 25 July 2011 - 09:44 PM

Cheshir, а куда вставлять код HTML и код CSS?просто ещё не силен в shopcms.
  • 0

#10 Cheshir

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 212 сообщений
Репутация: 48
Ассистент

Отправлено 26 July 2011 - 07:13 AM

alhimik,
1.Создаете html файл под названием menu (или какое вам больше нравится), помещаете его по пути ваш_домен/core/tpl/user/используемый_шаблон/blocks.
2. Заходите в админ панель магазина в раздел "Управление блоками" выбираете "Добавить блок из файла".
2.1. Указываете название (высвечивается на сайте)
2.2. Указываете путь к файлу который вы создали.
2.3. Выставляете нужные настройки (расположение блока и т.д.)
3. Добавляете css запись в файл css стилей (style.css) расположенный по пути ваш_домен/data/используемый_шаблон.
4. Удаляете все файлы из папки cache, расположенной ваш_домен/core/cache/

все
  • 0

#11 gsm-group

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 101 сообщений
Репутация: 6
Начинающий

Отправлено 05 August 2011 - 03:11 PM

Ну как-то не хорошо

Уважаемый ADMIN ну можно было людям и код CSS дать, а то скриншот с моего сайта сделал, код блока дал, а стилей нет. Вот люди и мучаются ..... Вообще по доработке и переделке модуля пишите мне, помогу...
  • 0

#12 Robby

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 162 сообщений
Репутация: 75
Продвинутый

Отправлено 05 August 2011 - 05:45 PM

Примерно так должно быть


ul#navmenu-v, ul#navmenu-v li, ul#navmenu-v ul {
border: 0 none;
list-style: none outside none;
margin: 0;
padding: 0;
width: 200px;
}
ul#navmenu-v:after {
clear: both;
content: ".";
display: block;
font: 1px/0px serif;
height: 0;
visibility: hidden;
}
ul#navmenu-v li {
display: block !important;
float: left;
position: relative;
}
ul#navmenu-v a {
display: block;
font: 12px Tahoma,Geneva,sans-serif;
height: auto !important;
padding: 4px 6px;
text-align: left;
text-decoration: none;
}
ul#navmenu-v a:hover, ul#navmenu-v li:hover a, ul#navmenu-v li.iehover a {
background: none repeat scroll 0 0 #F7D4D4;
color: #663333;
}
ul#navmenu-v li:hover li a, ul#navmenu-v li.iehover li a {
background: none repeat scroll 0 0 #F7D4D4;
color: #663333;
}
ul#navmenu-v li:hover li a:hover, ul#navmenu-v li:hover li:hover a, ul#navmenu-v li.iehover li a:hover, ul#navmenu-v li.iehover li.iehover a {
background: none repeat scroll 0 0 #FBC0C0;
color: #663333;
}
ul#navmenu-v li:hover li:hover li a, ul#navmenu-v li.iehover li.iehover li a {
background: none repeat scroll 0 0 #F7D4D4;
color: #663333;
}
ul#navmenu-v li:hover li:hover li a:hover, ul#navmenu-v li:hover li:hover li:hover a, ul#navmenu-v li.iehover li.iehover li a:hover, ul#navmenu-v li.iehover li.iehover li.iehover a {
background: none repeat scroll 0 0 #FBC0C0;
color: #663333;
}
ul#navmenu-v li:hover li:hover li:hover li a, ul#navmenu-v li.iehover li.iehover li.iehover li a {
background: none repeat scroll 0 0 #FBC0C0;
color: #663333;
}
ul#navmenu-v li:hover li:hover li:hover li a:hover, ul#navmenu-v li.iehover li.iehover li.iehover li a:hover {
background: none repeat scroll 0 0 #FBC0C0;
color: #663333;
}
ul#navmenu-v ul, ul#navmenu-v ul ul, ul#navmenu-v ul ul ul {
display: none;
left: 200px;
position: absolute;
top: 0;
}
ul#navmenu-v li:hover ul ul, ul#navmenu-v li:hover ul ul ul, ul#navmenu-v li.iehover ul ul, ul#navmenu-v li.iehover ul ul ul {
display: none;
}
ul#navmenu-v li:hover ul, ul#navmenu-v ul li:hover ul, ul#navmenu-v ul ul li:hover ul, ul#navmenu-v li.iehover ul, ul#navmenu-v ul li.iehover ul, ul#navmenu-v ul ul li.iehover ul {
display: block;
}


готовое решение во вложении
  • 0

#13 Cheshir

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 212 сообщений
Репутация: 48
Ассистент

Отправлено 21 August 2011 - 03:13 PM

Robby, отлично кстати! Только совсем запутался, данное меню расчитанно на 4 подкатегории, 5тую смешивает. Пытался добавить по принципу предыдущих подкатегорий, ничего не получилось. Может вы подскажите на 5-6 подкатегорий?
  • 0

#14 Robby

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 162 сообщений
Репутация: 75
Продвинутый

Отправлено 21 August 2011 - 07:16 PM

Cheshir, я не знаю, у меня всего два уровня вложенности меню, на них и проверял, с этим кодом генерации меню
Спойлер

который не совсем корректный, в нем все теги
  • не закрыты.
    • 0

    #15 Cheshir

      Продвинутый пользователь

    • Assistent vsupport.club
    • PipPipPip
    • 212 сообщений
    Репутация: 48
    Ассистент

    Отправлено 21 August 2011 - 09:24 PM

    Robby, Да, я знаю. Если все li позакрывать, меню не работает. Кто-нибудь знает как сделать меню на 5 подкатегорий?
    • 0

    #16 gsm-group

      Продвинутый пользователь

    • Assistent vsupport.club
    • PipPipPip
    • 101 сообщений
    Репутация: 6
    Начинающий

    Отправлено 22 August 2011 - 01:15 AM

    Robby, отлично кстати! Только совсем запутался, данное меню расчитанно на 4 подкатегории, 5тую смешивает. Пытался добавить по принципу предыдущих подкатегорий, ничего не получилось. Может вы подскажите на 5-6 подкатегорий?


    Как смешивает? Скрин в студию. Подскажу....

    ---------- Сообщение объединено ----------

    Cheshir
    который не совсем корректный, в нем все теги

  • не закрыты.


  • У меня все работает. Там надо всего одно li закрыть..

    {if $categoryID != $big_categories_tree[h].categoryID}
  • {else}
  • {/if}{else}
  • {/if}

    какойто из них.
    • 0

    #17 R.Sergey

      Администратор

    • Администраторы
    • 2810 сообщений
    Репутация: 332
    Мастер

    Отправлено 22 August 2011 - 06:54 AM

    ))))))))))) Ребята, поставлю практически любое меню, кроме флеша (если покажете образец где-то) - ну цена как всегда :) - 10 $.
    • 0

    #18 Cheshir

      Продвинутый пользователь

    • Assistent vsupport.club
    • PipPipPip
    • 212 сообщений
    Репутация: 48
    Ассистент

    Отправлено 22 August 2011 - 07:01 AM

    Как смешивает? Скрин в студию. Подскажу....


    Изображение

    4я подкатегория, к примеру Коллекция "Marrow Stitch Day" далее должна делиться на КПБ "Marrow Stitch Day", Наволочки Marrow Stitch Day, Пододеяльники Marrow Stitch Day и т.д., т.е. должна быть 5ая подкатегория.

    Только сейчас обратил внимание, выбрав любой пункт Предпоследней подкатегории (не важно какого подуровня), последнюю подкатегорию меню выдает общим списком...
    Тестовое меню по ссылке
    • 0

    #19 Cheshir

      Продвинутый пользователь

    • Assistent vsupport.club
    • PipPipPip
    • 212 сообщений
    Репутация: 48
    Ассистент

    Отправлено 02 September 2011 - 10:51 AM

    R.Sergey, Реакция на переписку по меню будет?
    • 0

    #20 R.Sergey

      Администратор

    • Администраторы
    • 2810 сообщений
    Репутация: 332
    Мастер

    Отправлено 02 September 2011 - 12:31 PM

    R.Sergey, Реакция на переписку по меню будет?

    Да, для мне сделать это меню не проблема, но не могу ничего пока обещать по срокам, т.к. после рождения сына, очень мало времени и накопилось очень много работы..... я просто не успеваю. Работники тоже не управляются - сейчас ищу еще человека на работу, чтобы сгрузить с себя все.
    • 0